Build an Online Gift store in Angular

Creating an online gift store using Angular is a great way to showcase your web development skills. Angular provides a robust framework for building dynamic, responsive, and feature-rich web applications. This article will guide you through the process of setting up a basic online gift store using Angular.

We will create an online gift store where users can browse products, add them to their cart, and proceed to checkout. The cart's contents will be saved in the local storage to persist across page refreshes

Project Preview

Prerequisites

• Node.js (v16 or higher)
• Angular CLI (v17.3.8)
• TypeScript (v5.4.2)

Functionalities

We will build an online gift store with the following functionalities:

• Product Listing: Display a list of products fetched from a service.
• Add to Cart: Add products to the cart and persist the cart in local storage.
• Search and Sort: Allow users to search and sort the product list.
• Cart Management: View, remove items from the cart, and clear the cart.
• Checkout: Proceed to checkout and clear the cart.

Steps to Create Online Gift Store

Step 1: Set Up AngularJS Environment

1. Install Angular CLI

npm install -g @angular/cli

2. Create a new directory for your project and navigate into it.

ng new online-gift-store-gfg --standalone
cd online-gift-store-gfg

3. Install Required Dependencies

npm install @angular/forms json-server tailwindcss postcss

4. Configure TailwindCSS and PostCSS:

Create a tailwind.config.js file in the root directory by using the following command and add the following code in the file.

npx tailwindcss init

module.exports = {
 content: ['./src/**/*.{html,ts}'],
 theme: {
 extend: {},
 },
 plugins: [],
};

5. Create a postcss.config.js(src/postcss.config.js) file in the root directory:

module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
};

6. Add TailwindCSS to your styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2. Generate Components and Services

ng generate component navbar --standalone
ng generate component product-list --standalone
ng generate component product-detail --standalone
ng generate component cart --standalone
ng generate component checkout --standalone
ng generate service services/product
ng generate service services/cart

Dependencies

 "dependencies": {
 "@angular/animations": "^17.3.0",
 "@angular/cdk": "^17.3.10",
 "@angular/common": "^17.3.0",
 "@angular/compiler": "^17.3.0",
 "@angular/core": "^17.3.0",
 "@angular/forms": "^17.3.0",
 "@angular/material": "^17.3.10",
 "@angular/platform-browser": "^17.3.0",
 "@angular/platform-browser-dynamic": "^17.3.0",
 "@angular/router": "^17.3.0",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
},
"devDependencies": {
 "@angular-devkit/build-angular": "^17.3.8",
 "@angular/cli": "^17.3.8",
 "@angular/compiler-cli": "^17.3.0",
 "@types/jasmine": "~5.1.0",
 "autoprefixer": "^10.4.19",
 "jasmine-core": "~5.1.0",
 "karma": "~6.4.0",
 "karma-chrome-launcher": "~3.2.0",
 "karma-coverage": "~2.2.0",
 "karma-jasmine": "~5.1.0",
 "karma-jasmine-html-reporter": "~2.1.0",
 "postcss": "^8.4.39",
 "tailwindcss": "^3.4.4",
 "typescript": "~5.4.2"
}

Folder Structure

Example: Create the required files as seen in the folder structure and add the following codes.

Steps to Run the Application

1. Install json-server in your system globally or in the project using the command

npm install -g json-server

or for install it locally use

npm install json-server --save-dev

2. Go to the src folder and run the following command to star the json server.

cd src
json-server --watch db.json

3. And then in another terminal run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output