Aura Drip

1. Project Introduction
2. Project Overview And Features
3. Tech Stack, APIs, And Other Resources
4. Getting Started: Setup And Running Instructions
5. Deployment Notes
6. Challenges And What I Learned
7. Future Improvements
8. How To Contribute And Report Issues

Aura Drip is a personal full-stack project I built to practice shipping a product that feels closer to a real application than a classroom exercise or tutorial clone. The idea was to create a digital wardrobe where users can upload their own clothing, organize it in one place, favorite pieces they wear most often, and generate outfit suggestions based on what they already own.

As a new computer science graduate working toward an entry-level software engineering role, I wanted this project to show more than isolated frontend components. I wanted it to demonstrate that I can think through the full product lifecycle: database design, authentication, protected API routes, file uploads, deployment, debugging production issues, and iterative UI improvements.

This project pushed me to solve real engineering problems such as:

• designing a user-scoped data model for wardrobe items
• building authenticated CRUD routes with request validation
• connecting a Vercel frontend to a Render backend
• working with Supabase Auth and Supabase Storage
• debugging Prisma migration and database connection issues in production
• revisiting UI density and mobile responsiveness after deployment

Aura Drip is centered around personalized wardrobe management. Instead of recommending outfits from a generic catalog, the app works with the clothing a user has personally uploaded.

A signed-in user can:

• create an account and confirm their email
• sign in securely with Supabase Auth
• upload clothing images to Supabase Storage
• save item details such as category, color, style, occasion, and warmth
• browse a searchable and filterable wardrobe
• favorite items for faster access later
• edit or delete existing items
• generate outfit suggestions based on a natural language prompt
• view wardrobe-related counts on the dashboard and profile page

Users can create an account, sign in, and access only their own clothing data. On the backend, Supabase JWTs are verified before protected routes are allowed to access wardrobe records. Every clothing item is tied to a specific userId, which prevents one user from reading or modifying another user's data.

Users can create clothing items with the following attributes:

• name
• category
• color
• style
• occasion
• warmth
• image URL

Once an item is created, the user can:

• search by item name
• filter by category
• sort alphabetically
• update item information
• delete an item from the database

The app allows users to favorite wardrobe items and view them in a dedicated favorites page. Favorite state is stored in the database rather than only in local UI state, which makes the experience persistent across sessions.

Users can type prompts such as:

• Give me a warm formal outfit for today
• I want something casual for the weekend
• Create a business outfit using my favorites

The backend reads the prompt, extracts useful styling preferences, scores available wardrobe items, and returns a generated outfit with a short explanation of why those items were chosen.

Clothing images are uploaded to the clothing-images bucket in Supabase Storage. After upload, the public image URL is saved in PostgreSQL through Prisma so each clothing item has a stored image reference.

The interface was designed and later refined for mobile responsiveness. Recent updates included:

• a mobile-first layout pass
• smaller and more balanced dashboard cards on phones
• a sticky bottom tab bar for mobile navigation
• better control spacing on wardrobe and favorites pages
• more consistent card sizing between wardrobe and favorite views

• React 19
• TypeScript
• Vite
• React Router
• Supabase JavaScript Client
• Framer Motion / Motion
• CSS

• Node.js
• Express
• TypeScript
• Prisma ORM
• PostgreSQL
• Zod
• JOSE

• Supabase PostgreSQL
• Supabase Storage

• Supabase Auth
• JWT verification on the backend using Supabase JWKS

• Vercel for the frontend
• Render for the backend

Before running the project locally, make sure you have:

• Node.js installed
• npm installed
• a Supabase project
• a PostgreSQL connection string
• Git installed

git clone https://github.com/RjGutierrezz/Aura-Drip.git
cd aura-drip

Install frontend dependencies:

cd frontend
npm install

Install backend dependencies:

cd ../backend
npm install

Create a frontend/.env file:

VITE_API_URL=http://localhost:4000
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Create a backend/.env file:

DATABASE_URL=your_postgres_connection_string
SUPABASE_URL=your_supabase_project_url

Notes:

• SUPABASE_URL should look like https://your-project.supabase.co
• DATABASE_URL must be a PostgreSQL connection string, not the Supabase project URL
• for hosted environments like Render, the Supabase session pooler connection string worked more reliably than the direct database URL

From the backend directory:

npx prisma migrate deploy
npx prisma generate

For local development, you can also use:

npx prisma migrate dev

From the backend directory:

npm run dev

The backend runs on http://localhost:4000.

From the frontend directory:

npm run dev

The frontend runs on http://localhost:5173.

The project is deployed as two separate services:

• frontend/ on Vercel
• backend/ on Render

Vercel needs:

• VITE_API_URL
• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY

Render needs:

• DATABASE_URL
• SUPABASE_URL

The backend required Prisma generation and migration deployment during the build process:

npm install && npx prisma generate && npx prisma migrate deploy

One deployment issue I had to work through was that the direct Supabase PostgreSQL connection did not work properly from Render. Switching to the Supabase session pooler fixed the network reachability problem.

Email confirmation links needed to be updated so they pointed to the production Vercel deployment rather than localhost. This involved configuring Supabase Auth URL settings and allowed redirect URLs for both local development and production.

This project taught me much more than just how to build a CRUD app.

I learned that authentication affects both frontend and backend architecture. It is not enough to let users sign in on the client. The backend also has to verify tokens and enforce ownership of data.

Some of the most valuable lessons came after the app worked locally. I had to troubleshoot:

• missing production environment variables
• incorrect Supabase redirect URLs
• Prisma migration deployment
• the difference between a Supabase project URL and a database connection string
• session pooler vs direct PostgreSQL connection
• frontend/backend communication across Vercel and Render

I spent time revisiting mobile responsiveness, card sizing, navigation, and UI density. That process reminded me that shipping a feature is only part of the job. Making it feel usable and polished is just as important.

This project helped me grow beyond isolated components. I had to think through:

• the data model
• request validation
• user flows
• deployment environments
• production debugging
• iterative UX improvements after real testing

That end-to-end ownership is one of the main things I wanted this project to demonstrate as I work toward an entry-level software engineering role.

Some features I would like to add next:

• delete account functionality on the user page
• better weather-aware outfit recommendations
• stronger prompt parsing and recommendation logic
• saved generated outfits
• user profile photo support
• drag-and-drop image uploads
• automated tests for backend routes and frontend components
• code splitting and bundle optimization
• AI reasoning for outfit generation

I deployed this project publicly even though its not 100% done because I wanted to further improve the project base on feedbacks!

If you would like to contribute:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Open a pull request with a clear explanation of what changed

If you find a bug or want to suggest an improvement:

• open a GitHub issue
• include reproduction steps if possible
• include screenshots or logs when relevant

I especially appreciate feedback around:

• code quality
• UI and UX improvements
• architecture decisions
• backend validation and security
• deployment and production-readiness