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.
![home](https://private-user-images.githubusercontent.com/30379522/271685462-2dcbc2ac-779a-4254-a03d-cd89f221bf4b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4Mjk3ODQsIm5iZiI6MTcyMzgyOTQ4NCwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjItMmRjYmMyYWMtNzc5YS00MjU0LWEwM2QtY2Q4OWYyMjFiZjRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE2VDE3MzEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFkMmEwMzUxY2Y1OGIxNzc0MjgzODYyYzkwMjBjZjgwZjU3OTNlY2EzMTk5NTA3NDdiZTMwZThmMTM1NTc0ZDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.jvME5_WWXucwsCw_iEPj4eOF8H1jPJ3JFJ5XzwZaD4k)
![detail](https://private-user-images.githubusercontent.com/30379522/271685467-aaa1806b-bfa5-471a-9b50-08fd466a1ef0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4Mjk3ODQsIm5iZiI6MTcyMzgyOTQ4NCwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjctYWFhMTgwNmItYmZhNS00NzFhLTliNTAtMDhmZDQ2NmExZWYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE2VDE3MzEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2ODQ0ZDkwZDkwNDdhMmJiOTFhYzI4YjEyMTRjYmVkYTMzYWVlMzA3NTNkNTgyMWY5ZWI1Y2I2YjM2ZDIyMjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Wrr0Nh_cMnVKnJec-Wkg7jVN1yWRiyqlPauMfxnt8N8)
![create](https://private-user-images.githubusercontent.com/30379522/271685460-9d688188-e927-4581-a6b6-a3ebd13ab4d5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4Mjk3ODQsIm5iZiI6MTcyMzgyOTQ4NCwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjAtOWQ2ODgxODgtZTkyNy00NTgxLWE2YjYtYTNlYmQxM2FiNGQ1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE2VDE3MzEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZmMWI2OGM1NGE4N2E1NWJlN2I2N2I5M2ViYjRmM2M5NjNlZTIwNzMxM2EyNGQwY2I1ZjQxNjhjMTRhMjAxOTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.IZDaq-309dp7pzr9MgxmnzdpbxVRFWsYKpQNl7eaXTU)
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.
-
Product Listing:
- View a paginated list of products.
- Utilize a search feature to find specific products.
-
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.
-
Product Details:
- View detailed information about a product.
- Decide whether to edit or delete a product from the product details page.
-
Database History:
- The system maintains a history of price and stock changes for each product, allowing for tracking changes over time.
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.
Follow these instructions to get the project up and running on your local machine.
-
Clone the repository to your local machine:
git clone https://github.com/zejiran/product-catalog.git
-
Navigate to the project directory:
cd product-catalog
-
Install backend dependencies:
cd backend npm install
-
Install frontend dependencies:
cd frontend npm install
- In the
backend
directory, create a.env
file with the following content according to your MongoDB configuration:MONGO_URI=mongodb://host:password/product-catalog
-
In the
frontend
directory, you can edit theapiURL
in the code to point to your backend server:const apiURL = 'http://localhost:3001/api/products';
-
Start the Node.js backend server:
cd backend npm start
The backend will be available at
http://localhost:3001
. -
Start the Angular frontend:
cd frontend ng serve
The frontend app will be available at
http://localhost:4200
in your web browser. -
Use the application to manage your product catalog.
- MIT license
- Copyright 2023 Β© Juan AlegrΓa