About
What is DayNotes?
DayNotes is a Front-End web development project that allows users to make date-based note documents using the Quill.js text editor alongside a calendar that visualizes their timeline of created notes. DayNotes also allows users to have instantaneously updating and saving documents for real-time synchronization between their browser tabs.
How does it work?
Once the user signs in through Auth0's user authorization, a MongoDB user collection is made which will store their basic profile data (private login data is securely stored through Auth0.) When they create their first note, the client-side Vercel-hosted website communicates with the Node.js server hosted on Render to establish a Socket.io web socket connection. This socket connection is what allows for real-time document synchronization between browser tabs.
Once the Socket.io connection is started, the Quill.js text editor is activated and a note document is created in the MongoDB database with important data like the users ID, the date of the document, and the notes text. The note is now ready for any changes, and is saved consistently every second, with Socket.io listening for any changes to be communicated.
At the top of the interface, there is a calendar view toggle which displays what dates the user has made a note. If a note was created but left empty or with only whitespace, Socket.io tells MongoDB to delete the document (to save space.) If the user wants to delete the note for that date, they can at the top right.
Finally, the user can navigate to the Notes page to see their collection of notes laid out in grid form, enabling them to sort through by date or when they were last updated, and they can even search by keyword or date. Thanks for checking out my project DayNotes! This is merely just a personal project for development practice, not intended as a real product.
Development Technologies
This project was made using React, TypeScript, Socket.io, Quill.js, MongoDB, Date-fns, Auth0, TailwindCSS, NextJS, Node.js, Render, and Vercel.
Check out my other projects:
www.bridgerbrown.dev