Home/Projects/ Project - Notes App/
Home/Projects/Project - Notes App/

Notes App

css
js
react
Manage your work, home, personal tasks with notes. Add ability to add, edit, delete, and mark them as completed. Additional features include searching, filtering and visualizing completion progress. Perfect project for Aspiring React Developers.
Designed by
Milena Ulman
Difficulty
It's free and always will. You can use this design for your portfolio/website without any limitations. Additionally, you can share the completed project wherever you want.

Read me first

The goal of this project is to build a Notes App similar to the design above.
Technologies & tools will be proposed down below but feel free to use different ones if you're more familiar with them. Have fun along the way.
Project requirements
  • If not using CodeSandbox, boilerplate the application with CRA.
  • The application looks similar to the design and is available for users through a link.
  • Users can both search and filter notes.
  • Users can add new notes.
  • When adding a new note, users can fill title, description, and category. The date should be 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 complete, edit, and delete them.
  • When completing notes, they should have strikethrough text and become grayed out. Also, they should be moved into the end.
  • When editing notes, the date of note should also be updated altogether with other fields.
  • When deleting notes confirmation should pop up.
Additional requirements
  • Save and read notes, using e.g. localStorage.
  • Add unit tests to your code, using e.g. jest.
  • Add e2e tests to your code, using e.g. cypress.

How to start

In most cases, CodeSandbox will be the best place for starting out rapidly.
You could also use an IDE, VSCode for example, and create e.g. a GitHub repository with custom deployment. More about it in the "Build & Deploy" section.
First steps
  • Be Agile! Plan your work upfront either with Scrum or Kanban by creating e.g. Trello board for this project.
  • Open the design by clicking the button under the above image.
  • Get familiar with design, it contains all the assets (except icons sometimes - use e.g. fontawesome), CSS properties you'll need to use.
  • After deciding on either CodeSandbox or GitHub repo, set your project with initial files, directory structure (your own preference).
  • Nothing will stop you now. Don't forget to share a link once you completed the project!

Technologies & Tools

Core concepts

Stuck, can't progress?

Take a break, think about all the pieces you need to build for this project.
I'll be happy to assist you, try out my Mentorship or/and connect to a study group on Slack where I and mentees will be able to answer your questions.

Build & Deploy

If you decided on CodeSandbox, there should be a "Share" button that you can use as a link for your completed project.
Otherwise, for simple, static projects (HTML, CSS, JavaScript) you can try GitHub Pages. For more complex deployments (React, etc.), Netlify or Vercel should be good. If the project has a little bit of Backend, try Heroku for it.

Review & Feedback

Before you share the completed project, feel free to post it on Slack for review, someone might pick it up and give honest feedback, maybe even propose code improvements. After all, we want to improve as Developers.

Share your solution

It would be amazing if you can tweet @BigsonDev with the link to the completed project and/or GitHub repo. All the mentees would love to see what you've built (and me too).

Wall of Fame

To get in the Wall of Fame, I'll need a couple of things.
  • Link to the completed project (CodeSandbox link or completed project link with GitHub repo link).
  • Your nickname. (brand name, something spicy 🔥)
  • Portfolio/Website/GitHub link you would like to share with the world.
If I missed your solution, please, contact me via the Reach Out form.
I can't promise every solution will land on the Wall of Fame, it needs to be neat and crispy.
spread the word
Do you think this project is cool? Share it with someone!