zejiran / product-catalog

🛒 A full-stack web app for managing and showcasing products

Product Catalog App

Welcome to the Product Catalog App! This project is designed and developed as a full-stack application that provides a comprehensive catalog of products with various features for easy management.

Table of Contents

• Product Catalog App
  • Table of Contents
  • Introduction
  • Features
  • Requirements
  • Getting Started
    • Installation
    • Configuration
      • Backend Configuration
      • Frontend Configuration
  • Usage
  • License

Introduction

This project aims to create a user-friendly product catalog with the following key features:

• List products with pagination and search functionality.
• Create new products and view them in the catalog.
• Edit existing products.
• Preview detailed information of a product.
• Maintain a history of price and stock changes for each product.

Features

1. Product Listing:

   • View a paginated list of products.
   • Utilize a search feature to find specific products.

2. Product Management:

   • Create new products with details such as name, description, SKU, image, tags, price, and stock.
   • Edit existing products to update their information.
   • Delete products from the catalog.

3. Product Details:

   • View detailed information about a product.
   • Decide whether to edit or delete a product from the product details page.

4. Database History:

   • The system maintains a history of price and stock changes for each product, allowing for tracking changes over time.

Requirements

To run this project, you'll need the following:

• Node.js and npm installed on your system. You can download them from nodejs.org.
• MongoDB installed and running as the database server.

Getting Started

Follow these instructions to get the project up and running on your local machine.

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/zejiran/product-catalog.git

2. Navigate to the project directory:

   cd product-catalog

3. Install backend dependencies:

   cd backend
   npm install

4. Install frontend dependencies:

   cd frontend
   npm install

Configuration

Backend Configuration

• In the backend directory, create a .env file with the following content according to your MongoDB configuration:

  MONGO_URI=mongodb://host:password/product-catalog
  

Frontend Configuration

• In the frontend directory, you can edit the apiURL in the code to point to your backend server:

  const apiURL = 'http://localhost:3001/api/products';

Usage

1. Start the Node.js backend server:

   cd backend
   npm start

   The backend will be available at http://localhost:3001.

2. Start the Angular frontend:

   cd frontend
   ng serve

   The frontend app will be available at http://localhost:4200 in your web browser.

3. Use the application to manage your product catalog.

License

• MIT license
• Copyright 2023 © Juan Alegría