Magnificent Note in React

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

Authors

• @Puneet

WEBSITE VIDEO DEMO

Desktop

magnificent-note-desktop.mp4

Mobile Responsive

magnificent-note-mobile.mp4

Live App link

• Magnificent 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

Rich Text Editor integrated :

- Different text styles
- Add Link/URL to notes
- Add Images to notes
- More styling tools

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
• User agreement checkbox
• Create new account button
• Already have an account button

7. Login page -

• Input Username
• Input password
• Remember me option (ONLY UI)
• Forgot password option (ONLY UI)
• Login button
• Dummy login data preloaded
• Create a New Account button

8. Log out button

9. Search -

• Search any note by clicking on the Search icon in the Header when on the homepage.

• When on the homepage page, the search works dynamically with the key presses no need to press the search icon.

• the Note is searched for the title, body, and label text.

10. 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

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.

12. Dark Mode Toggle

• Theme can be toggled between light mode and dark mode by clicking the toggle located at the top-right corner of every page.

• Theme will remain persistent between different browser sessions. (Implemented local storage to store theme memory)

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/PuneetP16/magnificent-note.git
2. cd magnificent-store-react 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 !