Diario
Customizable Virtual Diary which won India's West Region Design Championship Competition (Web Design)
Demo
http://diario-dc-2021.netlify.app/
Tech Stack
Client: React, CSS Modules, Material UI, Context API
Server: Firestore, Firebase Storage
Features
- Login / Signup With Email & Password.
- Keeping Users Logged in.
- Forgot Password.
- Creating Diaries
- Selecting/Removing Optional Cover Image for diary according to your preference.
- Selecting/Removing Optional Colour for diary according to your preference.
- Diary-Like UI which gets affected by above changes.
- Locking your Diary with Password.
- Diaries will have 3 sections which can be created unlimited times:
- Chapter: Text Editor users’ can type in their thoughts, feelings etc.
- To-Do List: List where users’ can type in their tasks and delete them when done.
- Sticky Notes: List for users’ to make brief notes on topic they are studying/working on.
- Features For Chapter Section:
- TextEditor where text can be bolded, italicized, font size can change,image can be added, bullet points, aligned etc.
- Saving all the text data to the database after the save button is clicked.
- Retrieving and displaying all the previously typed data from the database, different for different chapters before the page shows up anything.
- Features For To-Do List:
- Text Input Field where text can be written and saved to the database.
- Retrieving and Displaying all the tasks.
- Deleting the tasks when completed.
- Features For Sticky Notes:
- Creating Multiple Sticky Notes via Input that asks for description & title.
- Retrieving and Displaying Sticky Notes.
- Deleting the Sticky Notes.
- Table to show all the sections the user has created in a diary.
- Creating Multiple Diaries.
- Deleting one section of chapter, to-do or sticky notes.
- Deleting a diary.
- Sidebar showing all the chapters in a diary for easier navigation.
- Sorting diaries and chapters by the time of creation in ascending order.
- All the actions to be performed real time.
- Routing with Validation.
Feedback
If you have any feedback, please reach out to me at namanrivaan@gmail.com