https://github.com/mkaczmarski07/e-commerce

Full-Stack E-Commerce web application built on Angular 16 & Firebase
https://github.com/mkaczmarski07/e-commerce

angular angular-fire firebase-auth firebase-database firebase-hosting rxjs typescript

Last synced: 21 days ago
JSON representation

Full-Stack E-Commerce web application built on Angular 16 & Firebase

• Host: GitHub
• URL: https://github.com/mkaczmarski07/e-commerce
• Owner: MKaczmarski07
• License: mit
• Created: 2023-10-10T14:43:17.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-17T18:39:43.000Z (over 2 years ago)
• Last Synced: 2023-12-17T22:10:32.440Z (over 2 years ago)
• Topics: angular, angular-fire, firebase-auth, firebase-database, firebase-hosting, rxjs, typescript
• Language: TypeScript
• Homepage:
• Size: 964 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# About The Project

The following project is a real-time E-commerce web application, implemented with Angular & Firebase Cloud. 

The application allows users to experience the full purchasing process - from browsing products to placing an order.

### Learning Objectives

- Through this project, I wanted to better understand Frontend-Backend communication using REST API and connect asynchronous data with UI. 


- The majority of code focuses on Frontend side of the application, while backend features are handled by Firebase. 


- Apart from the Angular, the project heavily utilizes RxJS library and Observer Pattern. 


- User interface is optimized for all types of devices. 


### Used Technologies

[![My Skills](https://skillicons.dev/icons?i=angular,typescript,rxjs,sass,tailwind,firebase)](https://skillicons.dev)

### Application Features

🔷 Token-based user authentication, based on Firebase. 

🔷 Fetching and displaying product data stored in the cloud NoSQL database. 

🔷 Displaying selected product categories. 

🔷 Sorting products. 

🔷 Adding new products to the store using the administration panel. 

🔷 Adding items to cart. 

🔷 Adding items to favorites. 

🔷 Simulation of the product ordering process. 

## User Interface

#### Landing page

![home](https://github.com/user-attachments/assets/c12cf253-c4de-4096-a5bc-c70221ba308c)

#### Adding product to the cart

![product](https://github.com/user-attachments/assets/d7d30d07-80c1-464f-8e58-917ad099b4c0)

#### Cart details

![cart](https://github.com/user-attachments/assets/853dca67-9117-4bcb-b9e4-f0a6a8475cb9)

#### Delivery details

![data](https://github.com/user-attachments/assets/70aa1f90-b4a4-4ffa-9e49-91de25ee0304)

## Installation Guide ⚙️

Here's a step-by-step guide to help you get started with the project.

### Prerequisites

Before you begin, make sure you have the following installed on your machine:

- Node.js (version 18.0 or later)

- npm package manager (version 8.0 or later)

### Installation

Let's start with installing all dependencies. Move to the app main workspace and run:

    npm i

To create a localhost port you should type:

    ng serve

Your application is ready at port 4200.

    http://localhost:4200/

## License and Copyrights 📜

- All products in the store are created for presentation purposes and do not constitute a sales offer

- Product photos were created by me for this project