/holistic-health-haven-fe1

Personal Project, build an e-commerce website consisting of holistic health products, learning TS + PERN stack

Primary LanguageTypeScript


Logo
Table of Contents
  1. About The Project
  2. Built With
  3. Setup
  4. Installation
  5. Usage
  6. Roadmap
  7. Acknowledgments
  8. Contact

About The Project

This is an e-commerce web application built to provide a curated selection of holistic health products for purchase, offering a seamless and user-friendly shopping experience.

Many individuals struggle to find natural and sustainable products that truly support their well-being. Holistic Health Haven addresses this need by offering organic remedies, herbal supplements, and mindfulness tools designed to empower users to embrace a balanced, conscious lifestyle.

This full-stack project demonstrates modern web development practices using the PERN stack (PostgreSQL, Express, React, Node.js) and TypeScript. It serves both as a practical solution for holistic product retail and a learning endeavor to deepen my understanding of full-stack web development.

Built With

  • Figma
  • Canva
  • Miro
  • TypeScript
  • React
  • React Router
  • Axios
  • Context API
  • Tailwind CSS
  • Formik
  • Stripe
  • ESLint
  • Vercel

(back to top)

Setup

Link to: Back End

View Miro

View Figma

(back to top)

Installation

  1. Clone down frontend repository:
https://github.com/alinix1/holistic-health-haven-fe1.git
  1. Install npm packages:

npm install or npm i

  1. cd into directory and run:

npm start

Usage

(back to top)

Image Image Image Image Image Image Image

Feature Overview

  • UI/UX Features:
    • Carousel using Flowbite
    • Controlled form using Formik
    • Dropdown menu of ailments
    • Search bar
    • Cart dropdown menu
    • Accordion
    • Modal
    • Tailwind CSS animations

  • Payment Integration:
    • Stripe integration for payment

  • Testing and Quality:
    • ESLint configuration

  • Pages:
    • Holistic products page
    • Holistic details page
    • Testimonials page
    • Review page
    • About page
    • Privacy policy page
    • Terms & conditions page
    • Checkout page
    • Payment page
    • Bad URL page

Wins:

  • Successfully implemented a full-stack application
  • Successfully integrated Stripe for a one-time payment
  • Achieved responsive web design using Tailwind CSS

Challenges:

  • Gaining deeper familiarity with TypeScript
  • Refining design architecture for React components and database schema (ERD)

(back to top)

Roadmap

  • End-to-end testing using Playwright
  • Unit and integration testing using React Testing Library
  • Email subscription, login, and authorization/authentication

Contact

Ali Nix | LinkedIn

(back to top)