Reflectr — AI Journaling Platform

Built and deployed full-stack journaling PWA with AI-powered reflections (React, Node.js, MongoDB, Firebase, Render).

Built and deployed full-stack journaling PWA with AI-powered reflections (React, Node.js, MongoDB, Firebase, Render).

Built and deployed full-stack journaling PWA with AI-powered reflections (React, Node.js, MongoDB, Firebase, Render).

About the project

Reflectr is a full-stack journaling platform that combines AI with modern web technologies to help users reflect and grow. Built with React, Tailwind, Node.js/Express, and MongoDB Atlas, it supports secure authentication via Firebase and cloud deployment on Render. Users can upload photos or write notes, and Reflectr generates meaningful reflections using the OpenAI API.

Reflectr is a full-stack journaling platform that combines AI with modern web technologies to help users reflect and grow. Built with React, Tailwind, Node.js/Express, and MongoDB Atlas, it supports secure authentication via Firebase and cloud deployment on Render. Users can upload photos or write notes, and Reflectr generates meaningful reflections using the OpenAI API.

Reflectr is a full-stack journaling platform that combines AI with modern web technologies to help users reflect and grow. Built with React, Tailwind, Node.js/Express, and MongoDB Atlas, it supports secure authentication via Firebase and cloud deployment on Render. Users can upload photos or write notes, and Reflectr generates meaningful reflections using the OpenAI API.

Motivation

I built Reflectr out of a personal interest in journaling and self-reflection. Journaling is a proven tool for mental clarity, but many people struggle with consistency, structure, and finding insights in what they write. I wanted to create a platform that not only provides a simple place to store thoughts, but also uses AI to help users reflect on their writing, notice patterns, and grow over time. My goal was to combine my technical skills in full-stack development with a product that genuinely improves people’s lives.

My Role

I designed and implemented Reflectr end-to-end as a solo developer and product designer, taking the idea from concept to deployment.

Process / Step-by-Step

1. Research & Planning

  • Identified journaling pain points (lack of structure, no feedback, difficulty reviewing past entries).

  • Drafted user stories such as:

    • “As a user, I want to write daily reflections quickly so I can stay consistent.”

    • “As a user, I want the app to summarize or generate insights from my entries so I can learn more about myself.”

  • Chose a PWA (Progressive Web App) model so the app could work seamlessly on desktop and mobile without needing app store approval.

  • My Figma design:

    figma design

2. Tech Stack Decisions

  • Frontend: React + TailwindCSS → for fast UI iteration and mobile responsiveness.

  • Backend: Node.js + Express → lightweight REST API to serve data.

  • Database: MongoDB Atlas (with Mongoose) → flexible schema for journal entries.

  • Authentication & Hosting: Firebase → easy, secure login and frontend hosting.

  • Deployment: Google Cloud Run for the backend → scalable, serverless container hosting.

  • AI Integration: OpenAI API → to generate reflections, insights, and summaries.

3. Backend Development

  • Set up RESTful APIs for user management, entries, file uploads, and AI reflection generation.

  • Integrated Mongoose models for journaling entries and user data.

  • Added JWT authentication with Firebase to ensure secure API access.

  • Implemented CORS policies for secure frontend-backend communication.

4. Frontend Development

  • Designed the UI using TailwindCSS, focusing on simplicity and readability.

  • Built responsive components (Dashboard, New Entry form, Entry List).

  • Added Firebase Auth flows for sign-up, login, and session handling.

  • Integrated API calls to connect journaling features to the backend.

  • Developed a polished onboarding flow to make first-time use frictionless.

    new entry page

5. AI Features

  • Implemented OpenAI prompts that analyze user journal entries to generate:

    • Summaries of the entry.

    • Reflections/questions to guide deeper thought.

  • Optimized prompt engineering for tone: supportive, reflective, never judgmental.

the call to OpenAI

6. Storage & Media Handling

  • Configured MondoDB for secure image/file uploads (users can add media to entries). This allowed seamless integration of text-based journal entries and associated images/files in one unified data layer.

7. Deployment & Domain

  • Set up Firebase hosting for frontend and routed through a custom domain (joinreflectr.com).

  • Configured HTTPS, environment variables, and health checks for production readiness.

8. Testing & Hardening

  • Wrote unit tests for key backend routes and utility functions.

  • Added structured logging to debug production errors.

  • Ensured CORS policies and API key management were configured securely.

Outcomes

  • Shipped a live AI journaling app at www.joinreflectr.com.

  • Optimized for both desktop and mobile PWA use.

  • Built a foundation for future features such as streaks, sentiment analysis, and trend visualization.

Designed by Christine Zhou · Coded with ☕ + ❤️ in Framer

Designed by Christine Zhou · Coded with ☕ + ❤️ in Framer