VIBEPERFUME

• 

  Product detail page with fragrance notes, size options, image gallery, and live review system.

• 

  Luxury perfume storefront with curated collections, category filters, and elegant dark UI.

Inspiration

I wanted to build a real-world full-stack e-commerce experience around something aesthetic — luxury perfumes. The goal was to go beyond a tutorial and ship something that actually works end-to-end, from database to deployment.

What I learned

• How to structure a Node.js + Express REST API with proper validation and error handling
• How MongoDB Atlas + Mongoose schemas work together
• How to handle CORS between two separately deployed services (Render + GitHub Pages)
• How to build a React + TypeScript frontend that gracefully falls back to mock data when the backend is unavailable

How I built it

Backend: Express.js v5 server with Mongoose models for Products and Reviews, express-validator for request validation, and a mock fallback system so the API never fully breaks.

Frontend: React 19 + TypeScript with Vite, React Router DOM v7 for client-side routing, and Axios for API calls. Pages include a filterable product listing, a full product detail view with image gallery, and a review submission form.

Deployment: Backend on Render.com, frontend on GitHub Pages.

Challenges

• CORS configuration between GitHub Pages and Render required careful origin-matching logic
• Render's free tier spins down after inactivity — implemented a mock fallback so users still see data during cold starts
• Managing async state (product + reviews loaded in parallel with Promise.all) without race conditions

Built With

• axios
• express-validator
• express.js
• github
• mongodb-atlas
• mongoose
• node.js
• react
• react-router-dom
• render
• typescript
• vite