Notesbanao

Notesbanao is a note taking app, that helps you manage your daily notes.

Features

1. Add a new note

   • I can add a note by clicking on a primary button "Add Note" or a "+" icon button which will open a textbox where we can add texts. And a "Save" button that will save the note.

2. Edit Note

   • I can click on the "Edit Note" button which will open the same component with the textbox where we can edit a note & save it.

3. Delete Note

   • I can click on the "Delete Note" button which will delete a note.

4. Filter & Sort by date, priority, tags

   • Filter by tags

     • I can filter notes by tags added to the note.
     • All the tags will appear in the sidebar.

   • Filter by priority

     • I can filter the notes by priority
     • Priorities would be high, medium, low

   • Sort by date

     • I can sort the notes by the date added/created.

5. Change Card Color

   • I can see various color containers (div) where if I click on any one of it. It will change the background color of the note.

6. Select tags from the predefined notes

7. Trash & Archive

   • Archive Notes: When I click on the "Archive Note" button which will add a note to the archive list
   • Delete Notes: I can click on a "trash" button or a "delete" button to delete the note which will add a note to the trash list

8. Sign-up Page

   • I can see a sign-up page from where I can sign-up using my email, first name, last name, password & confirm password.
   • I can see a hide-show icon checkbox that shows or hides my password.

9. Login Page

   • I can see a login page from where I can log in using my email & password.

10. Logout

    • I can see a logout button from where I can log out from the app on the header navbar.

---

Tech Stack

• HTML
• CSS
• Javascript
• React

---

Built using

• Particle UI
• Mockbee
• React Router Dom
• React Toastify

---

To Run Locally

Clone the repository on your local machine with the command below in your terminal, and cd into the banao-notes folder

Clone the Repository

git clone https://github.com/Rohitprasad83/banao-notes.git

Running the App

cd banao-notes

Create a .env file at the root level of the directory and create a environment variable.

REACT_APP_JWT_SECRET=<JWT_SECRET_KEY_OF_YOUR_CHOICE>

Start the server

npm start

Screenshots