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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5MDM1ODksIm5iZiI6MTcxNzkwMzI4OSwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjItMmRjYmMyYWMtNzc5YS00MjU0LWEwM2QtY2Q4OWYyMjFiZjRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA5VDAzMjEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMyMDk5NDk2MDM0ZjhiYzQ4MjZhYTc1ODZiNmFlZmEwZDZjMmFhNGJmOGI0OWU5NGJhMzIxNWZmNDA3NDM0OGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.S2eYdkKHNjmV8oIIKwFR2emDSyXc9F_kMM4FqZ2kfH4)
![detail](https://private-user-images.githubusercontent.com/30379522/271685467-aaa1806b-bfa5-471a-9b50-08fd466a1ef0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5MDM1ODksIm5iZiI6MTcxNzkwMzI4OSwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjctYWFhMTgwNmItYmZhNS00NzFhLTliNTAtMDhmZDQ2NmExZWYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA5VDAzMjEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWExMTM3NmNlNzY2NTlmOTZkZWM5NDg4OTA0ZDUyYmQxZGZlMDlhMWY2YzFkZWE0MGQ3YzNmZGE0YmU0MzZkMjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.jyz6yGBZn_gSHcDFIS_7B4qaeNVek3gE0N4e6VNQAWM)
![create](https://private-user-images.githubusercontent.com/30379522/271685460-9d688188-e927-4581-a6b6-a3ebd13ab4d5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5MDM1ODksIm5iZiI6MTcxNzkwMzI4OSwicGF0aCI6Ii8zMDM3OTUyMi8yNzE2ODU0NjAtOWQ2ODgxODgtZTkyNy00NTgxLWE2YjYtYTNlYmQxM2FiNGQ1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA5VDAzMjEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRlYjE0OTA5YWJjMmU4YmFkZjJmNTNkZDhiY2I5NTlmODIyMzE4YzIyNTM4ODI4NDRhODM5ZWFjOTBlZGU4YzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.e3Ondu0lqySizq4HF0uWoinKXvnr483xjn5olRVPRZs)
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