|
1 | | -# FSD_project |
| 1 | +# NexusTech E-Commerce Platform |
| 2 | + |
| 3 | +A modern, full-stack e-commerce application built with a React frontend and an Express/SQLite backend. It features a professional "shining blue and white" UI theme, product listing, cart management, and checkout simulation. |
| 4 | + |
| 5 | +## 🚀 Tech Stack |
| 6 | + |
| 7 | +### Frontend |
| 8 | +- **React 19** & **Vite** for fast development and optimized builds |
| 9 | +- **Lucide React** for beautiful icons |
| 10 | +- **React Hot Toast** for seamless notifications |
| 11 | +- **Jest & React Testing Library** for component testing |
| 12 | +- **Nginx** for production static asset serving and API proxying |
| 13 | + |
| 14 | +### Backend |
| 15 | +- **Node.js** & **Express** for the REST API |
| 16 | +- **Better-SQLite3** for lightweight, robust data storage |
| 17 | +- **Jest & Supertest** for API endpoint testing |
| 18 | +- **PM2** for production process management |
| 19 | + |
| 20 | +### DevOps & Deployment |
| 21 | +- **Docker & Docker Compose** for containerized local development and deployment |
| 22 | +- **GitHub Actions** CI/CD pipeline (Linting, Testing, Building, Docker Image validation) |
| 23 | +- Production-ready configurations tailored for **Render** deployments |
| 24 | + |
| 25 | +## 📦 Project Structure |
| 26 | + |
| 27 | +```text |
| 28 | +FSD_project/ |
| 29 | +├── frontend/ # React application (Vite, CSS Modules, Nginx config) |
| 30 | +├── backend/ # Express API (SQLite DB, PM2 config) |
| 31 | +├── .github/ # GitHub Actions CI/CD workflows |
| 32 | +└── docker-compose.yml |
| 33 | +``` |
| 34 | + |
| 35 | +## 🛠️ Running Locally (Without Docker) |
| 36 | + |
| 37 | +### 1. Start the Backend |
| 38 | +```bash |
| 39 | +cd backend |
| 40 | +npm install |
| 41 | +npm run dev |
| 42 | +``` |
| 43 | +The backend API will run on `http://localhost:3002` (or the port specified in your environment) and automatically seed the SQLite database on the first run. |
| 44 | + |
| 45 | +### 2. Start the Frontend |
| 46 | +```bash |
| 47 | +cd frontend |
| 48 | +npm install |
| 49 | +npm run dev |
| 50 | +``` |
| 51 | +The React app will be available at `http://localhost:5173`. |
| 52 | + |
| 53 | +## 🐳 Running with Docker |
| 54 | + |
| 55 | +To run the entire full-stack application using Docker Compose: |
| 56 | + |
| 57 | +```bash |
| 58 | +docker-compose up --build |
| 59 | +``` |
| 60 | + |
| 61 | +- **Frontend:** `http://localhost:8080` |
| 62 | +- **Backend API:** internally proxied and running on port 80 |
| 63 | + |
| 64 | +## 🧪 Testing |
| 65 | + |
| 66 | +Both the frontend and backend feature comprehensive test suites. |
| 67 | + |
| 68 | +**Frontend Tests:** |
| 69 | +```bash |
| 70 | +cd frontend |
| 71 | +npm test |
| 72 | +``` |
| 73 | + |
| 74 | +**Backend Tests:** |
| 75 | +```bash |
| 76 | +cd backend |
| 77 | +npm test |
| 78 | +``` |
| 79 | + |
| 80 | +## ☁️ Deployment (Render) |
| 81 | + |
| 82 | +This application is configured for easy deployment on [Render](https://render.com/). |
| 83 | + |
| 84 | +1. **Backend (Web Service):** Point Render to the `backend/` directory. The included `Dockerfile` uses PM2 (`pm2-runtime`) and exposes port 80. |
| 85 | +2. **Frontend (Static Site / Web Service):** Point Render to the `frontend/` directory. You can use the included `Dockerfile` (which utilizes Nginx) to serve the built static assets and proxy API requests. |
0 commit comments