A modern, full-stack e-commerce application built with Next.js 13, Sanity CMS, Stripe, and Tailwind CSS.
- Framework: Next.js 13 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui & Radix UI
- CMS: Sanity
- Payments: Stripe
- Cart: use-shopping-cart
- Icons: Lucide React
- Product catalog with filtering by category, size, and color
- Product search
- Sorting by price and date
- Shopping cart with Stripe checkout integration
- Dark mode support
- Responsive design
- Sanity Studio for content management
- Node.js 16+
- npm or yarn
- A Sanity project
- A Stripe account
- Clone the repository:
git clone [email protected]:vitorschelb/ecommerce-app.git
cd ecommerce-app- Install dependencies:
npm install- Set up environment variables:
Create a .env.local file in the root of the project with the following variables:
NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_API_VERSION=2023-05-12
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_your_stripe_public_key- Run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
The Sanity Studio is available at http://localhost:3000/studio.
| Script | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the application for production |
npm run start |
Start the production server |
npm run lint |
Run ESLint |
npm run lint:fix |
Fix ESLint issues |
npm run preview |
Build and start the production server locally |
npm run typecheck |
Run TypeScript type checking |
npm run format:write |
Format code with Prettier |
npm run format:check |
Check code formatting |
.
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── cart/ # Cart page
│ ├── products/ # Product detail page
│ ├── studio/ # Sanity Studio
│ ├── success/ # Checkout success page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
├── config/ # Configuration files
├── lib/ # Utility functions & Stripe setup
├── sanity/ # Sanity configuration & schema
├── styles/ # Global styles
├── public/ # Static assets
└── screenshots/ # Project screenshots
This project is private.