Devnotes A note taking application

Devnotes Note is a Note App, where users can create, save, edit, archive and delete note.

Authors

• @Monu

Live App link

• Dev Note

Technologies used

• HTML
• CSS
• JavaScript
• ReactJS
• Mockbee (for mock backend)

Features and Functionalities

1. Landing page :

• Login button
• Signup button
• Dark Mode Toggle Button

2. Home page :

Note Editor:

Create a note with title, body, label, and color (on selecting from the color palette)
- Add color to note
- Add tags to note
- Add priority to note

Filter Panel:

There are two variant one is visible on desktop screens and another which has filter floating icon visible on mobile screen

- Filter and/or sort notes by:
- Filter by tags
- Search by note title or content
- Sort by creation date
- Sort by Priority

3. Label Page :

• All the notes are listed according to label category.

4. Archive Page :

• Consist the notes which are archived from home page.

4. Trash Page :

• Consist the notes which are Trashed from home page.

6. Sign Up page -

• Input first and last name
• Input email address
• Input Password and verify password by click show password button
• Create new account button
• Already have an account button

7. Login page -

• Input Username
• Input password
• Login button
• Dummy login data preloaded
• Create a New Account button

8. Log out button

10. Alerts/Toasts

• User is notified when the password or email is wrong.

11. Responsiveness

• All pages are made responsive with respect to mobile screens with Width greater than 320px
• Filter Panel, Header/NavBar, and SearchBar are also made responsive on mobile screens.

How to run this app Locally

To run this app locally on your machine, clone the repo to your local machine.

1. git clone https://github.com/m26unkwn/devNotes.git
2. cd devnotes In the project directory, you can run
3. npm install
4. npm start

This will start the app in development mode.
Open http://localhost:3000 to view it in your browser.
Make sure you have access to internet to make use of the API call inside the App.

👨‍💻 Lets connect !