An e-commerce app built using React for the frontend and Express for the backend. This project is a full-fledged e-commerce website built to sell a variety of items, including clothing, jewelry, watches, electronics, and more.
The project is organized into two main directories: backend
for the server-side code and frontend
for the client-side code.
The backend is responsible for handling API requests, interacting with the database, and serving data to the frontend.
- src/controllers/productController.js: Handles product-related logic, including fetching data from the external API.
- src/models/Product.js: Defines the schema for the product data stored in the database.
- src/routes/productRoutes.js: Defines the routes for product-related API endpoints.
- src/app.js: Initializes the Express application, sets up middleware, and connects to the database.
The frontend is responsible for presenting the user interface and interacting with the backend to display product information.
- src/components/ProductList.js: Displays a list of products fetched from the backend.
- src/components/ProductCard.js: Represents an individual product card with details like name, description, and price.
- src/pages/Home.js: The main landing page that integrates the ProductList component.
- src/services/apiService.js: Handles communication with the backend API.
Follow these steps to set up and run the project locally:
-
Install Dependencies:
cd ecommence-app/backend npm install cd ../frontend npm install
-
Run the Backend:
cd ../backend npm start
-
Run the Frontend:
cd ../frontend npm start
-
Access the Application: Open your browser and go to http://localhost:3000 to view the application.
-
Backend:
- Express: Fast, unopinionated, minimalist web framework for Node.js.
- Cors: Middleware for enabling CORS in Express.
- Axios: Promise-based HTTP client for the browser and Node.js.
-
Frontend:
- React: JavaScript library for building user interfaces.
- React Router: Declarative routing for React.js.
- Axios: Promise-based HTTP client for the browser and Node.js.
To adapt this project to your needs:
- Replace the OpenWeatherMap API endpoint in
productController.js
with your desired API. - Customize the product schema in
Product.js
according to your data structure. - Modify the frontend components and styles in the
src/components
andsrc/pages
directories.
If you would like to contribute to this project, please follow the guidelines in CONTRIBUTING.md.
This project is licensed under the MIT License.
👤 Aras Güngöre
- LinkedIn: @arasgungore
- GitHub: @arasgungore