Ginger Diary
Ginger Diary is a memento-based diary application built using the MERN stack. This web application is built taking into account the best of features offered by modern-day journal applications and the developer’s vision of an ideal digital diary. It offers users a simplified and accessible journaling experience while keeping intact essential features typical of a digital diary, like journal entry management, multimedia attachments, journal entry categorization, date and time stamping, and data export.
While digital alternatives for a journal are easy to access, they can very easily feel impersonal and overly complex with feature options going overboard and all over the place. Ginger Diary aims to counter this issue by balancing functionality with simplicity. With a focus on providing an intuitive and clutter-free interface, the app emphasizes emotional engagement and ease of use for all its users.
Ideation
When I took on this project I had two things in mind, first, I wanted the design and user interface to be the hero of my project, and second, I wanted to learn and explore the React framework. Adhering to this, I opted to go with the idea of making a simple and fully functional journal entry web application which I named ‘Ginger Diary’. For someone who enjoys writing and indulges in revisiting old memories, this project was a bit personal for me and kept me genuinely engaged throughout.
The project got a kickstart with the proposal submission and initial research. It helped me to decide on the features I would want for my web app and to categorize and prioritize them for drafting the MVP and the final product. I came across different existing digital journal apps such as DayOne, journey.cloud and Penzu whose workflows and feature adaptation are visible in my work. I sketched the low-fi wireframes, had the sitemap in place, and finalized my tech stack (i.e. MongoDB, Express.js, React, and Node.js) for the project during this phase.
Production
Since React was a new framework for me, my research and development process went hand in hand. I have used multiple resources such as YouTube tutorials, JS library documentation, other online resources and even OpenAI to deepen my understanding of React and make this project work as a fully functional unit.
The first step was setting up the server with Express.js and MongoDB for data storage, and installing packages like express, mongoose, and dotenv. I used RESTful API endpoints to manage user data, journal entries, and chapters (categories for my journal entries).
For the frontend, I focused on making the user interface clean, organized and as user-friendly as possible. I integrated rich text editing using the react-quill library, allowing users to format their journal entries easily. I also implemented ShadCN components to ensure a consistent UI for the app which proved to be extremely helpful to strike a balance while I was developing and working on the design elements of my application consecutively.
I have utilized JSON Web Token for secure user authentication and bcrypt for password hashing. For media storage, I integrated Cloudinary to store media files outside the app’s server, which helped improve my application’s performance.
Iteration and Testing
The development process involved several iterations of bug fixing and implementing feedback and suggestions from the instructor. Testing was a key part of this stage, where I performed unit and integration tests, along with manual testing to identify any issues with functionality, performance, and design.
Reflection
For me, this project is a reflection of the skills I have learned and practised during my two years here at NIC. More than anything, I want my project ‘Ginger Diary’ to resemble my aptitude for user experience design and design in general, my persistence to learn, and step out of my comfort zone and my ability to adapt and solve problems.
