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)