MEVN Stack Web Store

A modern e-commerce platform built with MongoDB, Express, Vue.js, and Node.js (MEVN stack), fully written in TypeScript.

🚀 Features

• Full TypeScript Support: End-to-end type safety across frontend and backend
• Vue.js 3: Utilizing the Composition API and Pinia for state management
• MongoDB: Scalable NoSQL database with Mongoose ODM
• Express.js: Fast, unopinionated backend framework
• Responsive Design: Mobile-first approach with Tailwind CSS
• Docker Support: Containerized deployment for consistent environments
• CI/CD Pipeline: Automated deployment with GitHub Actions

📋 Prerequisites

• Node.js (v16+)
• MongoDB Atlas account (or local MongoDB instance)
• Docker and Docker Compose (for containerized deployment)

🛠️ Installation

Local Development

1. Clone the repository:

   git clone https://github.com/Owlferid/MEVN-Stack-Web-Store.git
   cd MEVN-Stack-Web-Store

2. Install dependencies:

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

3. Set up environment variables:

   • Create .env files in both backend/ and frontend/ directories
   • See .env.example files for required variables

4. Start development servers:

   # Start backend server
   cd backend
   npm run dev
   
   # Start frontend server (in a new terminal)
   cd frontend
   npm run dev

Docker Deployment

1. Make sure Docker and Docker Compose are installed
2. Run:

   docker-compose up -d

🏗️ Project Structure

MEVN-Stack-Web-Store/
├── backend/                  # Express.js backend
│   ├── src/
│   │   ├── config/           # Configuration files
│   │   ├── features/         # Feature modules
│   │   ├── middleware/       # Custom middleware
│   │   ├── app.ts            # Express app setup
│   │   └── server.ts         # Server entry point
│   ├── .env                  # Backend environment variables
│   └── package.json
├── frontend/                 # Vue.js frontend
│   ├── public/               # Static assets
│   ├── src/
│   │   ├── assets/           # Frontend assets
│   │   ├── components/       # Vue components
│   │   ├── router/           # Vue Router
│   │   ├── services/         # API services
│   │   ├── stores/           # Pinia stores
│   │   ├── types/            # TypeScript types
│   │   ├── views/            # Vue views
│   │   ├── App.vue           # Root component
│   │   └── main.ts           # Entry point
│   ├── .env                  # Frontend environment variables
│   └── package.json
├── docker-compose.yml        # Docker Compose configuration
├── .github/                  # GitHub Actions workflows
└── README.md                 # Project documentation

🚢 Deployment

This project is configured for automated deployment to a Hetzner server using GitHub Actions:

1. Push changes to the main branch
2. GitHub Actions workflow will:
   • Build the application
   • Deploy to the server
   • Start Docker containers

🧪 Testing

# Run backend tests
cd backend
npm test

# Run frontend tests
cd frontend
npm test

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.