Skip to content

Developed Angular SPA for e-commerce site with product listings, cart management, and checkout.

Notifications You must be signed in to change notification settings

PratibhaAwasthi/Market-Place

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Marketplace - Angular Single Page Application

Project Goal:

The goal of this project is to develop a single-page application using Angular, which allows users to browse a list of products, add products to their cart, view their cart, delete products from their cart, and checkout their products.

Scope:

The project will focus heavily on frontend development and will involve building components, rendering views, and managing data. The main functionalities of the application include viewing a list of products, adding products to a cart, viewing products in a cart, deleting products from a cart, and checking out products in a cart.

Functionality:

The Marketplace application will have the following functionality:

  • View list of products: Users will be able to browse a list of products, with details such as product name, description, image, and price.

  • Add products to cart: Users will be able to add products to their cart by clicking on a "Add to Cart" button. The cart will display the products added, along with their price and quantity.

  • View products in cart: Users will be able to view the products in their cart at any time, along with their price and quantity.

  • Delete product from cart: Users will be able to remove products from their cart by clicking on a "Delete" button.

  • Checkout products in cart: Users will be able to checkout their products, which will take them to a payment page. The payment page will include details such as the total price, shipping address, and payment method.

Timeline:

The project is completed in a week timeline.

Week 1: Planning and Design

  • Identify project requirements
  • Create wireframes and mockups for the application

Week 2: Frontend Development

  • Create the project structure and setup development environment
  • Develop the frontend using Angular, implementing the required components and functionality
  • Integrate with the backend RESTful APIs using Http Client Module
  • Implement user authentication and authorization using JSON Web Tokens (JWT) and protected routes

Week 3: Testing and Debugging

  • Conduct unit testing and integration testing of the application
  • Identify and fix any bugs or issues
  • Optimize the performance of the application by implementing lazy loading and optimizing data manipulation using RxJS observables and operators, resulting in 20% faster processing and improved user experience.

Week 4: Deployment and Launch

  • Deploy the application to a environment
  • Conduct final testing and ensure the application is fully functional

Run

Install Dependencies

To run the project, fork this repository and run the following command in a terminal in the root directory:

npm install

Start server

To start the server, run the following command on the same terminal:

ng serve

Go to 'http://localhost:4200/' in your web browser to access the application. If you make any changes to the source files, the program will reload automatically.

Built With

  • Angular(framework, Router)
  • NodeJs
  • Npm
  • RxJS
  • Http Client Module
  • Typescript
  • Jasmine (for unit testing)