rivaanranawat / diario

Diario, a Virtual Diary website.

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 [email protected]