🍰 Next.js e-Commerce Cake Shop

A modern e-commerce web application built with Next.js, TypeScript, Redux Toolkit, Prisma, and Tailwind CSS. The app allows users to browse cakes, view detailed product pages, and interact with a fully functional backend powered by Next.js App Router API routes. An admin section enables cake management and email handling, making the project a complete full-stack showcase.

The project was built with a strong focus on clean architecture, scalability, and real-world patterns commonly used in production-grade React and Next.js applications.

🌐 Live Demo:

👉 https://torteodpapira.vercel.app/

---

Demo / Screenshot

---

Technologies Used

• Next.js (App Router) – Full-stack React framework
• TypeScript – Type-safe development
• Redux Toolkit – Global state management
• Prisma – Type-safe ORM
• SQLite / PostgreSQL – Database (via Prisma)
• Tailwind CSS – Utility-first styling
• Next.js API Routes – Backend logic
• Jest – Unit testing
• React Testing Library – Component testing

---

Features

🛍️ User Features

• Browse a list of cakes with sorting options
• View detailed cake pages
• Responsive layout optimized for mobile and desktop
• Smooth UI interactions with reusable components
• Infinite scroll support for scalable product lists

---

🛠️ Admin Features

• Admin API routes for managing cakes
• Create, update, and delete cakes
• Dynamic routes for individual cake management
• File upload handling for cake images
• Cookie-based utilities for server-side logic
• Email handling via a dedicated mailer API route

---

🧠 Technical Highlights

• Clean separation of concerns (UI, state, API, utilities)
• Redux slices structured by domain
• Fully typed API responses
• Reusable UI components (Modal, Overlay, Spinner, etc.)
• Custom hooks for shared behavior
• Test coverage for reducers, utilities, and components

---

Folder Structure

.
├── __tests__
│   ├── components
│   │   ├── Modal.test.tsx
│   │   └── Sort.test.tsx
│   ├── slices
│   │   ├── cakeDataSlice.test.ts
│   │   └── modalSlice.test.ts
│   ├── utils
│   │   ├── formatDateBS.test.ts
│   │   └── sortCakes.test.ts
│   └── mockCakes.ts
├── app
│   ├── about
│   │   └── page.tsx
│   ├── api
│   │   ├── admin
│   │   │   └── route.ts
│   │   ├── cakes
│   │   │   ├── [id]
│   │   │   │   └── route.ts
│   │   │   ├── utils
│   │   │   │   ├── cookies.ts
│   │   │   │   └── fileupload.ts
│   │   │   └── route.ts
│   │   └── mailer
│   │       └── route.ts
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── Card
│   │   └── Card.tsx
│   ├── Footer
│   │   └── Footer.tsx
│   ├── Form
│   │   └── Form.tsx
│   ├── Header
│   │   └── Header.tsx
│   ├── Modal
│   │   └── Modal.tsx
│   ├── Overlay
│   │   └── Overlay.tsx
│   ├── Sort
│   │   └── Sort.tsx
│   └── Spinner
│       └── Spinner.tsx
├── prisma
│   ├── dev.db
│   ├── prisma.ts
│   └── schema.prisma
├── redux
│   ├── api
│   │   ├── adminApi.ts
│   │   ├── cakeApi.ts
│   │   └── mailerApi.ts
│   ├── slices
│   │   ├── authSlice.ts
│   │   ├── cakeDataSlice.ts
│   │   └── modalSlice.ts
│   ├── ReduxProvider.tsx
│   └── store.ts
├── styles
│   └── globals.css
├── utils
│   ├── formatDate.ts
│   ├── reviews.ts
│   ├── sortCakes.ts
│   └── useInfiniteScroll.ts
├── README.md
├── jest.config.ts
├── jest.setup.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── prisma.config.ts
├── structure.txt
├── tailwind.config.ts
├── talwind.config.ts
└── tsconfig.json

---

Quick Start

Clone & Install

git clone https://github.com/agaribovic/cake-shop.git
cd cake-shop
npm install

---

Environment Variables

Create a .env file in the root directory and configure the following:

- NEXT_PUBLIC_BASE_URL
- DATABASE_URL
- SUPABASE_URL
- SUPABASE_SERVICE_ROLE_KEY
- SUPABASE_BUCKET
- JWT_SECRET
- ADMIN_EMAIL
- ADMIN_PASSWORD_HASH
- EMAIL_TO
- RESEND_API_KEY

---

Prisma Setup

Run Prisma migrations and generate the client:

npx prisma migrate dev
npx prisma generate

---

Development

Start the development server:

npm run dev

• App runs at: http://localhost:3000
• Uses Next.js App Router
• API routes are available under bash/api

---

Testing

Run unit and component tests:

npm run test

• Uses Jest
• Includes tests for Redux slices, utilities, and UI components

---

Build for Production

npm run build
npm run start

• Optimized production build
• Server-side rendering and API routes enabled

---

Project Goals

This project was built to:

• Demonstrate full-stack Next.js skills
• Apply React and Next.js patterns
• Showcase Redux Toolkit best practices
• Use Prisma in a real application context
• Build maintainable, scalable, and testable code

---

Future Improvements

• Enhance security and session management with JWT/cookies
• Implement a full-featured cart and smooth checkout experience
• Allow users to view and track past orders with detailed information
• Add advanced management for cakes, orders, users, and analytics
• Support Stripe/PayPal or other payment gateways
• Track orders from placement to delivery in real time
• Visualize sales, popular items, and user activity with charts
• Provide real-time messaging between customers and admins
• Optimize media delivery using Next.js Image component
• Implement critical flow tests with Playwright or Cypress

---