Landing Page
Empty Journal Card Page (Light mode)
Empty Journal Card Page (Dark mode)
Create Journal Page (Light mode)
Create Journal Page (Dark mode)
Journal Page with entries

OOTDscribe

🌟 Inspiration

Memories fade, and we often forget the little joys in our daily lives. With OOTDscribe, we help you create a digital footprint each time you go out! By capturing your Outfit of the Day (OOTD) alongside your thoughts and emotions, you can reflect on how good life has been. Looking back at your personal journal can also bring gratitude and peace of mind. We hope everyone enjoys their journey with OOTDscribe!

✨ What It Does

Simply snap a picture of your outfit, describe your daily activities and mood, and let AI generate a personalized journal entry just for you. It's your AI-powered fashion diary!

Add/Remove journal entries
Light/Dark mode integration UI
Functional search bar for searching journals
Responsive UI for mobile

🛠️ How We Built It

OOTDscribe is built using the MERN stack with Tailwind CSS and Google Gemini API for AI-generated journal entries.

Tech Stack:

Backend: MongoDB, Express.js, Node.js.
Frontend: React (Vite), Tailwind CSS, Reactbits library, ShadCN, Lucide Icons, Sonner Toast.
AI Integration: Google Gemini API.

🚧 Challenges We Faced

Handling image data (Base64) in JSON for storage and retrieval in MongoDB.
Debugging fetch API and endpoint issues.
Slow Journal Card Loading.

🎉 Accomplishments We're Proud Of

Successfully developed the frontend and backend in parallel.
Able to search for journal entries based on the journal generated.
Able to feed images into Google Gemini API to generate journals.
Designed a systematic approach to backend controllers.
Created a visually appealing frontend with smooth animations.

📚 What We Learned

Connecting MongoDB with Gemini API on the backend.
Managing frontend API requests with Axios.
Implementing advanced Tailwind CSS styling.
Efficiently handling image storage in Base64 format.
Using localStorage to improve journal card loading speed.

🚀 What's Next for OOTDscribe

Edit & Share Feature: Allow users to modify and share journal entries.
Spotify Integration: Play music while writing and reading journal entries for an immersive experience.
Deploy: Deploying the website for public usage!