Scent

Modern fragrance-focused e-commerce experience built with Next.js, TypeScript, and Tailwind CSS.

---

Navigation

1. Overview
2. Features
3. Performance & Scalability Goals
4. Roadmap
5. Tech Stack
6. Project Structure
7. Getting Started
8. Available Scripts
9. Screenshots
10. Deployment
11. Contributing
12. License

---

Overview

Scent is a full-stack fragrance-focused e-commerce application developed collaboratively by a full-stack engineer and a UX/UI designer.

The project was created as a production-oriented portfolio application focused on delivering a modern shopping experience while following real-world frontend engineering practices.

Key areas of focus include:

• scalable architecture
• strict TypeScript usage
• reusable component design
• responsive layouts
• collaborative Git workflow
• performance optimization
• accessibility and user experience

---

Features

• Fully responsive modern interface
• Accessible UI components
• Optimized Next.js App Router architecture
• Type-safe development with TypeScript
• Reusable component-based architecture
• Tailwind CSS design system
• Conventional Commits and structured PR workflow
• Production-oriented frontend workflow

---

Performance & Scalability Goals

The application is designed with a production-oriented mindset, focusing on perceived performance, scalability, and resilience under real-world constraints such as high latency and increased user load.

The current performance objectives include:

• Optimized user experience under high-latency and unstable network conditions
• Efficient rendering strategy with minimal unnecessary client-side JavaScript
• Scalable architecture designed to support high traffic workloads (100k+ concurrent users) under appropriate horizontal scaling conditions.
• Reduced Time to First Byte (TTFB) and optimized server response times via caching strategies
• Optimized asset delivery (image optimization, lazy loading, and CDN usage)
• Stable UI performance under heavy interaction load (animations, cart updates, navigation transitions)

Additional engineering targets for production readiness:

• Effective caching strategy (server-side + edge where applicable)
• Database query optimization and avoidance of N+1 patterns
• Stateless backend design to support horizontal scaling
• Graceful degradation under partial service failure
• Monitoring-ready architecture (logs, metrics, and error tracking integration)
• Core Web Vitals optimization (LCP, CLS, INP within “good” thresholds)

---

Roadmap

Design

• Website structure
• Branding (color scheme, fonts, spacing)
• Breakpoints definition
• Desktop design — all pages and component states
• Tablet and mobile adaptive design
• Design polish and organization

---

Phase 0 — Preparation

• Complete official Next.js course
• Learn Prisma, PostgreSQL, and relational databases
• Learn NextAuth basics
• Initialize Next.js + TypeScript + Tailwind CSS

Phase 1 — Frontend

• Integrate Shadcn UI
• UI kit (custom colors, fonts, buttons, tags, breadcrumbs)
• Reusable components (header, footer, product card, search, comments)
• All client-side pages
• Metadata (title, description, favicon)

Phase 2 — Backend: Core

• Set up Prisma + PostgreSQL
• Design database schema
• Seed database with initial data
• Configure NextAuth
• Configure localization
• React Server Components
• Authentication
• User profile
• Shop (filters, sorting, search, gender/brand views)
• Product interactions (wishlist, cart, comments)

Phase 3 — Backend: Integrations

• Newsletter subscription
• Stripe payment integration (test mode)
• Order storage
• React Server Components optimization

Phase 4 — Admin Dashboard

• Authentication
• Dashboard home
• Products CRUD
• Orders management
• Users management

Phase 5 — Polishing

• Tablet and mobile responsiveness
• SEO optimization
• PageSpeed Insights audit
• Unit and integration testing
• Production readiness review
• Secrets and environment variables audit

Phase 6 — Deployment

• Configure Vercel environment variables
• Deploy to Vercel
• Custom domain setup

Phase 7 — Showcase

• Finalize README
• Set repository public
• Post on LinkedIn and Dev.to

---

Tech Stack

Frontend

• React v19
• Next.js v16
• TypeScript v5
• Tailwind CSS v4

UI & Component Libraries

• Shadcn/ui
• Radix UI
• Lucide React
• Swiper

Backend & Infrastructure

• Prisma (ORM)
• PostgreSQL (database)
• Vercel (hosting & deployment)

Tooling & Developer Experience

• pnpm (package manager)
• ESLint (linting)
• Prettier (code formatting)

---

Project Structure

src/
├── app/                         
│   ├── account/                 # Account related pages
│   │   ├── cart/
│   │   ├── orders/
│   │   ├── profile/
│   │   ├── wishlist/
│   │   └── layout.tsx
│   ├── shop/                    # Shop related pages
│   │   ├── [[...slug]]/
│   │   ├── brands/
│   │   ├── product/
│   │   └── layout.tsx
│   ├── globals.css              # Global styles, themes, and utilities
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Homepage
│
├── assets/                      # Fonts, images, icons 
│   ├── images/
│   └── fonts.ts 
├── components/                  # Reusable components
│   ├── ui/                      # UI primitives
│   ├── icons/                   # Custom icons
│   ├── layout/                  # Layout-related components
│   │   ├── footer.tsx
│   │   ├── header.tsx
│   │   └── nav.tsx
│   └── pages/                   # Page-specific components
├── hooks/                       # Custom React hooks
└── lib/                         # Shared data, utilities and types
    ├── data.ts
    ├── types.ts
    └── utils.ts 

---

Getting Started

Clone the repository

git clone https://github.com/Abviol/scent.git

Copy variables from .env.example to .env

cp .env.example .env

Install dependencies

pnpm install

Start development server

pnpm dev

Open:

http://localhost:3000

---

Available Scripts

Development

pnpm dev

Production build

pnpm build

Start production server

pnpm start

Lint code

pnpm lint

---

Screenshots

Home Page

Shop Page

Cart Page

Wishlist Page

---

Deployment

The application is deployed on Vercel automatically on push to dev.

---

Contributing

Please read Contributing before creating branches, commits, or pull requests.

---

License

MIT License.