Bookstore Ecommerce App using MEAN Stack

//index.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const Book = require('./Book');
const bookRoutes = require('./bookRoutes');

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(express.json());
app.use(cors());

// MongoDB connection
mongoose.connect('Your mongo DB link',
    { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.error(err));

// Seed the database on server startup
const seedDatabase = async () => {
    try {
        await Book.deleteMany();
        const books = require('./data.json');
        await Book.insertMany(books);
        console.log('Database seeded successfully');
    } catch (error) {
        console.error('Error seeding database:', error);
    }
};

seedDatabase();

// Routes
app.use('/api/books', bookRoutes);

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

//book.js

const mongoose = require('mongoose');

const bookSchema = new mongoose.Schema({
    title: String,
    author: String,
    genre: String,
    description: String,
    price: Number,
    image: String
});

const Book = mongoose.model('Book', bookSchema);

module.exports = Book;

//bookRoutes.js

const express = require('express');
const Book = require('./Book');
const router = express.Router();

router.get('/', async (req, res) => {
    try {
        const allBooks = await Book.find();
        res.json(allBooks);
    } catch (error) {
        console.error(error);
        res.status(500)
            .json({ error: 'Internal Server Error' });
    }
});

module.exports = router;

//data.json
[
    {
        "title": "The Great Gatsby",
        "author": "F. Scott Fitzgerald",
        "genre": "Fiction",
        "description": "A classic novel about the American Dream",
        "price": 20,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011815/sutterlin-1362879_640-(1).jpg"
    },
    {
        "title": "To Kill a Mockingbird",
        "author": "Harper Lee",
        "genre": "Fiction",
        "description": "A powerful story of racial injustice and moral growth",
        "price": 15,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011854/reading-925589_640.jpg"
    },
    {
        "title": "1984",
        "author": "George Orwell",
        "genre": "Dystopian",
        "description": "A dystopian vision of a totalitarian future society",
        "price": 255,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011929/glasses-1052010_640.jpg"
    },
    {
        "title": "The Great Gatsby",
        "author": "F. Scott Fitzgerald",
        "genre": "Fiction",
        "description": "A classic novel about the American Dream",
        "price": 220,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011929/glasses-1052010_640.jpg"
    },
    {
        "title": "To Kill a Mockingbird",
        "author": "Harper Lee",
        "genre": "Fiction",
        "description": "A powerful story of racial injustice and moral growth",
        "price": 1115,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011929/glasses-1052010_640.jpg"
    },
    {
        "title": "1984",
        "author": "George Orwell",
        "genre": "Dystopian",
        "description": "A dystopian vision of a totalitarian future society",
        "price": 125,
        "image": "https://media.geeksforgeeks.org/wp-content/
            uploads/20240110011929/glasses-1052010_640.jpg"
    }
]

//components/header-product.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HeaderCartService } from '../services/header-cart.service';
import { Book } from '../models/book.model';

@Component({
    selector: 'app-header-product',
    template: `
    <nav class="navbar">
      <div class="navbar-brand">
        <span class="navbar-item">
            GFG Bookstore by Ashish Regmi</span>
      </div>
    </nav>

    <!-- Header template -->
    <div class="header">
        <!-- Filter and Sort options -->
        <div class="options">
            <div class="filter-options">
                <label for="minPrice">Min Price:</label>
                <input type="number" id="minPrice" 
                [(ngModel)]="minPrice">
                <label for="maxPrice">Max Price:</label>
                <input type="number" id="maxPrice" 
                [(ngModel)]="maxPrice">
                <button (click)="filterProducts()">Filter</button>
  
                <label for="sort">Sort by:</label>
                <select id="sort" [(ngModel)]="sortBy"
                 (change)="sortProducts()">
                    <option value="priceLowToHigh">
                        Price: Low to High</option>
                    <option value="priceHighToLow">
                        Price: High to Low</option>
                </select>
            </div>
        </div>

        <!-- Cart -->
        <div class="cart" (click)="toggleCart() ">
            <span>Cart ({{ cartItems.length }})</span>
            <div *ngIf="showCart" class="cart-items"
             (click)="preventClose($event)">
                <div *ngFor="let item of cartItems">
                    <p>{{ item.title }} - {{ item.price }}</p>
                    <button (click)="removeFromCart(item)">Remove</button>
                </div>
                <div>Total Price: {{ calculateTotalPrice() }}</div>
            </div>
        </div>
    </div>

    <!-- Product list template -->
    <div class="product-list">
        <div *ngFor="let product of filteredProducts" class="product-card">
            <img [src]="product.image" alt="Book Cover">
            <div class="product-details">
                <h3>{{ product.title }}</h3>
                <p>{{ product.description }}</p>
                <p>Price: {{ product.price }} Rs</p>
                <button (click)="addToCart(product)">Add to Cart</button>
            </div>
        </div>
    </div>
  `,
    styleUrls: ['./header-product.component.css']
})
export class HeaderProductComponent implements OnInit {
    products: Book[] = [];
    cartItems: Book[] = [];
    showCart: boolean = false;
    totalPrice: number = 0;
    minPrice: number = 0;
    maxPrice: number = 0;
    filteredProducts: Book[] = [];
    sortBy: string = 'priceLowToHigh';

    constructor(private http: HttpClient,
        private cartService: HeaderCartService) { }

    ngOnInit(): void {
        // Fetch products from the backend
        this.http.get<Book[]>('http://localhost:5000/api/books')
            .subscribe(products => {
                this.products = products;
                this.filteredProducts = products;
            });

        // Subscribe to changes in the cart
        this.cartService.cart$.subscribe(cartItems => {
            this.cartItems = cartItems;
        });
    }

    addToCart(product: Book) {
        this.cartService.addToCart(product);
        this.calculateTotalPrice();
    }

    removeFromCart(product: Book) {
        this.cartService.removeFromCart(product);
        this.calculateTotalPrice();
    }

    toggleCart() {
        this.showCart = !this.showCart;
    }

    calculateTotalPrice(): number {
        return this.cartItems.reduce((total, item) =>
            total + item.price, 0);
    }

    filterProducts() {
        this.filteredProducts = this.products.filter(product => {
            return product.price >= this.minPrice &&
                product.price <= this.maxPrice;
        });
        this.sortProducts();
    }

    sortProducts() {
        if (this.sortBy === 'priceLowToHigh') {
            this.filteredProducts.sort((a, b) => a.price - b.price);
        } else if (this.sortBy === 'priceHighToLow') {
            this.filteredProducts.sort((a, b) => b.price - a.price);
        }
    }

    preventClose(event: MouseEvent) {
        event.stopPropagation();
    }
}

// models/book.model.ts

export interface Book {
    _id: string;
    title: string;
    author: string;
    genre: string;
    description: string;
    price: number;
    image: string;
}

// services/header-cart.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Book } from '../models/book.model';

@Injectable({
    providedIn: 'root'
})
export class HeaderCartService {
    private cart: Book[] = [];
    private cartSubject = new BehaviorSubject
    <Book[]>(this.cart);
    cart$ = this.cartSubject.asObservable();

    constructor(private http: HttpClient) { }

    addToCart(book: Book) {
        this.cart.push(book);
        this.cartSubject.next(this.cart);
    }

    removeFromCart(book: Book) {
        const index = this.cart.findIndex
        (item => item._id === book._id);
        if (index !== -1) {
            this.cart.splice(index, 1);
            this.cartSubject.next(this.cart);
        }
    }
}

// client/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <app-header-product></app-header-product>
  `,
})
export class AppComponent { }

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderProductComponent } from './components/header-product.component';
import { HeaderCartService } from './services/header-cart.service';

@NgModule({
    declarations: [
        AppComponent,
        HeaderProductComponent
    ],
    imports: [
        BrowserModule,
        FormsModule, // Add FormsModule here
        HttpClientModule
    ],
    providers: [HeaderCartService],
    bootstrap: [AppComponent]
})
export class AppModule { }

// client/src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));