Ecorm WebApp

A full-stack ecommerce web app for browsing products, managing carts, and handling online shopping workflows.

Overview

Ecorm WebApp is a portfolio ecommerce project built to demonstrate practical full-stack web development. It shows how an online store can present products, support customer shopping flows, manage product data, and provide a clean responsive user experience.

This is a cleaned public portfolio version of a private project. The original development project is private, but this version is prepared to demonstrate the app structure, features, UI, and implementation approach.

Features

• Product listing and product detail pages
• Category browsing
• Shopping cart workflow
• Checkout-ready Stripe payment flow
• Responsive ecommerce UI
• Search with Algolia support and database fallback
• Product, category, order, coupon, and user admin API structure
• Clerk authentication support
• Customer account, order history, and order tracking pages
• Product media upload/service structure with Cloudinary support
• Form validation, loading states, and error handling
• Prisma data model, migrations, and demo seed data

Tech Stack

• Next.js / React
• TypeScript
• Tailwind CSS
• Node.js API routes
• Prisma ORM with PostgreSQL
• Clerk authentication
• Stripe payments
• Algolia search
• Resend email
• Cloudinary media storage
• Upstash Redis rate limiting
• Sentry monitoring
• Vitest and Playwright tests
• GitHub and Vercel deployment workflow

Screenshots

Screenshots should be placed in:

public/screenshots

Expected screenshots:

home.png
products.png
cart.png
checkout.png

Home

Products

Cart

Checkout

What This Project Proves

This project shows my ability to build ecommerce interfaces and full-stack shopping workflows, including product displays, cart logic, responsive UI, reusable components, routing, forms, validation, admin API structure, payment integration, database modeling, and clean project organization.

Getting Started

pnpm install
pnpm run dev

Open:

http://localhost:3000

Environment Variables

See .env.example for required environment variables. Use placeholder/demo credentials only for local portfolio setup, and never commit real .env files.

Useful Scripts

pnpm run build
pnpm run lint
pnpm run typecheck
pnpm run test:unit

Deployment Notes

This project is structured for deployment on Vercel. Configure the environment variables from .env.example, connect a PostgreSQL database, and run Prisma migrations before using production-like workflows.

Status

Portfolio demo project for full-stack freelance work, ecommerce UI development, frontend gigs, and coding evaluation applications.