Comp Harbor - Cover Photo
Web Development - October 21, 2023

Comp Harbor

E-Commerce Platform

MongoDB, Express.js, React.js, Node.js, Firebase

Computer Harbor is a tech e-commerce platform developed to enhance skills in building a MongoDB-Express.js backend and integrating it with a React frontend. The project focuses on implementing RESTful APIs for product and cart management, handling authentication with Firebase, and ensuring efficient data flow between the client and server. It also explores private routes, state management, and responsive UI design, with deployment on Vercel for the backend and Firebase for the frontend. Through this project, key concepts in full-stack development were reinforced, particularly in backend structuring.

    Table of Content

    • Core Features
      • Product Management
      • Cart Functionalities
      • Authentication and Security
      • Additional Features
      • Backend and Data Management
    • Technology Stack
      • Frontend
      • Backend
      • Deployment
    • Project Overview
      • Introduction & Purpose
      • Brand-Centric Product Display
      • Product Management System
      • Cart System with User-Specific Data
      • Authentication and Security
      • Responsive UI and Theming
      • Conclusion

Core Features

  • Product Management

    • Brand-centric homepage displaying brand images and names for quick navigation.
    • Private route for adding and updating products with image uploads and category details.
    • Detailed product pages displaying product information with add-to-cart functionality.

  • Cart Functionalities

    • User-specific cart where each user can independently add or remove products.
    • Private route for viewing and managing the cart, with options to delete unwanted items.
    • Global product information synchronization ensuring cart updates reflect product changes.

  • Authentication and Security

    • Firebase authentication with email/password login and Google sign-in.
    • Error handling for registration and login forms with relevant toasts for feedback.
    • Dynamic redirects after login, registration, and product updates for a seamless user experience.

  • Additional Features

    • Responsive design ensuring compatibility across desktop and mobile devices.
    • Dark/light theme toggle implemented using Tailwind dark classes.
    • Dynamic page redirections based on user actions, such as login, product addition, or updates.

  • Backend and Data Management

    • Node.js and Express.js backend with MongoDB for storing product and cart data.
    • Data persistence with real-time updates reflected across all relevant sections.

Technology Stack

Frontend

  • React.js
  • Tailwind CSS
  • DaisyUI
  • React Icons
  • React Router
  • Firebase
  • Sonner
  • SwiperJS
  • react-rating

Backend

  • Node.js
  • Express.js
  • MongoDB

Deployment

  • Vercel
  • Firebase Hosting

Project Overview

Introduction & Purpose

Computer Harbor is a tech e-commerce platform designed to manage and display products from various brands. The primary objective was to develop a scalable system that integrates a MongoDB-Express backend with a React frontend. This project focused on implementing core functionalities such as product management, authentication, cart operations, and dynamic data synchronization while ensuring security and performance optimizations.

Brand-Centric Product Display

The homepage is structured to display brand names and images, enabling users to browse products by brand. This required designing an efficient database schema in MongoDB to associate products with specific brands and implementing React state management for seamless UI updates. Advertisements were integrated to highlight featured brands dynamically.

Computer Harbor - Brand DisplayBrand-Based Navigation

Product Management System

Computer Harbor - Product ManagementProduct Add/Update Interface

Users can add and update product details through a private route with a structured form. Product data is stored in MongoDB, ensuring persistence. The backend, built with Node.js and Express, handles image uploads and validates input before updating the database. The challenge was ensuring real-time updates across the UI after any modification.

  • Product additions trigger real-time updates, ensuring immediate visibility across relevant sections.
  • Backend routes handle CRUD operations with Express.js while ensuring data validation and error handling.
  • Product details are dynamically fetched and displayed using React Router and state management.

Cart System with User-Specific Data

Each authenticated user has a dedicated cart where products can be added or removed. Cart data is securely stored in MongoDB and associated with the user's ID. The backend ensures data persistence, while React manages state updates in real-time. This feature required optimizing database queries to handle multiple concurrent user operations efficiently.

Computer Harbor - Cart SystemUser Cart Management

Authentication and Security

Firebase authentication is integrated for secure user login and registration. Users can authenticate using email/password or Google login. Error handling mechanisms provide feedback on login failures, invalid credentials, and registration issues.

Computer Harbor - Login SystemAuthentication System

Responsive UI and Theming

The platform features a responsive design built with Tailwind CSS and DaisyUI, ensuring usability across different devices. A theme toggle allows users to switch between light and dark modes, implemented using Tailwind dark mode classes. React components dynamically adjust styling based on the selected theme.

Conclusion

Developing Computer Harbor provided hands-on experience in full-stack development with React, Node.js, Express, and MongoDB. The project emphasized data synchronization, real-time UI updates, authentication security, and efficient database structuring. Implementing features like user-specific carts and Firebase authentication strengthened backend integration skills, while responsive design and theming enhanced frontend capabilities.