DevShop 🛍️

Devshop is an online electric gadgets shopping website built with MERN stack.

Table of Contents

• Tech Stack 🛠️
• Features 🚀
• Running Locally 🧪
  • Prerequisites
  • Steps

Tech Stack 🛠️

• Frontend: React, Redux, TailwindCSS, shadcn/ui
• Backend: Node.js, Express.js
• Databases: MongoDB
• Payment: Stripe
• Search engine: Elasticsearch
• Meida API: Cloudinary
• Deployment: AWS EC2, GitHub Actions, Vercel

Features 🚀

• Elasticsearch for fast product search
• Node.js REST API with service-oriented architecture.
• OAuth 2.0 for secure authorization
• Support for products with diverse variations
• Stripe for secure payment
• React lazy loading to optimize performance
• Cloudinary for media management
• Automated CI/CD deployments with GitHub Actions

Running Locally 🧪

Prerequisites

• Node.js
• Docker (includes Docker Compose)
• Google OAuth 2.0 credentials (Client ID)
• Stripe (Publishable and Secret Keys)
• Cloudinary (Name, API Key and API Secret)

Steps

Step 1: Clone the Repository

Clone the DevShop repository to your local machine: bash Copy code

git clone https://github.com/devltt404/devshop
cd devshop

Step 2: Set Up the Client (Front-End)

1. Navigate to the client folder:

   cd client

2. Install Dependencies

   npm i

3. Setup env variables

   Copy the .env.development.example to .env.development.

   cp .env.development.example .env.development

Important

You must provide values for VITE_STRIPE_PK and VITE_GOOGLE_CLIENT_ID

Step 3: Set Up the Server (Back-End)

1. Navigate to the server folder:

   cd ../server

2. Install client dependencies

   npm i

3. Setup env variables

   Copy the .env.development.example to .env.development and update the variables.

   cp .env.development.example .env.development

Important

You must provide values for CLOUDINARY_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET, STRIPE_PK (publishable key) and STRIPE_SK (secret key)

Step 4: Set Up the Services with Docker Compose

We use Docker Compose to set up and run MongoDB, Elasticsearch and Kibana services locally.

1. Start services

   docker-compose -f docker-compose.local.yml up -d

2. Verify running Containers

   docker ps

You should see the following services listed:

• mongodb on port 27018
• elasticsearch on port 9200
• kibana on port 5601

Step 5: Set up Data

Import sample data to MongoDB and elasticsearch

npm run setup

Last Step: Run the Server

npm run dev

Access the website through your browser at: http://localhost:5173