A modern e-commerce platform built with Next.js 14, featuring server-side rendering, real-time updates, and a seamless shopping experience.
- Features
- Tech Stack
- Getting Started
- Environment Variables
- Project Structure
- API Integration
- Docker Support
- Contributing
| Feature | Description |
|---|---|
| Authentication | Secure user authentication with JWT |
| Multi-vendor | Support for multiple shops and vendors |
| Dark Mode | Built-in dark/light theme support |
| Cart Management | Real-time cart updates and management |
| Search & Filter | Advanced product search and filtering |
| Responsive Design | Mobile-first responsive layout |
| Server Actions | Next.js 14 server actions integration |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 14.1.0 | Frontend Framework |
| React | 18.x | UI Library |
| TypeScript | 5.x | Type Safety |
| Tailwind CSS | 3.x | Styling |
| Redux Toolkit | 2.x | State Management |
| PM2 | Latest | Process Management |
# Required
Node.js >= 18.x
npm >= 9.x
Docker >= 20.x# Clone the repository
git clone https://github.com/iemafzalhassan/easyshop.git
# Navigate to the project directory
cd easyshop
# Install dependencies
npm install
# Run development server
npm run dev
# Run JSON server (in separate terminal)
npm run server# Pull the image
docker pull iemafzal/easyshop:v1.0
# Create network
docker network create easyshop-network
# Run container
docker run -d \
--name easyshop \
--network easyshop-network \
-p 3000:3000 \
-e NODE_ENV=production \
-e NEXT_PUBLIC_API_URL=http://api:8000 \
--restart unless-stopped \
iemafzal/easyshop:v1.0
# Using docker-compose
docker-compose up -dCreate a .env file in the root directory:
NODE_ENV=development
NEXT_PUBLIC_API_URL=http://localhost:8000| Variable | Description | Required |
|---|---|---|
NODE_ENV |
Environment mode | Yes |
NEXT_PUBLIC_API_URL |
Backend API URL | Yes |
easyshop-frontend/
├── src/
│ ├── app/ # Next.js app router
│ │ ├── (auth)/ # Auth group routes
│ │ ├── products/ # Product routes
│ │ └── shops/ # Shop routes
│ ├── components/ # React components
│ ├── lib/ # Utilities & store
│ └── types/ # TypeScript types
└── public/ # Static assets
The project uses server actions for API integration:
// Example server action
export async function authenticated() {
const token = await getCookies("token");
return !!token;
}| Command | Description |
|---|---|
docker build |
Build the image |
docker-compose up |
Start all services |
docker-compose down |
Stop all services |
docker logs |
View container logs |
# Build image
docker build -t easyshop-frontend:latest .
# Tag image
docker tag easyshop-frontend:latest iemafzal/easyshop:v1.0
# Push to Docker Hub
docker push iemafzal/easyshop:v1.0- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
Md. Afzal Hassan Ehsani - @iemafzalhassan
Project Link: https://github.com/iemafzalhassan/easyshop