Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/firenlf2/filtercomm
A demo project for a future eCommerce website for selling Oil & Air Filters. Project is purely based around Frontend development, and is one of my first serious projects.
https://github.com/firenlf2/filtercomm
angular-cli css ecommerce-website frontend html project typescript web-development
Last synced: 3 months ago
JSON representation
A demo project for a future eCommerce website for selling Oil & Air Filters. Project is purely based around Frontend development, and is one of my first serious projects.
- Host: GitHub
- URL: https://github.com/firenlf2/filtercomm
- Owner: FirenLF2
- Created: 2024-05-05T16:45:02.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-18T14:59:19.000Z (7 months ago)
- Last Synced: 2024-10-14T05:40:24.250Z (3 months ago)
- Topics: angular-cli, css, ecommerce-website, frontend, html, project, typescript, web-development
- Language: TypeScript
- Homepage:
- Size: 13.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Filter Universe
Welcome to the Filter Universe project! This repository showcases a sample e-commerce website focused on selling various types of filters. Below are some screenshots and descriptions of key pages from the website.
## Product Listing Page
![Product Listing](src/assets/readme-images/main.jpg)
The product listing page features various filters, each with an image, name, brief description, price, and category tags. The header includes the website's logo, navigation links, and a search bar. Products displayed include different types of filters such as the Filter Bag M25-E, Oil Filter R300 Engine, Donaldson Heavy Duty Air Filter, and more, with prices and essential details provided for each item.
## Product Detail Page
![Product Detail](src/assets/readme-images/item.jpg)
The product detail view of an "Oil Filter R300 Engine" includes the product name, categories (tags for "Engine" and "Oil-Filter"), price of $25.89, a clear picture of the oil filter, and a status indicator showing that the item is "Already in Cart". This view provides essential information about the product, helping users make informed purchasing decisions.
## Shopping Cart Page
![Shopping Cart](src/assets/readme-images/cart.jpg)
The shopping cart page displays two items: the "Oil Filter R300 Engine" with a quantity of 30, totaling $776.70, and the "Filter Bag M25-E" with a quantity of 3, totaling $13.05. Each product entry includes an image, name, quantity selector, individual total price, and a delete button. A summary box on the right side indicates there are 2 items in the cart with a total price of $789.75. This layout provides a clear overview of the items in the cart and the total cost.
## Getting Started
To get started with this project, follow the instructions below:
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/filter-universe.git
```
2. **Navigate to the project directory**:
```bash
cd filter-universe
```
3. **Install dependencies**:
```bash
npm install
```
4. **Start the development server**:
```bash
npm start
```## Languages Used
This project was built using the following languages and tools:![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)