R&B Notes in React

R&B Notes is a Note App, where users can create, save, edit, archive and delete note.

Authors

• @Ashish Sethi

WEBSITE VIDEO DEMO

R.B.notes.mp4

Live App link

• R&B Notes

Technologies used

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

Features and Functionalities

1. Landing page :

• Login button
• Signup 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
- Sort by creation date
- Sort by Priority

1. Label Page :

• All the notes are listed according to label category.

2. Archive Page :

• Consist the notes which are archived from home page.

3. Trash Page :

• Consist the notes which are Trashed from home page.

4. Sign Up page -

• Input first and last name
• Input email address
• Input Password and verify password by click show password button
• SignUp button
• SignIn button

5. Login page -

• Input Username
• Input password
• Login button
• Test Login button
• Create a New Account button

6. Log out button

7. Loading & Alerts/Toasts

• User is notified when the password or email is wrong.
• Loader is displayed for each API call, add to cart, remove from cart, move to wishlist, and for the update in quantity

👨‍💻 Lets connect !