Fragrance Haven - E-Commerce Web Application

Developed with .NET Core 7.0 x Tailwind.CSS x React.js

Visit the live demo to explore the application.

Testers can either register for a new account or click on Admin Test or User Test button on the sign in page

This is the respository for the frontend and the repository for the backend can be found here: Fragrance Haven API

Features

For Every User:

• Registration: Users can register for a new account using reactive forms that guide them through the required details.
• Secure Login: Secure login using JSON Web Tokens (JWT) for communication between the server and client.
• Pages: Home, All Products, About Us, and FAQ pages.
• Account Management:
  • Login
  • Register
  • Update password on the My Account page.
• Shopping:
  • Add products to cart
  • Make payments on items
  • View transaction receipts
• Product Interaction:
  • Products have multiple images
  • Users can flip through product images
  • Users can view other users' reviews on each product and add their own reviews.
• Product Filtering and Sorting:
  • Filter products on the All Products page by:
    • On sale
    • With reviews
    • In stock
  • Sort products by name, price, and amount in stock.
• Pagination: Products are paginated.
• Search: Search bar for users to search available products.

For Admins (Accessed via Admin Dashboard):

• Product Management:
  • Create products
  • Delete products
  • Update products
  • Search through products to be updated
  • Add images to products
  • Delete images from products
  • Delete customer reviews on products
  • Set main picture that will be displayed first to customers
  • Add sale prices to products
• Transaction Management:
  • View transaction receipts of all users
  • Search transactions by either the customer name or receipt number
  • Refund transactions
• Analytics:
  • View analytics of sales:
    • Total revenue
    • Total gain
    • Total loss
    • Total amount of units sold
    • Total amount of units refunded
  • Analytics displayed in bar and doughnut charts.
  • Analytics can be filtered by the following time periods:
    • Today
    • Yesterday
    • Last 7 days
    • Last 30 days
    • Last 4 weeks
    • Last 3 months
    • Last 6 months
    • Last 12 months
  • Custom date period selector for analytics.

Tech Stack Description

This e-commerce application harnesses the power of modern technologies to provide a seamless user experience:

Frontend:

• React: Driving the client-facing aspect of the application, React offers a flexible and efficient framework for building dynamic user interfaces. With React, components are reusable and state management is simplified, facilitating the development of interactive single-page applications.

• Tailwind CSS: Tailwind CSS is used for styling, providing a utility-first approach that enables rapid development and customization of the user interface. By leveraging Tailwind CSS, the application achieves a clean and modern design with minimal CSS overhead.

Backend:

• .NET Core 7: Serving as the foundation of the server-side functionalities, .NET Core 7 offers a cross-platform, high-performance framework for building scalable and reliable applications. With .NET Core, developers benefit from robust features such as asynchronous programming, dependency injection, and MVC architecture, enhancing productivity and maintainability.

• ASP.NET Core: Complementing .NET Core, ASP.NET Core is an open-source framework that facilitates the development of web applications. ASP.NET Core provides tools and libraries for building RESTful APIs, handling authentication and authorization, and interacting with databases. Its modular and lightweight nature ensures optimal performance and flexibility.

By leveraging React, Tailwind CSS, and .NET Core 7, this e-commerce application achieves a balance of performance, scalability, and maintainability, providing users with a seamless shopping experience.

Deployment Strategy

The deployment process for this application involves several steps to ensure seamless delivery:

1. Backend Deployment:

   • Dockerization: The API server, built with .NET Core, is dockerized within an Ubuntu (Linux) server environment using Docker containers.
   • Cloud Platform: The dockerized API is then deployed to Fly.io, a cloud Platform as a Service (PaaS) provider.

2. Frontend Deployment:

   • Build and Compression: The React frontend application is built and optimized for production.
   • Cloud Platform: The built frontend application is hosted on Vercel, a cloud platform optimized for hosting static sites and serverless functions.

This deployment strategy ensures efficient deployment of both the backend API and the frontend application, with automatic updates triggered by changes in the respective codebases.

Screenshots

Users

Home Page	All Products

About Us	FAQs

Product Details	My Account Page

Cart	Checkout

Payment Success	Sign In

Register	My Account Page

Admin

Modify My Account	Add Product

Edit Product	Add Photo

View Transactions	Analytics