Personal Notes app with features to add, edit, delete, and mark them as completed. Additional features include searching, filtering and visualizing completion progress.

👉 DEMO 🚀

⭐ Original project bigsondev.com

⭐ Designed by Milena Ulman

🔨 Technologies & Tools

• React
• Context Provider
• Material UI
• Material UI Icons
• LocalStorage

🏆 Features

• Users can search and filter notes.
• Users can add new notes.
• When adding a new note, users can fill title, description, and category. The date is created under the hood using the current time.
• Users can see created, colored notes sorted by date as well as an empty UI with illustration when there are no notes or couldn't be found.
• Users can see how many notes are completed including the visual progression indicator.
• Users can mark notes as completed, edit, and delete them.
• Completed notes have strikethrough text and gray background. Also, they are moved into the end.
• Confirmation pops up when deleting notes.

💎 Additional Features

• Notes data stored in localStorage

🔧 Project setup

# In the project directory run:

# Start
yarn

# Build
yarn build

# Test
yarn test