Project Summary - Rashele Perfumery

Overview

Rashele Perfumery is a full-stack e-commerce web application specialized in perfume and fragrance sales.

Type: E-Commerce Web Application Purpose: Retail platform specialized in perfumery with administration panel, customer management, and marketing automation.

Main Features

Customer Features

Product Catalog: Browse by categories (Women, Men, Unisex, Special Offers)
Product Details: Complete perfume information (brand, size, gender, concentration: EDT, EDP, Parfum)
Newsletter Subscription: Email marketing with double opt-in verification
Multi-Currency: Support for multiple currencies with exchange rates
Multi-Language: Bilingual content (Spanish/English)

Administration Panel

Product Management: Complete CRUD with image upload
Category Management: Hierarchical product organization
Newsletter: Subscriber management and segmented campaigns
Marketing Campaigns: Email scheduling and sending
Blog/Posts: Content creation with social media integration
Settings Panel: Site settings, branding
Data Migration: CSV import tools

Technology Stack

Frontend

Technology	Version	Use
Next.js	15.5.4	Main framework with App Router
React	19.1.0	UI library
TypeScript	5	Main language
Tailwind CSS	3.4.17	Styling framework
Radix UI	-	UI component library
React Hook Form	7.63.0	Form management
Zod	4.1.11	Schema validation
Lucide React	0.544.0	Icons
Next-themes	0.4.6	Theme management
Sonner	2.0.7	Toast notifications

Backend & Database

Technology	Version	Use
Prisma	6.17.0	ORM
PostgreSQL	-	Database (Neon cloud)
NextAuth.js	4.24.11	Authentication
bcryptjs	3.0.2	Password hashing

External Services

Service	Purpose
Cloudinary	Image hosting and CDN
Resend	Transactional email service
Vercel Analytics	Performance analytics

Development Tools

ESLint 9: Linting with Next.js configuration
date-fns: Date handling
csv-parse: CSV processing for migrations

Architecture and Patterns

Project Structure

/perfumeria-rashelle/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (public)/           # Public pages
│   │   ├── admin/              # Admin dashboard (protected)
│   │   └── api/                # API routes
│   ├── components/             # React components
│   │   ├── admin/              # Admin components
│   │   └── ui/                 # Reusable components
│   ├── contexts/               # React contexts (LanguageContext)
│   ├── hooks/                  # Custom hooks (useCurrency, useSiteSettings)
│   ├── lib/                    # Utilities and configuration
│   │   ├── auth.ts             # NextAuth config
│   │   ├── db.ts               # Prisma client
│   │   ├── validations.ts      # Zod schemas
│   │   └── email.ts            # Email templates
│   └── middleware.ts           # Next.js middleware (auth/CORS)
├── prisma/
│   ├── schema.prisma           # Database schema (13 models)
│   └── seed.ts                 # Seeding script
├── public/                     # Static assets
├── scripts/
│   └── create-admin.ts         # Admin user creation
└── MD Files/                   # Documentation (23+ files)

Implemented Patterns

Next.js App Router: Server Components for server-side rendering
Layered Authentication: NextAuth.js with JWT strategy, route protection via middleware
Role-Based Access Control: ADMIN/CLIENTE
ORM & Database: Prisma with PostgreSQL, defined relationships
Design System: Reusable components based on Radix UI
RESTful API: API routes with Zod validation and consistent error handling

Database Models (13)

User, Product, Category
Order, OrderItem
Newsletter, Campaign
Post, SocialMedia
SearchLog, SiteSettings
Configuration, PaymentMethod

Implemented Best Practices

Security

✅ Authentication & Authorization

Password hashing with bcryptjs
JWT sessions with 7-day expiration
Role-based access control
CSRF protection in middleware
CORS protection with allowed origins

✅ Data Validation

Input validation with Zod schemas
SQL injection prevention via Prisma ORM
Strong password requirements (12+ characters, uppercase, lowercase, numbers, special characters)
Generic error messages to prevent user enumeration

✅ Security Headers

X-Frame-Options
X-Content-Type-Options
Content Security Policy (CSP)

✅ Secrets Management

Separate environment variables (.env)
Credentials not committed in code

Code Quality

✅ TypeScript Strict Mode enabled ✅ ESLint configured with Next.js standards ✅ Naming conventions consistent ✅ Component modularization ✅ Server/Client Components separation ✅ Complete Type Safety with Zod ✅ Database indexing on frequently queried fields

Data Management

✅ Type-Safe ORM with Prisma ✅ Schema versioning (migrations) ✅ Relational integrity (foreign keys) ✅ Cascade deletion for related records ✅ Seed script for test data

Performance

✅ Next.js image optimization ✅ Cloudinary CDN for media ✅ Integrated analytics (Vercel) ✅ Query optimization with indexes ✅ Caching strategies for static assets