A modern, full-stack ecommerce platform for pet supplies built with Next.js 14, Prisma, and Redux. Features include user authentication, shopping cart functionality, and secure payments via Stripe.
- 🛍️ Full ecommerce functionality
- 🔐 Authentication with NextAuth.js (including Google OAuth)
- 💳 Secure payment processing with Stripe
- 🛒 Shopping cart with Redux persistence
- 📱 Responsive design with Tailwind CSS
- 🎨 Modern UI components with Radix UI
- 🔍 Type-safe with TypeScript
- 🗃️ PostgreSQL database with Prisma ORM
- Clone the repository:
git clone https://github.com/yourusername/petshop-ecommerce.git
cd petshop-ecommerce- Create a
.envfile in the root directory:
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/petshop?schema=public"
# Auth
AUTH_SECRET="your-auth-secret-key"
NEXTAUTH_URL="http://localhost:3000"
# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
# Stripe
STRIPE_SECRET_KEY="your-stripe-secret-key"
STRIPE_WEBHOOK_SECRET="your-stripe-webhook-secret"- Configure the database in
docker-compose.yaml:
version: '3.8'
services:
postgres:
image: postgres:latest
environment:
POSTGRES_USER: your_username
POSTGRES_PASSWORD: your_password
POSTGRES_DB: petshop
ports:
- '5432:5432'
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:- Start the PostgreSQL database:
docker-compose up -d- Install dependencies:
npm install
# or
yarn install- Run Prisma migrations:
npx prisma migrate dev- Seed the database (optional):
npx prisma db seed- Start the development server:
npm run dev
# or
yarn devVisit http://localhost:3000 to see your application running! 🎉
petshop/
├── .next/ # Next.js build output
├── node_modules/ # Project dependencies
├── postgresql/ # Database container data
├── prisma/ # Database schema and migrations
├── public/ # Static assets and images
├── src/ # Source code
│ ├── app/ # Next.js app router components and pages
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and shared logic
│ ├── mocks/ # Mock data and testing utilities
│ ├── store/ # Redux store configuration
│ ├── types/ # TypeScript type definitions
│ ├── routes.ts # Routes in app
│ ├── middleware.ts # Next.js middleware configuration
│ └── auth.ts # Authentication configuration
├── .env # Environment variables
├── docker-compose.yaml # Docker configuration
├── next.config.js # Next.js configuration
├── package.json # Project dependencies and scripts
├── postcss.config.js # PostCSS configuration
├── README.md # Project documentation
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
.next/: Contains the built production codeprisma/: Houses the database schema, migrations, and seed datasrc/: Main source code directorytypes/: TypeScript type definitionsapp/: Frontend pages and components using Next.js App Routerhooks/: Reusable React hookslib/: Shared utilities and helper functionsmocks/: Testing utilities and mock datastore/: Redux store setup, slices, and actions
-
Frontend
- Next.js 14
- React
- Redux Toolkit
- Tailwind CSS
- Radix UI Components
- React Hook Form
-
Backend
- Next.js API Routes and Server Actions
- Prisma ORM
- PostgreSQL
- Auth.js v5
- Stripe API
# Development server
npm run dev
# Build for production
npm run build
# Production server
npm start
# Lint code
npm run lint# Generate Prisma client
npx prisma generate
# Open Prisma Studio
npx prisma studio
# Run migrations
npx prisma migrate devThis project is open source and free.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Give a ⭐️ if this project helped you!
Camilo Ordonez Herrera - @92iMAHC - cronox20@gmail.com
Project Link: https://store.caoh29.dev