DiaryDate

— Make friends and chat

by sharing your diary —

GitHub
Live Demo

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 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.

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.

  • 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.

Technologies Used

  • 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.

UI Architecture Diagram

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.

  • 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.

“DiaryDate made me realize that creating a usable product requires more than just clean code.
It also demands structure, clarity, and empathy for users.”
— Li Gini