Node project

Welcome to our manga shop website E-Ragana! This project is a responsive e-commerce platform for manga enthusiasts, featuring advanced filtering, sorting, and browsing capabilities for a wide variety of manga titles.

---

Table of contents

• Project Description
• Features
• Screenshots
• Installation
• Usage Guide
• Technologies Used
• Contributing
• License

---

Project description

The E-Ragana website is a modern and dynamic e-commerce platform designed to provide manga enthusiasts with an intuitive and engaging shopping experience. Users can browse, search, and filter manga titles by genre, demographics, type, and price while viewing detailed product pages.

This project was built using Angular for the frontend, with Node.js and Express for the backend API. Data is stored in a PostgreSQL database.

---

Features

• User-Friendly Interface: Intuitive design with responsive layouts.
• Dynamic Product Display: Display the top 100 manga dynamically.
• Product Details: Detailed product pages with images, pricing, and descriptions.
• Search Functionality: Quickly find manga by name or author.
• Filtering and Sorting: Filter by genre, demographics, and type; sort by name, price, or score.
• Secure Backend: Node.js API with PostreSQL database integration.
• Product Management: Update, delete, list, and download (in a csv file) products via the admin page.
• Swagger API Documentation: Explore and test API endpoints via Swagger UI.

---

Screenshots

Home Page

Shop Page (Product List)

Shop Page (Product Filters)

Product Page

Product Stats with Highcharts (Genre, Demographics, Types)

About Page

Contact Page

Cart Page

Admin Page (CRUD with AG Grid)

API Documentation Swagger (http://localhost:3000/api-docs/)

---

Installation

Prerequisites

• Node.js (v14+)
• Angular CLI
• PostgreSQL

Steps

1. Clone the repository:

   git clone https://github.com/leinapr/Node_Project.git
   cd Node_Project

2. Setup backend:

   cd Node_Project/backend
   npm install

   • Create a .env file and configure the database connection:

     DB_HOST=localhost
     DB_USER=your_postgres_user
     DB_PASSWORD=your_postgres_password
     DB_NAME=ecommerce
     DB_PORT=5432

   • Initialize the database:

     psql -U your_postgres_user -d ecommerce -c "CREATE TABLE products (id SERIAL PRIMARY KEY, name TEXT, type TEXT, score FLOAT, status TEXT, volumes INT, genres TEXT[], demographics TEXT[], authors TEXT[], description TEXT, image TEXT, url TEXT, price FLOAT);"
     psql -U your_postgres_user -d ecommerce -c "COPY products (id, name, type, score, status, volumes, genres, demographics, authors, description, image, url, price) FROM '/your/path/manga.csv' DELIMITER ';' CSV HEADER;"

   • Start the backend server:

     node server.js

3. Setup frontend:

   cd Node_Project/frontend/ecommerce-frontend
   npm install

   • Install highcharts

     npm install highcharts
     npm install --save-dev @types/highcharts

   • Start the frontend server:

     ng serve

4. Open the application in your browser at http://localhost:4200.

---

Usage guide

Admin Page

The Admin Page enables CRUD operations on the product database through AG Grid. Key features include:

• View Products: Display the products in a table.
• Edit Existing Products: Modify product details inline or in a popup editor.
• Delete Products: Remove products from the database.
• Export Products in a csv file: Click on a button to download a csv file containing the products.

Shop Page

• Browsing products: Browse through the list of manga titles. By default, the top 100 products are displayed.
• Filtering products: Use the dropdowns to filter by:
  • Genre: Action, Adventure, Drama, etc.
  • Demographics: Shonen, Seinen, Shojo, etc.
  • Type: Manga, Novel, Light Novel, etc.
  • Price Range.
• Sorting products: Sort the products by Name, Price, or Score.

Product Page

• Viewing product details: Click on any product to view its detailed information. Product details include the title, price, genre, demographics, type, and rating.
• Adding Products to the Cart: Click on the button 'Add to Cart' to add a product to the cart or click on 'Buy Now' to purchase the product directly. This will redirect you to the 'Cart' page.

Contact Page

• Enter your name.
• Enter your email address.
• Write your message.
• We will reply to you as soon as possible.

About Page

• Navigate to this page to know more about us.

Cart Page

The Cart Page provides essential e-commerce functionalities for managing selected products before checkout. Key features include:

• Add Products: Items added from the shop are displayed in the cart for review.
• Remove Products: Users can remove unwanted items from the cart.
• Update Quantities: Adjust the quantity of each product directly within the cart.
• Apply Promo Code (DISCOUNT10): Users can enter a valid promotional code to receive discounts on their total purchase.
• Cart Summary: Displays a breakdown of the cart, including individual item prices, subtotal, discounts, and the final total.

For more information, download and watch the E_ragana users guide video available on the repository.

---

API Documentation

CRUD Endpoints

• GET /products: Fetch all products.
• GET /api/product/:id: Fetch a specific product by ID.
• POST /products: Add a new product.
• PUT /products/:id: Update an existing product.
• DELETE /products/:id: Remove a product.

We can test see these endpoints using Swagger UI

---

Technologies Used

Frontend

• Angular (v15+)
• TypeScript
• Bootstrap for responsive design

Backend

• Node.js
• Express
• MySQL for data storage
• Sequelize ORM

---

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your feature/fix:

   git checkout -b feature-name

3. Commit your changes and push to your fork.
4. Submit a pull request.

---