Building A Shopping Cart Application Using Node.js, Express.js, MongoDB, JavaScript, HTML5, CSS3, and Bootstrap 5

 

Building a shopping cart application using Node.js, Express.js, MongoDB, JavaScript, HTML5, CSS3, and Bootstrap 5

Building a shopping cart application using Node.js, Express.js, MongoDB, JavaScript, HTML5, CSS3, and Bootstrap 5 is a great project to demonstrate full-stack development capabilities. In this article, we'll guide you through creating the backend and frontend components of the shopping cart application, including CRUD operations, product display, cart functionality, and integrated checkout. 

 Backend Setup Step 1 :
Create a new project directory:
Run npm init to initialize the project and create a package.json file. Install the required packages using:
npm install express mongoose morgan dotenv multer body-parser cors nodemon.

 Step 2:
Configure MongoDB Connection Create a .env file to store sensitive information. Add your MongoDB Atlas connection string as MONGODB_URI.

Step 3:
Set Up Express Server Create an index.js file in the project root. 

Step 4:
Define Mongoose Schema Create a models directory and define a Mongoose schema for the Product model. Include attributes such as _id, productName, quantity,price and image.

Step 5:
Implement CRUD operations. Create routes for CRUD operations (GET, POST, PUT, DELETE) in the routes directory. Implement the logic to interact with the MongoDB database using Mongoose methods. 

Step 6:
Handle Shopping Cart Logic Implement routes for adding items to the cart, updating quantities, and removing items from the cart. Use sessions or JWT tokens to manage the user's shopping cart data.

Step 7:
Set Up Integrated Checkout Integrate a payment gateway like Stripe or PayPal to handle payments. Create a route for processing payments and updating the order status.

Frontend Implementation Step 1: 

Project Setup Create a public directory for static files (HTML, CSS, images). Create an index.html file and link necessary CSS and JavaScript files. 

Step 2: Design Product Gallery Use Bootstrap to create a responsive grid for displaying products. Fetch product data using the Fetch API from the backend and display product images, names, and quantities. 

Step 3: Implement Shopping Cart Design a cart section to display added items. Use JavaScript to dynamically update the cart when users add, update quantities, or remove items. 

Step 4: Add Checkout Functionality Create a checkout form with payment options. Integrate the payment gateway's JavaScript SDK to handle payment processing.

 

Step 5: Implement Search Functionality Add a search bar to allow users to search for products. Use JavaScript to filter and display relevant products.

 

Backend Setup (Node.js, Express.js, MongoDB)

Create a new directory for your project and navigate to it in your terminal.

Initialize your Node.js project:

 npm init -y 

Install required packages: 

npm install express mongoose morgan dotenv multer body-parser cors nodemon 

Create a .env file in the root directory to store your environment variables:

dotenv PORT=3000 MONGODB_URI=your_mongodb_connection_string 

Set up your app.js or index.js for the backend:

app.js Code Snippet

// app.js const express = require('express'); const mongoose = require('mongoose'); const morgan = require('morgan'); const bodyParser = require('body-parser'); const cors = require('cors'); require('dotenv').config(); const app = express(); const port = process.env.PORT || 3000; // Middleware app.use(morgan('dev')); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use(cors()); // Connect to MongoDB mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); const db = mongoose.connection; db.on('error', console.error.bind(console, 'MongoDB connection error:')); db.once('open', () => { console.log('Connected to MongoDB'); }); // Define routes here // ... app.listen(port, () => { console.log(`Server is running on port ${port}`); });

Frontend Setup (HTML5, CSS3, Bootstrap 5, JavaScript) 

Create a new directory for your frontend files and navigate to it in your terminal. Create an index.html file in the public folder:

HTML Code Snippet

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopping Cart</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Your HTML content here --> <script src="script.js"></script> </body> </html>

Please note that integrating payment gateways involves sensitive data and security considerations. It's recommended to use well-established and secure payment gateway libraries and services to handle payment processing securely.  

Backend Setup (Node.js, Express.js, MongoDB): Create a new project folder and navigate to it in the terminal. 

 Create a server.js file for your Express server: 

server.js Code Snippet

require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const morgan = require('morgan'); const cors = require('cors'); const app = express(); const PORT = process.env.PORT || 3000; const MONGODB_URI = process.env.MONGODB_URI; app.use(morgan('dev')); app.use(cors()); app.use(express.json()); mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => { console.log('Connected to MongoDB'); }) .catch((error) => { console.error('Error connecting to MongoDB:', error); }); // Define your routes here app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });

Define your routes and controllers for CRUD operations, including adding/removing items from the cart. Implement the checkout process with a payment gateway (like Stripe) for handling payments. Create a script.js file in the same public folder for frontend JavaScript: Create a styles.css file for your CSS styling. This is where you would implement the frontend features using JavaScript to fetch products and display them etc.

script.js Code Snippet

fetch('/api/products') .then(response => response.json()) .then(products => { const productsContainer = document.getElementById('products-container'); products.forEach(product => { const productCard = document.createElement('div'); productCard.classList.add('card', 'm-2'); const image = document.createElement('img'); image.src = product.image; image.classList.add('card-img-top'); productCard.appendChild(image); const cardBody = document.createElement('div'); cardBody.classList.add('card-body'); const productName = document.createElement('h5'); productName.classList.add('card-title'); productName.textContent = product.product_name; cardBody.appendChild(productName); const addToCartButton = document.createElement('button'); addToCartButton.classList.add('btn', 'btn-primary'); addToCartButton.textContent = 'Add to Cart'; // Add event listener to add product to cart addToCartButton.addEventListener('click', () => { // Call a function to add the product to the cart addToCart(product); }); cardBody.appendChild(addToCartButton); productCard.appendChild(cardBody); productsContainer.appendChild(productCard); }); }); // Function to update the cart UI function updateCartUI() { const cartContainer = document.getElementById('cart-container'); const cartTotal = document.getElementById('cart-total'); const checkoutButton = document.getElementById('checkout-button'); cartContainer.innerHTML = ''; // Clear the cart container cart.forEach(item => { const cartItem = document.createElement('div'); cartItem.classList.add('cart-item'); const itemName = document.createElement('span'); itemName.textContent = item.productName; cartItem.appendChild(itemName); const itemQuantity = document.createElement('span'); itemQuantity.textContent = `Quantity: ${item.quantity}`; cartItem.appendChild(itemQuantity); const removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.addEventListener('click', () => { removeFromCart(item.productId); }); cartItem.appendChild(removeButton); cartContainer.appendChild(cartItem); }); // Calculate the total price of items in the cart const totalPrice = cart.reduce((total, item) => total + item.price * item.quantity, 0); // Update the total price in the UI cartTotal.textContent = `Total: $${totalPrice.toFixed(2)}`; // Enable or disable the checkout button based on cart contents checkoutButton.disabled = cart.length === 0; } // Initialize the cart UI updateCartUI(); // Define functions for adding/removing items from the cart // Define your frontend JavaScript code here const cart = []; // This will store the items in the cart // Example: Fetch products and display them // ... // Function to add a product to the cart function addToCart(product) { const cartItem = { productId: product.id, productName: product.product_name, quantity: 1, // You can set the initial quantity here price: product.price // You might have a 'price' property in your product object }; // Check if the product is already in the cart const existingItem = cart.find(item => item.productId === cartItem.productId); if (existingItem) { existingItem.quantity += 1; // Increase the quantity if already in the cart } else { cart.push(cartItem); // Add the new item to the cart } updateCartUI(); // Update the cart UI } // Function to remove a product from the cart function removeFromCart(productId) { const itemIndex = cart.findIndex(item => item.productId === productId); if (itemIndex !== -1) { cart.splice(itemIndex, 1); // Remove the item from the cart } updateCartUI(); // Update the cart UI } function checkout() { // Calculate the total price of items in the cart const totalPrice = cart.reduce((total, item) => total + item.price * item.quantity, 0); // Here you would integrate with a payment gateway (e.g., Stripe) to process the payment // You would pass the total price and other necessary information to the payment gateway API // For demonstration purposes, just log the total price console.log('Total Price:', totalPrice); // After successful payment, you might clear the cart and show a success message cart.length = 0; updateCartUI(); // Update the cart UI alert('Payment successful! Thank you for your purchase.'); } // Initialize the cart UI updateCartUI();

The updateCartUI function not only displays the individual cart items but also calculates and displays the total price of the items in the cart. Additionally, the checkout button is enabled or disabled based on whether there are items in the cart or not. Remember that this example provides a simple implementation for demonstration purposes. In a real-world scenario, you would likely enhance the UI, improve the user experience, and implement proper error handling for a production application.

JavaScript Code Snippet

// Here's how you might update your HTML file(index.html) // to display the cart items and total price and initiate the checkout process: <!-- ... Other HTML content ... --> <div id="cart-container"> <!-- Cart items will be displayed here --> </div> <div id="cart-total"> <!-- Total price will be displayed here --> </div> // Function to initiate the checkout process <button id="checkout-button" onclick="checkout()" disabled> Checkout </button> <!-- ... Other HTML content ... -->

Style your application using CSS in a file named styles.css within the public folder. To implement a search functionality that fetches products from the database based on user input and updates the frontend code to display the search results, you need to modify both the backend and frontend parts of your application. Here's how you can do it: Backend: Modify your backend routes to handle product searches. You'll need to create a new route for handling search queries and fetching matching products from the database. Add this route to your Express app.

JavaScript Code Snippet

app.get('/api/search/:query', async (req, res) => { try { const searchQuery = req.params.query; const regexQuery = new RegExp(searchQuery, 'i'); // Case-insensitive regex const searchResults = await Product.find({ product_name: regexQuery }); // Assuming your model is named 'Product' res.json(searchResults); } catch (error) { res.status(500).json({ error: 'An error occurred while searching for products.' }); } });

Update your frontend code to perform a search and display the search results. Modify your existing fetch code to perform a search.

JavaScript Code Snippet

const searchInput = document.getElementById('search-input'); const searchButton = document.getElementById('search-button'); searchButton.addEventListener('click', () => { const query = searchInput.value.trim(); // Get the search query from the input field if (query !== '') { fetch(`/api/search/${query}`) .then(response => response.json()) .then(searchResults => { displaySearchResults(searchResults); }); } });

       

          Function to display search results (script.js):

JavaScript Code Snippet

function displaySearchResults(results) { const searchResultsContainer = document.getElementById('search-results-container'); searchResultsContainer.innerHTML = ''; // Clear previous results results.forEach(result => { const resultItem = document.createElement('div'); resultItem.classList.add('search-result'); const productName = document.createElement('h5'); productName.textContent = result.product_name; resultItem.appendChild(productName); const addToCartButton = document.createElement('button'); addToCartButton.textContent = 'Add to Cart'; addToCartButton.addEventListener('click', () => { addToCart(result); // You can reuse your existing addToCart function }); resultItem.appendChild(addToCartButton); searchResultsContainer.appendChild(resultItem); }); }

         

              Update your index.html file with the following snippet of html code:

HTML Code Snippet

<!-- ... Other HTML content ... --> <div id="search-container"> <input type="text" id="search-input" placeholder="Search products"> <button id="search-button">Search</button> </div> <div id="search-results-container"> <!-- Search results will be displayed here --> </div> <!-- ... Other HTML content ... -->

In this setup, users can enter a search query, click the "Search" button, and the frontend will send a request to the server to search for products matching the query. The server responds with the matching products, and the frontend updates the UI to display the search results. 

Here's how you can use express.Router() and Mongoose model object methods to generate routes for product sale, updating sale, and canceling sale within your Express app: 

 Backend (Routes and Mongoose Model): Create a file named routes.js to define your routes using express.Router(): 

routes.js Code Snippet

const express = require('express'); const router = express.Router(); const Product = require('./models/Product'); // Assuming your model is named 'Product' // Route for creating a new product sale router.post('/api/sale', async (req, res) => { try { const { productId, quantity } = req.body; // Find the product by ID const product = await Product.findById(productId); if (!product) { return res.status(404).json({ error: 'Product not found' }); } // Check if there is enough quantity available if (product.quantity < quantity) { return res.status(400).json({ error: 'Insufficient quantity available' }); } // Update product quantity and save product.quantity -= quantity; await product.save(); res.json({ message: 'Product sale successful' }); } catch (error) { res.status(500).json({ error: 'An error occurred while processing the sale' }); } }); // Route for updating a product sale router.put('/api/sale/:saleId', async (req, res) => { try { const saleId = req.params.saleId; const { newQuantity } = req.body; // Find the product sale by ID // Update the sale's quantity and any other properties as needed // Example: const sale = await Sale.findById(saleId); // sale.quantity = newQuantity; // await sale.save(); res.json({ message: 'Product sale updated' }); } catch (error) { res.status(500).json({ error: 'An error occurred while updating the sale' }); } }); // Route for canceling a product sale router.delete('/api/sale/:saleId', async (req, res) => { try { const saleId = req.params.saleId; // Find the product sale by ID // Delete the sale document using the Mongoose method // Example: await Sale.findByIdAndDelete(saleId); res.json({ message: 'Product sale canceled' }); } catch (error) { res.status(500).json({ error: 'An error occurred while canceling the sale' }); } }); module.exports = router;

   Modify your server.js to use the routes defined in routes.js:

server.js Code Snippet

const express = require('express'); const mongoose = require('mongoose'); const morgan = require('morgan'); const cors = require('cors'); const routes = require('./routes'); // Import the routes from routes.js const app = express(); const PORT = process.env.PORT || 3000; const MONGODB_URI = process.env.MONGODB_URI; app.use(morgan('dev')); app.use(cors()); app.use(express.json()); mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => { console.log('Connected to MongoDB'); }) .catch((error) => { console.error('Error connecting to MongoDB:', error); }); // Use the routes from routes.js app.use('/', routes); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });

In the code above, we've defined routes for creating a product sale, updating a sale, and canceling a sale. The exact implementation of updating and canceling sales will depend on your specific schema and business logic. Make sure to replace comments with the actual logic for your application. Here's an example of how you might define a Mongoose schema for your product and sale models that works with MongoDB:

 Backend (Mongoose Models): Create a file named models.js to define your Mongoose models: 

model.js Code Snippet

const mongoose = require('mongoose'); // Define the Product schema const productSchema = new mongoose.Schema({ product_name: { type: String, required: true }, quantity: { type: Number, required: true }, price: { type: Number, required: true }, image: { type: String } // You might store the image URL here }); // Define the Sale schema const saleSchema = new mongoose.Schema({ product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product', required: true }, quantity: { type: Number, required: true }, // Add more properties as needed for a sale, such as date, customer info, etc. }); const Product = mongoose.model('Product', productSchema); const Sale = mongoose.model('Sale', saleSchema); module.exports = { Product, Sale };

Backend (server.js): Update your server.js to include the Mongoose models:

server.js Code Snippet

const express = require('express'); const mongoose = require('mongoose'); const morgan = require('morgan'); const cors = require('cors'); const routes = require('./routes'); const { Product, Sale } = require('./models'); // Import the models from models.js const app = express(); const PORT = process.env.PORT || 3000; const MONGODB_URI = process.env.MONGODB_URI; app.use(morgan('dev')); app.use(cors()); app.use(express.json()); mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => { console.log('Connected to MongoDB'); }) .catch((error) => { console.error('Error connecting to MongoDB:', error); }); app.use('/', routes); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });

In this example, we've defined two Mongoose models: Product and Sale. The Product model represents the products you're selling, and the Sale model represents the sales transactions. The ref property in the Sale schema's product field establishes a reference to the Product model, allowing you to easily link sales to the corresponding products. Make sure to adjust the schemas and fields according to your specific requirements and business logic. This example provides a foundation for creating a flexible and scalable database structure for your shopping cart application. Remember that this example provides a basic implementation. In a real-world scenario, you might want to enhance the search feature with more advanced search capabilities, pagination, and a better user experience. 

 Conclusion

 In this article, we've covered the entire process of building a shopping cart application using Node.js, Express.js, MongoDB, JavaScript, HTML5, CSS3, and Bootstrap 5. We've shown how to set up the backend, handle CRUD operations, manage the shopping cart, integrate checkout functionality, and implement product searching. This project demonstrates the power of full-stack development and how various technologies can come together to create a feature-rich and user-friendly shopping experience.

Happy coding!!!

Follow us