Skip to content

Latest commit

 

History

History
80 lines (50 loc) · 3.14 KB

README.md

File metadata and controls

80 lines (50 loc) · 3.14 KB
Raw

product-store

Overview

This full-stack web application allows users to perform full CRUD operations (Create, Read, Update, Delete) for managing product data. The front-end is built with React.js, while the back-end uses Express and Node.js to create a RESTful API, with MongoDB for data storage. Built a fully-responsive UI that leverages React hooks and state management for dynamic UI updates. I deployed the app using Render.

Features

  • Full CRUD Functionality: Users can create, read, update, and delete products.
  • Responsive UI: Built with React.js and styled with Chakra UI, ensuring a seamless experience across devices.
  • State Management: Utilized React hooks to manage product states and dynamic UI updates.
  • RESTful API: Built with Express.js and Node.js for handling product operations and managing routing.
  • Error Handling: Comprehensive error handling for API requests, ensuring robust functionality.
  • MongoDB Integration: Efficient data persistence using MongoDB, optimized with schema design and indexing.

Prerequisites

  • Node.js and npm installed on your system.
  • Familiarity with Express.js and building APIs.
  • I used VS Code for development, and Postman for backend API testing. You can choose any IDE of your own.

Setup Instructions

Follow these steps to set up and run the application locally:

  1. Clone the repository:

    git clone https://github.com/saurxbh/product-store.git

  2. Set up .env file

    MONGO_URI: your-mongodb-database-connection-string
PORT: 8080

  3. Build the project

    npm run build

  4. Start the app

    npm run start

Execution

  • Homepage is displayed and all the products in the database are fetched when '/' endpoint is hit. You can also toggle themes.

    image image

  • The small '+' sign in the top right corner on the navbar provides the functionality to create a product. Upon clicking this button, '/create' endpoint is hit, where you can enter the product details to be created. After successfully creating a product, a toast is displayed and UI is updated to display the newly created product.

    image image image image

  • A product can be edited by clicking the edit button on the product card, after which a modal is displayed. It is a React component from ChakraUI library. After entering updated details and clicking updated, a toast is displayed and UI is updated.

    image image image

  • Delete button on a product card can be used to delete the product.

    image image

  • Responsive design is implemented

    image image

  • When there are no products in the database, following screen is displayed prompting the user to create a product.

    image