MERN Botanicals

This project is a dynamic botanical-themed webstore built using the MERN stack (MongoDB, Express.js, React, Node.js). Designed to sell plant-related items, the store integrates the Unsplash API to automatically generate high-quality images based on product names, streamlining the listing process and enhancing visual appeal.
 
A RESTful API powers the backend, enabling product creation, editing, and deletion through a secure admin panel. Each product has dynamic routing and a unique URL for easy sharing and navigation. The frontend allows users to browse items, add them to a cart, and complete a checkout process, which updates inventory in real time by reducing the product's available quantity.
 
This project demonstrates a full-stack e-commerce solution with real-time data management, user interaction, and scalable design.

View Project

Full-Stack E-Commerce Store

The homepage features a clean, botanical design with a dynamic grid of products. Each item includes a name, price, and an image automatically pulled from Unsplash based on the product title.

The homepage features a clean, botanical design with a dynamic grid of products. Each item includes a name, price, and an image automatically pulled from Unsplash based on the product title.
Landing Page of MERN Store

Dynamic Page Routing

Using React Router, each product links to a unique URL (e.g., /product/dynamic-slug), enabling individual product pages with dynamic routing. This setup ensures smooth navigation, SEO-friendly URLs, and scalability as new items are added.

Using React Router, each product links to a unique URL (e.g., /product/dynamic-slug), enabling individual product pages with dynamic routing. This setup ensures smooth navigation, SEO-friendly URLs, and scalability as new items are added.
Dynamic Product Page

Add to Cart & Check Out System

Users can add products to their cart from any page, with quantities tracked in real time. At checkout, the system updates the database by reducing each product’s available quantity based on the purchase. This ensures accurate stock management and removes sold-out items from the storefront. The cart experience is fast, intuitive, and fully synced with the backend for reliable inventory control.

Users can add products to their cart from any page, with quantities tracked in real time. At checkout, the system updates the database by reducing each product’s available quantity based on the purchase. This ensures accurate stock management and removes sold-out items from the storefront. The cart experience is fast, intuitive, and fully synced with the backend for reliable inventory control.
Product Page with Cart Open

Admin Panel and Product Management

The admin panel provides a simple interface for managing the store’s inventory. Admins can add new products, update existing ones, and choose items to feature on the homepage’s hero slider for promotion. Setting a product’s quantity to zero automatically hides it from the main storefront, keeping the user experience clean and up-to-date. All actions are powered by a secure RESTful API, enabling real-time updates across the site.

The admin panel provides a simple interface for managing the store’s inventory. Admins can add new products, update existing ones, and choose items to feature on the homepage’s hero slider for promotion. Setting a product’s quantity to zero automatically hides it from the main storefront, keeping the user experience clean and up-to-date. All actions are powered by a secure RESTful API, enabling real-time updates across the site.
Admin Panel and Products

For images the system communicates directly with the Unsplash API to query 5 random pictures of the product title to be used on the product pages.

Add New Products
Update Live Products