GStore is a dynamic, responsive ecommerce platform designed to offer a seamless shopping experience for users. It includes a variety of features for both customers and administrators, such as product browsing, cart management, order checkout, and an integrated map for location tracking.
This project leverages modern web technologies like React, Next.js, Tailwind CSS, Node.js, and Express.js to create a full-stack solution for an engaging shopping experience.
- Responsive Design: Optimized for mobile and desktop views, ensuring a great experience on any device.
- Cart System: Users can add, remove, and update items in the cart with ease.
- Checkout Process: Simplified checkout process for users to complete their purchases.
- Product Search and Filter: Users can browse and search for products, filtering by categories.
- Social Media Integration: Quick access to social media platforms like LinkedIn, GitHub, Instagram, and Facebook.
- Location Map: Built-in map feature showing store locations using dynamic content.
- Dynamic Content: Automatic updates for product inventory and order statuses.
- Backend API: A Node.js and Express.js backend to handle cart management, user authentication, and orders.
- Frontend: React, Next.js, Tailwind CSS, TypeScript
- Backend: Node.js, Express.js
- Database: MongoDB (for storing user, product, and order data)
- State Management: React Context API
- Libraries:
- React Router for client-side routing
- Framer Motion for animation effects
- Dynamic Map using a custom Map component
- Version Control: Git, GitHub
- Deployment: Netlify (Frontend), Heroku (Backend)
-
Navigate to the
backenddirectory:cd backend -
Install dependencies for the backend:
npm install
-
Create a
.envfile in thebackenddirectory and add your environment variables (e.g., MongoDB URI, JWT secrets, etc.).Example:
MONGO_URI=mongodb://localhost:27017/gstore JWT_SECRET=your_jwt_secret -
Run the backend server:
npm start
-
The backend server will be running at
http://localhost:5000.
-
Clone the repository:
git clone https://github.com/Girma35/Gstore.git
-
Navigate into the project directory:
cd Gstore -
Install frontend dependencies:
npm install
-
Run the frontend development server:
npm run dev
-
Open the app in your browser:
http://localhost:3000
Gstore/
│
├── backend/ # Backend (Node.js, Express.js) files
│ ├── controllers/ # Express.js route controllers
│ ├── models/ # Mongoose models (e.g., User, Product, Order)
│ ├── routes/ # API routes
│ ├── config/ # Environment variables and other configurations
│ └── server.js # Main server entry point
│
├── src/ # Frontend (React, Next.js) files
│ ├── app/
│ ├── components/
│ ├── contexts/
│ ├── pages/
│ ├── assets/
│ ├── styles/
│ └── utils/
│
├── package.json # Frontend dependencies
├── tsconfig.json # TypeScript configuration for the frontend
└── README.md # Project documentation
- GET /api/products: Fetch all products
- GET /api/products/:id: Fetch a single product by ID
- POST /api/cart/add: Add an item to the cart
- DELETE /api/cart/remove/:id: Remove an item from the cart
- POST /api/order: Place a new order
- GET /api/order/:id: Get order details by ID
We welcome contributions from the open-source community. Feel free to fork the repository, submit issues, or open pull requests for bug fixes or new features.
- Fork this repository.
- Create a new branch (
git checkout -b feature-branch). - Commit your changes (
git commit -m 'Add new feature'). - Push to the branch (
git push origin feature-branch). - Open a pull request.
This project is licensed under the MIT License.
- Next.js for providing the structure and server-side rendering.
- Tailwind CSS for quick styling and responsive design.
- Express.js and Node.js for building the backend API.
- MongoDB for data storage and management.
For any inquiries or questions, feel free to reach out to the project maintainer:
- Email: girmawakeyo4@gmail.com
- GitHub: https://github.com/Girma35