About The Project

An eCommerce app to get started for small businesses. This application prioritizes simplicity, offering an intuitive user experience through easy navigation, a visually compelling product display, and a streamlined checkout process. View Demo

(back to top)

Built With

(back to top)

Test Accounts

Feel free to use the following test accounts to explore the features of the Demo:

Customer Accounts:

1. Username email: test1@test.com

   • Password: TestTest1

2. Username email: test2@test.com

   • Password: TestTest2

Admin Account:

• Username email: admin1@admin.com
  • Password: AdminAdmin1

Please note that these are test accounts created specifically for the demo. For security reasons, avoid using personal passwords or sensitive information.

(back to top)

Getting Started

Prerequisites

• Node.js 18 or higher: Download Node.js
• Docker: Download Docker

Installation

• Clone the repo

  git clone https://github.com/billychen0894/florist-ecommerce-app.git

• Install NPM packages, dependencies

  npm install

• Set environment variables based on .env.example
• Start the project with

  npm run dev

• Seed database with Prisma

  npx prisma seed

• Run database with docker

  docker-compose up

• View database

  npx prisma studio

(back to top)

Features

• Responsive Web Design: Ensure an optimal user experience across various devices, including desktops, tablets, and smartphones, through responsive web design.

• Product Catalog: Create a comprehensive catalog with:

  • Sorting and filtering options
  • Pagination for easy navigation

• Product Search: Implement a robust product search functionality, allowing users to quickly find products based on keywords.

• Product Details: Provide detailed product pages with:

  • Images
  • Descriptions
  • Product specifications
  • Delivery information

• Checkout Process: Facilitate a streamlined and user-friendly checkout process

• Recommended Products: Implement a simple recommendation engine that suggests related or complementary products based on product populority.

• User SignIn and SignUp: Enable secure account creation, sign-in, and account management, including a seamless SignUp process with email verification.

• Authentication and Authorization: Implement robust authentication mechanisms and set up authorization levels for roles.

• User Account Management: Allow users to efficiently manage their:

  • Orders
  • Profiles
  • Wishlists

• Password Reset: Provide a secure and straightforward process for users to reset their passwords.

• Admin Dashboard: Develop a comprehensive admin dashboard with CRUD operations for:

  • Categories
  • Products
  • Orders
  • Customer information

• Business Dashboard: Create a simplified dashboard tailored for business insights.

(back to top)

Performance Enhancements

This section highlights the significant technical upgrades and refactoring efforts that have been implemented to boost the performance of the florist eCommerce app:

• Comprehensive Cypress E2E Testing: We have fully integrated Cypress for end-to-end testing to ensure that all user flows are thoroughly tested. This robust testing framework allows us to simulate real user interactions across the entire application, helping to identify and resolve any issues before deployment. The result is a more reliable and user-friendly product, as all major functionalities are validated under near-real conditions.

• Server-Side Rendering (SSR) Optimization: We have fine-tuned SSR capabilities in Next.js, which has substantially reduced the Time to First Byte (TTFB) by approximately 6ms. This optimization has not only improved the initial load performance but also achieved perfect Lighthouse scores of 100, enhancing both user experience and SEO.

• Image Optimization: We leverage Next.js's built-in image optimization features by efficiently handling local images. This includes dynamic resizing and compression techniques that significantly enhance page load speeds without compromising image quality, thus improving overall page responsiveness.

• Server-side State Management: We've enhanced server-side state management by integrating Next.js Server Actions, which streamline workflows and eliminate the need for third-party libraries like React-Query. This shift has refined our architecture, reducing overhead and improving the scalability and maintainability of our application.

• Client-side State Management: We transitioned our client-side state management from Redux to Zustand. This move was driven by the need for a more lightweight and straightforward solution, as Redux proved to be overly complex for our needs. Zustand offers a more direct and efficient approach to state management, which has simplified our codebase and accelerated development.

These strategic enhancements have significantly increased the responsiveness and efficiency of the application, ensuring an uninterrupted and smooth user experience.

For more details on these enhancements or to report any issues, please visit our Issues page.

(back to top)