DiaryDate
— Make friends and chat
by sharing your diary —
- Solely ideated, designed, and implemented the entire project.
- Built with Next.js App Router to create a smooth Single Page Application.
- Used Zustand to manage global states of user information, friend requests and friend lists.
- Leveraged Firebase for authentication, Firestore database, and implemented real-time messaging using onSnapshot.
- Deployed on Vercel with custom domain.
- Though I didn’t use Figma at the time, I iterated directly in code and refined the UI based on testing.
Overview
DiaryDate was inspired by the idea that it's often difficult to truly understand someone through typical social media. I believe a diary can reveal a person's daily life, emotions, and values. By sharing diary entries, users may have a better chance of connecting with like-minded individuals on a deeper level.
For those who enjoy recording their everyday moments, I designed a calendar-based interface that allows users to collect and revisit their entries visually. Flipping through the calendar becomes a way to reflect on the past and appreciate each day.
This was my first solo project where I handled both design and development. During the process, I noticed several aspects that could be improved, including technical functionality and overall user experience. These reflections motivated me to continue growing as a user-centered designer and engineer.
"Share Your Diary, Meet Your Date!"
Pages
Homepage
A central call-to-action on the homepage encourages users to jump right in and start sharing their thoughts through a diary entry.
Login/Sign up
Implements Firebase Authentication to handle user login and registration.
Supports both email/password login and Google sign-in.
Features a toggle switch UI to seamlessly switch between login and sign-up views on the same page.
Create Diary
Users can select any date on the calendar to start writing a diary entry.
The editor supports Markdown, allowing flexible text formatting.
Once posted, entries appear in the "My Diaries" page, where users can view or delete them.
My Diaries
The calendar provides a visual overview of when each entry was written.
Users can toggle between list view and calendar view by clicking the white switch button.
Users can delete a diary entry by clicking the trash can icon.
Shared Diaries
Displays a feed of diary entries recently shared by users.
A user's latest diary entry automatically appears on the shared feed for others to discover.
Only users who have posted at least one diary will be visible on this page, encouraging authentic participation.
Users can send friend requests directly from the shared feed to connect with others based on their diary content.
Chatroom
Chat with friends in real time.
Share emojis to express emotions more vividly.
Send images directly in your conversation.
Accept friend requests and start chatting instantly.
Features
Real-time Chat
Messages update instantly, keeping the conversation smooth and up to date without refreshing.
The view auto-scrolls to the newest message so users can stay focused.
Each message has a unique ID, allowing for future features like edit or delete.
An emoji picker makes chatting more expressive and closes intuitively on outside click.
Only accepted friends appear in the chat list, keeping the space private and meaningful.
Friend Request System
Users can send friend requests directly from the Shared Diaries page after reading someone’s post.
Once accepted, both users are added to each other’s friend list and can immediately start chatting.
The system is designed to feel instant and responsive, helping users build meaningful connections in a smooth and intuitive way.
Visual feedback is provided for all key actions, so users know when a request has been sent, accepted, or declined.
Responsive Layout
The layout adjusts across different screen sizes using SCSS media queries (360px–1200px), covering mobile, tablet, and desktop ranges..
UI Architecture Diagram
Technologies Used
Design Reflections
Designing and coding in parallel made it difficult to anticipate layout issues early on. The chatroom page, for example, lacked responsiveness due to tightly coupled components and the absence of wireframes.
The layout was not built with a mobile-first approach, resulting in a less refined experience on smaller screens.
Navigation logic was inconsistent. Page-level actions were divided between the top navbar and floating buttons, which weakened visual hierarchy and made navigation less intuitive.
Button feedback was minimal. Incorporating transitions and styled alerts could enhance interactivity and user engagement.
Large image files led to slow loading times and negatively impacted performance.
Page transitions lacked smoothness, and the overall site was not lightweight enough for an efficient user experience.
These challenges made me realize that creating a usable product requires more than just clean code. It also demands structure, clarity, and empathy for users.
“This project encouraged me to think more critically about how users experience what I design and led me to pursue a deeper understanding of UI/UX.
It also shaped my goal of becoming the kind of designer-engineer who builds with care and designs with purpose.”
