Nuxt Shop - E-commerce Platform

Modern e-commerce web application built with Nuxt 4, TypeScript, and PostgreSQL.

Features

• 🛍️ Product catalog with categories and filtering
• 🛒 Shopping cart functionality
• 👤 User authentication and authorization
• 📦 Order management system
• 💳 Payment integration (ЮKassa, Сбербанк)
• 🚚 Delivery integration (СДЭК, Почта России)
• ⭐ Product reviews and ratings
• ❤️ Wishlist functionality
• 🔐 Admin panel for store management
• 📱 Responsive design
• 🎨 Modern UI with Tailwind CSS

Tech Stack

Frontend

• Nuxt 4 - Vue.js framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Pinia - State management
• Vee-Validate + Zod - Form validation

Backend

• Nitro - Server engine
• Prisma - Database ORM
• PostgreSQL - Database
• nuxt-auth-utils - Authentication
• bcrypt - Password hashing

Integrations

• ЮKassa - Payment gateway
• Sberbank - Payment gateway
• СДЭК - Delivery service
• Почта России - Delivery service

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL 14+
• npm or yarn

Installation

1. Clone the repository: ```bash git clone cd nuxt-shop ```

2. Install dependencies: ```bash npm install ```

3. Set up environment variables: ```bash cp .env.example .env ```

Edit

and configure your database and API keys.

4. Set up the database: ```bash

Generate Prisma client

npm run db:generate

Run migrations

npm run db:migrate

Seed the database (optional)

npm run db:seed ```

5. Start the development server: ```bash npm run dev ```

The application will be available at

Project Structure

``` nuxt-shop/ ├── assets/ # Uncompiled assets (CSS, images) ├── components/ # Vue components │ ├── ui/ # Reusable UI components │ ├── product/ # Product-related components │ ├── cart/ # Cart components │ ├── checkout/ # Checkout components │ ├── layout/ # Layout components │ └── admin/ # Admin panel components ├── composables/ # Vue composables ├── layouts/ # Nuxt layouts ├── middleware/ # Route middleware ├── pages/ # File-based routing │ ├── index.vue # Homepage │ ├── products/ # Product pages │ ├── cart.vue # Shopping cart │ ├── checkout/ # Checkout flow │ ├── account/ # User account │ ├── admin/ # Admin panel │ └── auth/ # Authentication pages ├── prisma/ # Prisma schema and migrations ├── public/ # Static files ├── server/ # Nuxt server │ ├── api/ # API routes │ ├── middleware/ # Server middleware │ └── utils/ # Server utilities ├── stores/ # Pinia stores ├── types/ # TypeScript types └── utils/ # Client utilities ```

Available Scripts

• npm run dev
  - Start development server
• npm run build
  - Build for production
• npm run preview
  - Preview production build
• npm run lint
  - Lint code
• npm run typecheck
  - Type check
• npm run db:generate
  - Generate Prisma client
• npm run db:migrate
  - Run database migrations
• npm run db:push
  - Push schema changes to database
• npm run db:seed
  - Seed database with sample data
• npm run db:studio
  - Open Prisma Studio

Database Schema

The application uses PostgreSQL with the following main entities:

• User - User accounts with roles (CUSTOMER, MANAGER, ADMIN)
• Product - Products with variants, pricing, and inventory
• Category - Hierarchical product categories
• Order - Customer orders with items and status tracking
• CartItem - Shopping cart items
• Review - Product reviews and ratings
• WishlistItem - User wishlist items
• Address - Shipping and billing addresses
• Payment - Payment transactions

See

for the complete schema.

API Endpoints

Authentication

• POST /api/auth/register
  - User registration
• POST /api/auth/login
  - User login
• POST /api/auth/logout
  - User logout
• GET /api/auth/me
  - Get current user

Products

• GET /api/products
  - List products
• GET /api/products/:id
  - Get product details
• POST /api/products
  - Create product (admin)
• PUT /api/products/:id
  - Update product (admin)
• DELETE /api/products/:id
  - Delete product (admin)

Cart

• GET /api/cart
  - Get user cart
• POST /api/cart/add
  - Add item to cart
• PUT /api/cart/:id
  - Update cart item
• DELETE /api/cart/:id
  - Remove cart item
• DELETE /api/cart/clear
  - Clear cart

Orders

• GET /api/orders
  - List user orders
• GET /api/orders/:id
  - Get order details
• POST /api/orders
  - Create order

See

for complete API documentation.

Environment Variables

Required environment variables:

```env

Database

DATABASE_URL=postgresql://user:password@localhost:5432/nuxt_shop

Auth

AUTH_SECRET=your-secret-key-min-32-characters-long

Payment

YUKASSA_SHOP_ID=your-shop-id YUKASSA_SECRET_KEY=your-secret-key SBERBANK_USERNAME=your-username SBERBANK_PASSWORD=your-password

Delivery

CDEK_CLIENT_ID=your-client-id CDEK_CLIENT_SECRET=your-client-secret POCHTA_TOKEN=your-token

Email

RESEND_API_KEY=your-api-key

Storage

CLOUDINARY_CLOUD_NAME=your-cloud-name CLOUDINARY_API_KEY=your-api-key CLOUDINARY_API_SECRET=your-api-secret

App

APP_URL=http://localhost:3000 ```

Deployment

Production Build

```bash npm run build ```

Deploy to Vercel

```bash vercel ```

Deploy to Other Platforms

The application can be deployed to any platform that supports Node.js:

• Netlify
• DigitalOcean
• AWS
• Heroku
• Railway

Make sure to:

1. Set all environment variables
2. Run database migrations:
   npm run db:migrate:deploy
3. Build the application:
   npm run build

Development Workflow

1. Create a new branch for your feature
2. Make your changes
3. Run linting and type checking
4. Test your changes
5. Create a pull request

Security

• Passwords are hashed using bcrypt
• Session-based authentication with HTTP-only cookies
• CSRF protection enabled
• Input validation using Zod schemas
• SQL injection prevention via Prisma ORM
• XSS protection via Vue's automatic escaping

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the MIT License.

Support

For support, email info@nuxtshop.com or create an issue in the repository.

Roadmap

See

for planned features and future enhancements.