A modern ecommerce application built with Next.js 14+ (App Router), React 19, TypeScript, Tailwind CSS, and Supabase.
With Next.js, the client and server folders are merged. The app/ directory handles all routing, UI (Client Components), and backend logic (Server Components, API Routes, Server Actions).
philipc/
├── app/ # Next.js App Router (handles all pages & logic)
│ ├── (auth)/ # Route group for auth pages (login, signup)
│ ├── (store)/ # Route group for main e-commerce (products, cart)
│ ├── api/ # Server-side API routes (replaces 'server' folder)
│ │ └── ...
│ ├── layout.tsx # Root layout (client-side)
│ └── page.tsx # Main homepage (server-side by default)
│
├── components/ # Reusable UI components (buttons, modals, etc.)
├── lib/ # Helper functions, Supabase clients (client & server)
├── public/ # Static assets (images, fonts)
│
├── database/ # Database files
│ ├─ schema.sql # Table definitions & RLS
│ ├─ seeds.sql # initial INSERTs
│ └─ migrations/
│
├── .env.local # Environment variables (YOU CREATE THIS)
├── .env.example # Environment template
├── .gitignore
├── package.json # Single package.json for the whole project
├── tsconfig.json
├── next.config.mjs # Next.js configuration
└── README.md # This file
- Click the Fork button at the top right of this repository
- Clone your forked repository to your local machine:
git clone https://github.com/Xenrui/philipc.git
cd philiPCWith Next.js, you only have one package.json to manage at the root of the project.
npm install- In the root
philipc/folder, you'll see a file named.env.example. - Copy it to create your actual
.env.localfile:
Windows (PowerShell):
Copy-Item .env.example .env.localWindows (CMD):
copy .env.example .env.local- Open
.env.localin your editor and replace the values.
# Public (browser-safe) variables
# These are prefixed with NEXT_PUBLIC_
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# Secret (server-side only) variables
# These have NO prefix and are NOT exposed to the browser
SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Ask the Supabase project owner for these values.
⚠️ IMPORTANT SECURITY NOTES:
- NEVER commit
.env.localfiles to Git.- Variables prefixed with
NEXT_PUBLIC_are "public" and can be seen in the browser.- Variables without the prefix (like
SUPABASE_SERVICE_KEY) are server-side only and are never exposed to the browser. This is how Next.js replaces your oldserverfolder.
You only need one terminal window.
npm run devYou should see:
✓ Ready in XXX ms
➜ Local: http://localhost:3000
Open your browser and go to:
http://localhost:3000
All variables live in .env.local at the project root.
| Variable | Description | Used On | Required |
|---|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Your Supabase project URL | Client (Browser) | ✅ Yes |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase anonymous/public key | Client (Browser) | ✅ Yes |
SUPABASE_SERVICE_KEY |
Supabase service role key (keep secret!) | Server (Next.js) | ✅ Yes |
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes following our commit convention (see below)
- Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
We follow the Conventional Commits specification for clear and structured commit messages.
<type>(<scope>): <subject>
<body>
<footer>
- feat: A new feature
feat(auth): add user login functionalityfeat(cart): implement add to cart feature
- fix: A bug fix
fix(checkout): resolve payment processing errorfix(products): correct price display formatting
- docs: Documentation only changes
docs(readme): update installation instructionsdocs(api): add endpoint documentation
- style: Changes that don't affect code meaning (formatting, missing semi-colons, etc.)
style(client): format code with prettierstyle(components): fix indentation
- refactor: Code change that neither fixes a bug nor adds a feature
refactor(api): simplify product service logicrefactor(hooks): extract custom hook for cart
- perf: Performance improvements
perf(products): optimize product list renderingperf(api): add database query caching
- test: Adding or correcting tests
test(auth): add unit tests for logintest(cart): add integration tests
- build: Changes to build system or dependencies
build(deps): upgrade react to v19build(client): update vite config
- ci: Changes to CI configuration files and scripts
ci(github): add deployment workflowci(vercel): update build settings
- chore: Other changes that don't modify src or test files
chore(git): update .gitignorechore(deps): update dependencies
# Simple feature addition
git commit -m "feat(products): add product search functionality"
# Bug fix with details
git commit -m "fix(cart): prevent duplicate items in cart
# Documentation update
git commit -m "docs(readme): add git commit convention section"- Use imperative mood in the subject line (e.g., "add" not "added" or "adds")
- Don't capitalize the first letter of the subject
- No period at the end of the subject line
- Limit subject line to 50-72 characters
- Next.js Documentation
- Supabase Documentation
- Supabase Next.js Auth Helpers
- React Documentation
- Tailwind CSS Documentation
- TypeScript Documentation
- Conventional Commits
This project is licensed under the MIT License.