Create a Notion-like application named Lotion with HTML, CSS, and React.

I am attaching a video to explain what the application should look like. Further instructions are provided below:

Three external libraries were used for the demo:

1)react-router-dom for front-end routing, which you can install by running npm install react-router-dom.

2)react-quill for the editor, which you can install by running npm install react-quill.

uuid for generating universally unique identifiers, which you can install by running npm install uuid. Based on the algorithm you choose to implement the application, you may not need this library

There's no backend or database for the application. However, the data persists in the browser. You need to use localStorage to implement this.

Three different React hooks were used to build the demo:

useState

useEffect

useRef. Based on your solution, you may not need to use this hook

The demo uses a Layout route. You need to use a page parameter to pass the note id to the component: /notes/1, /notes/2/edit. Based on your solution, you probably need to pass props to the child/children of the Layout component.

You need to use the useParams and useOutletContext hooks from the react-router-dom library to access the page parameters and the data passed to the children of the Layout component.

You probably need to use the useNavigate hook from the react-router-dom library to navigate to a different page at times. (hint: when you edit a note and hit save, you navigate from the edit path /notes/note-id/edit to the view path /notes/note-id).

The prompt you get when click on the Delete button is implemented using the [login to view URL] method. It returns true if the user confirms, and false if they don't:

const answer = [login to view URL]("Are you sure?");

if (answer) {

deleteNote(noteId);

}

The page icon (the L letter) is already included in the project

The demo was built using Flexbox, but feel free to use a CSS framework

The menu icon is the HTML unicode character ☰

The datetime picker shown in the demo is the <input type="datetime-local" /> HTML element

The value you get from the datetime-local element is not formatted the way it's shown in the demo. In order to format it, you can use a function like this:

const options = {

year: "numeric",

month: "long",

day: "numeric",

hour: "numeric",

minute: "numeric",

};

const formatDate = (when) => {

const formatted = new Date(when).toLocaleString("en-US", options);

if (formatted === "Invalid Date") {

return "";

}

return formatted;

};

Things you may change:

You may use a CSS framework or a different CSS method other than Flexbox. The final result needs to look like the demo

You may change the colors, font family, and font size

You may use a different library for the editor. The demo uses the react-quill library

You may use a different library for the routing. The demo uses the react-router-dom library

You may use a different library for generating ids. The demo uses the uuid library. You may also choose not to use a library for this based on your solution. If your solution doesn't need a UUID, it doesn't mean it's wrong

Things you may not change

The general layout including all the buttons

The routing. The application needs to use front-end routing to show or edit a note

The localStorage. The application needs to use the browser storage to persist the data

The editor. There needs to be a text editor to write a note

The deployment. The application needs to be deployed on Netlify.

LASTLY,

Tags. They need to be searchable. That is, when a user is picking a tag for a note, the application should suggest similar tags

Sorting and searching for the notes

JavaScript HTML5 Node.js CSS React.js

ID Proiect: #36111414

Detalii despre proiect