diff --git a/README.md b/README.md index 763e1d8..a7fa470 100644 --- a/README.md +++ b/README.md @@ -5,30 +5,39 @@ Welcome to **Fusion Electronics**, a **MERN-Stack E-commerce Application**! This ## Table of Contents 1. [Introduction](#introduction) -2. [User Interface](#user-interface) +2. [Live Deployment](#live-deployment) +3. [User Interface](#user-interface) - [Home Page](#home-page) - [Full Product List](#full-product-list) - [Cart Page](#cart-page) - [Checkout Page](#checkout-page) -3. [Features](#features) -4. [Technologies Used](#technologies-used) -5. [Getting Started](#getting-started) +4. [Features](#features) +5. [Technologies Used](#technologies-used) +6. [Getting Started](#getting-started) - [Prerequisites](#prerequisites) - [Installation](#installation) -6. [Project Structure](#project-structure) -7. [Running the Application](#running-the-application) -8. [Testing the APIs](#testing-the-apis) -9. [Swagger API Documentation](#swagger-api-documentation) -10. [Deployment](#deployment) -11. [Containerization](#containerization) -12. [Contributing](#contributing) -13. [License](#license) -14. [Creator](#creator) +7. [Project Structure](#project-structure) +8. [Running the Application](#running-the-application) +9. [Testing the APIs](#testing-the-apis) +10. [Swagger API Documentation](#swagger-api-documentation) +11. [Deployment](#deployment) +12. [Containerization](#containerization) +13. [Contributing](#contributing) +14. [License](#license) +15. [Creator](#creator) ## Introduction This project is a demonstration of building an e-commerce application using the MERN stack, which consists of MongoDB (database), Express.js (server), React.js (frontend), and Node.js (runtime environment). The application allows users to browse products, add them to a shopping cart, proceed to checkout, and simulate the order processing. It includes basic validations for user inputs and simulates the checkout process on the backend. +## Live Deployment + +The application is deployed live on Vercel. You can access it at the following URL: [Fusion Electronics](https://mern-stack-ecommerce-app-nine.vercel.app). + +The backend server is deployed on Render and can be accessed at the following URL: [Fusion Electronics API](https://mern-stack-ecommerce-app-h5wb.onrender.com/). + +Please note that the backend server may take a few seconds to wake up if it has been inactive for a while. + ## User Interface ### Home Page @@ -197,6 +206,8 @@ Before running this project, ensure you have the following installed: ``` MONGO_URI=mongodb://localhost:27017/Ecommerce-Products ``` + + For your information, I am using MongoDB Atlas for this project. You can create a free account and get your connection string from there if you want to deploy the application to the cloud. - Ensure that your MongoDB server is running. If you're using Mac, you can start the MongoDB server with the following command: ```bash diff --git a/backend/docs/swagger.js b/backend/docs/swagger.js index d3f4874..cdfcb7a 100644 --- a/backend/docs/swagger.js +++ b/backend/docs/swagger.js @@ -14,6 +14,10 @@ const swaggerDefinition = { url: 'http://localhost:5000', description: 'Development server', }, + { + url: 'https://mern-stack-ecommerce-app-h5wb.onrender.com', + description: 'Production server', + } ], }; diff --git a/backend/index.js b/backend/index.js index 00c900a..759472e 100644 --- a/backend/index.js +++ b/backend/index.js @@ -24,6 +24,11 @@ app.use(cors()); app.use(express.json()); app.use(express.urlencoded({ extended: true })); +// Redirect root to /api-docs +app.get('/', (req, res) => { + res.redirect('/api-docs'); +}); + // Routes app.use('/api/products', productRoutes); app.use('/api/checkout', checkoutRoutes); diff --git a/src/App.jsx b/src/App.jsx index cfbc543..5af0115 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -32,9 +32,8 @@ function App() { React.useEffect(() => { const fetchProducts = async () => { try { - // Be sure to replace the endpoint if your API (backend server) is running on a different port - // This is the default port for the Express server - port 5000 - const response = await fetch('http://localhost:5000/api/products'); + // Be sure to replace the endpoint if your API (backend server) is running on a different port or domain + const response = await fetch('https://mern-stack-ecommerce-app-h5wb.onrender.com/api/products'); const data = await response.json(); setProducts(data); } catch (error) { diff --git a/src/components/NavigationBar.jsx b/src/components/NavigationBar.jsx index ab60e26..39a3c01 100644 --- a/src/components/NavigationBar.jsx +++ b/src/components/NavigationBar.jsx @@ -35,7 +35,7 @@ function NavigationBar({ cartItemCount }) { const handleSearchSubmit = async event => { event.preventDefault(); try { - const response = await axios.get(`http://localhost:5000/api/search?q=${searchQuery}`); // Specify port 5000 + const response = await axios.get(`https://mern-stack-ecommerce-app-h5wb.onrender.com/api/search?q=${searchQuery}`); // Specify port 5000 setSearchResults(response.data); } catch (error) { console.error('Error fetching search results:', error); diff --git a/src/pages/ProductDetails.jsx b/src/pages/ProductDetails.jsx index c9ec6ee..bbb49d3 100644 --- a/src/pages/ProductDetails.jsx +++ b/src/pages/ProductDetails.jsx @@ -14,7 +14,7 @@ function ProductDetails({ addToCart }) { useEffect(() => { async function fetchProduct() { try { - const response = await axios.get(`http://localhost:5000/api/products/${id}`); + const response = await axios.get(`https://mern-stack-ecommerce-app-h5wb.onrender.com/api/products/${id}`); if (response.data) { setProduct(response.data); setUserRating(response.data.rating); @@ -37,7 +37,7 @@ function ProductDetails({ addToCart }) { const handleRatingChange = async (event, newRating) => { setUserRating(newRating); try { - await axios.put(`http://localhost:5000/api/products/${id}/rating`, { rating: newRating }); + await axios.put(`https://mern-stack-ecommerce-app-h5wb.onrender.com/api/products/${id}/rating`, { rating: newRating }); setProduct(prevProduct => ({ ...prevProduct, rating: newRating,