ProStore

Under active development. This repository is based on a Coursera course project and is being used for learning and practice. This project currently focuses on the core storefront foundation with Next.js, Prisma, PostgreSQL, and Vercel-ready deployment. Authentication, cart, checkout, and the rest of the complete e-commerce flow are planned next.

Overview

ProStore is an e-commerce web application built with the Next.js App Router. This repository is a course-based practice project created as part of a Coursera learning path. At the moment, the project includes a working product catalog backed by Prisma and PostgreSQL, seeded sample data, dynamic product detail pages, reusable UI components, and basic theme support.

This repository is not a fully original commercial product and is not feature-complete yet. It is being used for study purposes to learn how a larger store application can be built step by step, including future additions such as authentication with NextAuth/Auth.js, cart management, checkout, user accounts, and admin features.

Learning Context

• This project is based on a Coursera course project.
• The main goal of this repository is learning, experimentation, and practice.
• Some architecture and feature decisions follow the course flow rather than a finalized production plan.
• The codebase will continue to change as new lessons and features are implemented.

Current Status

Implemented

• Next.js 16 App Router project structure
• TypeScript-based application code
• Prisma schema, migration, and database seed setup
• PostgreSQL database integration
• Neon/Vercel-friendly Prisma runtime adapter
• Home page that loads products from the database
• Dynamic product detail page by product slug
• Reusable UI components with shadcn/ui and Radix
• Tailwind CSS v4 styling
• Dark and light mode toggle with next-themes
• Global loading page
• Custom not-found page

Planned / In Progress

• Authentication with NextAuth/Auth.js
• Sign-in and sign-up flows
• Shopping cart functionality
• Checkout flow
• Order management
• User profile area
• Admin dashboard
• Search, filters, and pagination
• Payment integration
• Production hardening and testing

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Prisma 7
• PostgreSQL
• @prisma/adapter-neon
• @prisma/adapter-pg
• Tailwind CSS 4
• shadcn/ui
• Radix UI
• Zod
• Lucide React
• Vercel

Current Features

Product Catalog

The current app loads product data from PostgreSQL through Prisma and renders the latest products on the home page.

Product Details

Each product has a dynamic route at /product/[slug] that shows:

• product images
• brand and category
• rating and review count
• description
• price
• stock status

UI Foundation

The project already includes:

• shared header and footer
• dark/light mode toggle
• responsive menu
• reusable card, badge, button, dropdown, and sheet components

Routes Available Today

• / - home page with newest arrivals
• /product/[slug] - single product detail page

Notes:

• Links for /cart and /sign-in already exist in the UI, but those flows are not implemented yet.

Project Structure

app/
  (root)/
    page.tsx
    layout.tsx
    product/[slug]/page.tsx
  layout.tsx
  loading.tsx
  not-found.tsx

components/
  shared/
  ui/
  footer.tsx

db/
  prisma.ts
  sample-data.ts
  seed.ts

lib/
  actions/
  constant/
  utils.ts
  validation.ts

prisma/
  migrations/
  schema.prisma

public/
  images/

Database

The project currently contains one main model: Product.

Product Model

Field	Type	Description
id	UUID	Primary key
name	String	Product name
slug	String	Unique URL slug
category	String	Product category
images	String[]	Array of product image paths
brand	String	Product brand
description	String	Product description
stock	Int	Current stock count
price	Decimal(12,2)	Product price
rating	Decimal(3,2)	Product rating
numReviews	Int	Number of reviews
isFeatured	Boolean	Featured product flag
banner	String?	Optional banner image
CreatedAt	DateTime	Record creation timestamp

Seed Data

The repository includes sample product data in db/sample-data.ts and a seed script in db/seed.ts.

Environment Variables

Create a .env file in the project root before installing dependencies.

This matters because the project runs prisma generate during postinstall, and Prisma expects DATABASE_URL to be available.

Example:

APP_NAME=ProStore
APP_DESC=E commerce NextJS Web Application
APP_SERVER_URL=http://localhost:3000
DATABASE_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=public

Variable Reference

• APP_NAME - application name shown in the UI and metadata
• APP_DESC - application description for metadata
• APP_SERVER_URL - base URL used by Next.js metadata
• DATABASE_URL - PostgreSQL connection string

Getting Started

Prerequisites

Make sure you have:

• Node.js 20 or newer
• npm
• a PostgreSQL database

If you want the same style of serverless database setup used by the app runtime, use Neon or Vercel Postgres.

1. Clone the Repository

git clone https://github.com/prashankulathunga/ProStore.git
cd prostore

2. Create the Environment File

Add your .env file in the root directory.

3. Install Dependencies

npm install

4. Apply Prisma Migrations

npx prisma migrate dev

5. Seed the Database

npx prisma db seed

6. Start the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Prisma Workflow

Useful Prisma commands during development:

npx prisma generate
npx prisma migrate dev
npx prisma db seed
npx prisma studio

For production deployments, use:

npx prisma migrate deploy

Available Scripts

npm run dev

Starts the Next.js development server.

npm run build

Builds the app for production.

npm run start

Starts the production server after build.

npm run lint

Runs ESLint across the project.

npm run postinstall

Automatically runs prisma generate.

Vercel Deployment

This project is being built with Vercel deployment in mind.

Recommended Deployment Flow

1. Push the repository to GitHub.
2. Import the project into Vercel.
3. Add the required environment variables in Vercel:
   • APP_NAME
   • APP_DESC
   • APP_SERVER_URL
   • DATABASE_URL
4. Provision a PostgreSQL database.
5. Run Prisma migrations in production with npx prisma migrate deploy.
6. Deploy the application.

Important Vercel Notes

• Set APP_SERVER_URL to your real production domain.
• Make sure DATABASE_URL points to your production PostgreSQL instance.
• npm run build is the correct build command.
• prisma generate already runs during install because of the postinstall script.

Development Notes

Database Access

The runtime Prisma client lives in db/prisma.ts.

The project currently uses:

• @prisma/adapter-neon in the app runtime
• @prisma/adapter-pg in the seed script

Data Loading

Product queries are currently handled in lib/actions/product.actions.ts.

Validation

Zod validation for products is defined in lib/validation.ts.

Known Limitations

Because this project is still under development, a few areas are intentionally incomplete:

• authentication is not implemented yet
• cart and sign-in routes are linked in the UI but not built
• only the product model is present today
• there is no automated test suite yet
• checkout, orders, and payment flows are not started yet

Roadmap

Planned next steps for the project:

1. Add authentication with NextAuth/Auth.js
2. Build sign-in, sign-up, and protected routes
3. Implement cart state and cart pages
4. Add checkout flow and order persistence
5. Create user dashboard and order history
6. Add admin product management
7. Improve filtering, searching, and pagination
8. Add testing and deployment hardening

Acknowledgement

This repository is inspired by and follows a Coursera course project for educational purposes. It is being used to practice:

• Next.js App Router
• Prisma + PostgreSQL
• TypeScript
• Tailwind CSS
• shadcn/ui

Contributing

The project is still evolving as part of the learning process, so structure and features may change frequently. If you contribute, keep changes aligned with the current stack and current learning direction.

Summary

ProStore is a Coursera-based learning project that currently provides a database-backed product catalog with Prisma and PostgreSQL, prepared for local development and Vercel deployment. The next major milestone is authentication, followed by the rest of the e-commerce workflow as the course project continues.