NuxtShop eCommerce Platform

Inspired by Traversy Media's ProShop v2 course, rebuilt fully with Nuxt 3.

Features

• Full featured shopping cart
• Product reviews and ratings
• Top products carousel
• Product pagination
• Product search feature
• User profile with orders
• Admin product management
• Admin user management
• Admin Order details page
• Mark orders as delivered option
• Checkout process (shipping, payment method, etc.)
• Stripe payment integration

Built with

• Nuxt 3
• MongoDB
• Pinia
• Bootstrap 5
• Cloudinary
• Lucia Auth
• Stripe

Setup

1. Clone the repository.

   git clone https://github.com/atalek/nuxtshop.git
   

2. Navigate to the project directory.

   cd nuxtshop
   

3. Install dependencies.

   npm install
   

4. Configure environment variables.

   • Create a .env file in the root of the project.
   • Add the necessary environment variables.

   # Mongodb
   MONGODB_URI=your_mongodb_uri
   
   # Stripe
   STRIPE_PUBLIC_KEY=your_stripe_public_key
   STRIPE_SECRET_KEY=your_stripe_secret_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   
   
   # Cloudinary
   CLOUDINARY=your_cloudinary_base_url
   CLOUDINARY_NAME=your_cloud_name
   CLOUDINARY_FOLDER=your_cloudinary_folder
   
   # NODE_ENV
   NODE_ENV=development
   
    # BASE_URL
   BASE_URL = 'http://localhost:3000' for development
   

5. Run the development server.

   npm run dev
   

6. Open your browser and visit http://localhost:3000 to view the eCommerce webapp.

Live Version

https://nuxtshop.atalek.com/

Author

Github @atalek
Linkedin: @Aleksandar Atanasovski
Portfolio: https://www.atalek.com/