Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayushivashisth/platform-commons
"Shopping Cart App: A responsive Angular project (v12+) with Catalogue and Cart pages. Easily manage products, add to cart, and view order details. Enhance your shopping experience."
https://github.com/ayushivashisth/platform-commons
angular html json routing tailwindcss vercel
Last synced: 5 days ago
JSON representation
"Shopping Cart App: A responsive Angular project (v12+) with Catalogue and Cart pages. Easily manage products, add to cart, and view order details. Enhance your shopping experience."
- Host: GitHub
- URL: https://github.com/ayushivashisth/platform-commons
- Owner: AyushiVashisth
- Created: 2023-09-01T12:34:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-02T08:22:45.000Z (over 1 year ago)
- Last Synced: 2024-01-26T07:39:45.081Z (about 1 year ago)
- Topics: angular, html, json, routing, tailwindcss, vercel
- Language: TypeScript
- Homepage: https://angular-tailwind-cart-app.vercel.app/
- Size: 135 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
✨✨Welcome to Shopping-Cart✨✨
Create an Angular project (version 12+) with routing included. The project should have two routes - Catalogue page and Cart/Basket page.
Create a JSON file containing an array of Products/Products List with the following fields/properties - Name, Image, Weight, and Price.
On the Catalogue page, display all the products after fetching them from the JSON file. Each product should have an "Add to Cart" button below it. Clicking the "Add to cart" button should add the product to the cart, and the button UI should be replaced by a quantity control button, for example, " (-) 1 (+) ". Clicking on the (+) button should increase the quantity in the cart, and clicking on the (-) button should decrease the quantity. If the user chooses 0 in the quantity control button, the product should be removed from the cart, and the UI should revert to "Add to cart".
Show a cart icon on the Catalogue page that, when clicked, navigates to the Cart page.
On the Cart page, display the list of added products with their Name, Price, and the number of units ordered. At the end of the page, show the order total and estimated delivery date. If there are no added products, display a 'No product added' message.
Languages and Tools
Frontend
Tools
Deployed On:
**Points to remember:**
1. Ensure that the UI is responsive.
2. Place the JSON file under the assets folder.
3. Feel free to be creative with the UI design.
**Bonus Features:**
1. Add a remove button on the Cart page to remove products from the list, reflecting the change on the Catalogue page.
2. Implement a checkout/confirm order button on the Cart page. Clicking it should redirect the user to a "Confirm Order" page, displaying the order summary in a non-editable format.
### Usage
To run the project, follow these steps:
1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Run `npm install` to install the required dependencies.
4. Start the development server with `ng serve --open`.
### Languages and Tools
#### Frontend
- HTML5
- CSS3
- Angular (version 12+)
#### Backend
- Python
- Flask
- MongoDB
#### Tools
- Netlify
- Vercel
- GitHub
- NPM
- Visual Studio Code
- Postman
- Slack
### Deployment
- Frontend Deployed URL: [Shopping Cart App](https://angular-tailwind-cart-app.vercel.app/)
### Screenshots
## Catalogue
## Cart
## Order
### Languages Used :
- ◉ TypeScript : 60.1%
- ◉ HTML : 36.7%
- ◉ JavaScript : 1.9%
- ◉ CSS : 1.3%
### This report is provided by the GitHub language used stats. So, this is the total percentage of the coding languages.
# Installing :
1. Clone the repository to your local machine
2. Navigate to the project directory
3. Run `npm install` to install the required dependencies
4. Run `ng serve --open` to start the development server
### An individual project, completed in a duration of 1 day.
# Our Learnings :
On this journey, we faced many issues, but we kept motivated each other with patience.
- We learned how to write more efficient and clean code.
- Even though We also learned how to plan a project and how to execute it step by step.
- Through this Project, we have learned to effectively improve productivity.
- We also got a glimpse of using GitHub for version control.
# Contributing
### We welcome contributions to the Shopping-Cart website. If you have an idea for a new feature or have found a bug, please open an issue in the repository.
## Show your support
Give a ⭐️ if you like this project!