A full-stack marketplace for buying and selling pre-owned items. Built as a portfolio project demonstrating modern web development practices.
Live Demo: marketplace-clean-six.vercel.app
- Framework: Next.js 16 (App Router, Server Components)
- API: tRPC v11 + Zod (type-safe API layer)
- ORM: Prisma 6 + PostgreSQL
- Auth: NextAuth v5 (Auth.js) — Credentials + Google OAuth
- UI: MUI v7 + Tailwind CSS v4
- Forms: React Hook Form + Zod validation
- Payments: Stripe Checkout
- Email: Resend (transactional notifications)
- i18n: next-intl (English + Russian)
- Testing: Vitest + React Testing Library + Playwright (E2E)
- Browse, search, and filter listings by category, condition, and price
- User authentication (email/password + Google OAuth)
- Create, edit, and delete listings
- Add listings to favorites
- Stripe Checkout integration for payments
- Order management with status tracking (Pending > Paid > Shipped > Delivered)
- Leave reviews and ratings on listings
- Email notifications for purchases and registration
- Full internationalization (EN/RU)
- Responsive design
src/
├── app/ # Next.js App Router pages
│ ├── [locale]/ # i18n routing (en, ru)
│ │ ├── auth/ # Login & Register
│ │ ├── listings/ # Browse, Detail, Create
│ │ ├── profile/ # Profile, Orders, My Listings
│ │ └── checkout/ # Payment success
│ └── api/ # API routes (tRPC, Auth, Stripe webhook)
├── server/ # Backend logic
│ ├── trpc/ # tRPC routers (listing, user, order, review, stripe)
│ ├── auth/ # NextAuth configuration
│ └── services/ # Stripe, Resend, Upload services
├── components/ # React components
│ ├── layout/ # Header, Footer
│ ├── listing/ # ListingCard, Grid, Filters, Form
│ └── shared/ # SearchBar, Pagination
├── hooks/ # Custom hooks (useDebounce, useFilters)
├── lib/ # Client configs (Prisma, Stripe, tRPC, Resend)
├── messages/ # i18n translations (en.json, ru.json)
└── styles/ # Global CSS
- Node.js 18+
- PostgreSQL (local or Neon free tier)
- Stripe account (for payments)
- Resend account (for emails)
- Google OAuth credentials (optional)
- Clone the repository:
git clone https://github.com/Imolatte/marketplace.git
cd marketplace- Install dependencies:
yarn install- Set up environment variables:
cp .env.example .env
# Edit .env with your actual values- Set up the database:
yarn db:push
yarn db:seed- Start the dev server:
yarn devAfter seeding, you can log in with:
- Email: alice@example.com / Password: password123
- Email: bob@example.com / Password: password123
| Command | Description |
|---|---|
yarn dev |
Start development server |
yarn build |
Production build |
yarn test |
Run unit/integration tests |
yarn test:e2e |
Run Playwright E2E tests |
yarn lint |
Run ESLint |
yarn db:push |
Push schema to database |
yarn db:seed |
Seed demo data |
yarn db:studio |
Open Prisma Studio |
- Unit tests: 27 tests covering tRPC routers, services, and UI components
- E2E tests: Playwright tests for auth, listings, and checkout flows
yarn test # Unit tests (Vitest)
yarn test:e2e # E2E tests (Playwright)Type-safe API with automatic TypeScript inference from server to client:
listing— CRUD, search with filters, cursor paginationuser— Profile, registration, favoritesorder— Purchase tracking, status managementreview— Ratings and commentsstripe— Checkout session creation
NextAuth v5 with JWT sessions:
- Credentials provider (email/password with bcrypt)
- Google OAuth provider
- Prisma adapter for user storage
Stripe Checkout Sessions with webhook handling:
- Order created on checkout initiation
- Webhook confirms payment and updates order/listing status
- Email notifications sent to buyer and seller
Deployed on Vercel with Neon PostgreSQL.
Required environment variables for production:
DATABASE_URL— Neon PostgreSQL connection stringNEXTAUTH_SECRET— random secret (openssl rand -base64 32)NEXTAUTH_URL— your deployed URLNEXT_PUBLIC_APP_URL— your deployed URL
MIT