TakeNotes is a note taking app, you can pen down all your notes here, besides it provides multiple functionalities to the user.
- ReactJs
- CSS3
- Typescript
- Testing in Jest
- Landing Page
- SignUp page
- Login Page
- Logout Page
- Profile
- Archive
- Labels
- Home
- Trash
- Authentication with validation using regex
- create note, notes listing, filter & sort functionality
- pin/unpin, archive/unarchive, delete/permanently delete/restore, edit&save note functionality
- clean UI, crud operations
This app is divided into multiple components, the major components are createNote and Note component.
To add a note, click on the "Add Note" button in the sidebar or focus on the "Take a note..." section. It will expand the textbox, where you can add a title and desciption to the note. Then click "☑" and it will add your note to notes list.
- Edit Note
- you can click on the "Edit" button which will open the same component with the textbox where you can edit a note & save it.
- Delete Note
- you can click on the delete icon which will delete a note.
- Sort By Date
you can sort the notes by the date added/created.
- Newest first
- Oldest First
- Filter By Category
- Labeled
- Pinned
- Archived
- Filter By Labels
- Filter By Labels that you've added
when clicked on color palette icon, it opens color containers (div) where if you click on any one of it, it will change the background color of the note.
when clicked on the labels icon, it opens a container with a input and "add label" button. Using it you can add a note to the note.
- Archive Notes
- When clicked on archive icon, it archives the note and vice-versa.
- Delete Notes
- When clicked on delete icon, it delete the note and adds it to the trash list.
List the notes on different pages according to their category.
You can restire the note from the trash list by clicking on the restore icon. And can delete it permanently by clicking on delete button.
SignUp using you email and password. Has also toggle hidden password functionality.