HelTech Online Shop

Frontend webshop built with React, TypeScript, and Vite.

Live Site: HelTech Online Shop

Project Planning: GitHub Projects

About

This project was developed as part of a school assignment and is a collaboration between two students.

The main focus was learning modern frontend development while keeping the stack simple and using as few libraries as possible.

The application includes a complete webshop flow, with global state management using Zustand.

Features

• Product listing and details
• Shopping cart functionality
• Checkout flow with success page
• Contact page
• Routing and 404 handling
• Responsive design

Tech Stack

• Frontend: React, TypeScript, Vite
• Routing: React Router
• State Management: Zustand
• Testing: Vitest, React Testing Library
• Tooling: ESLint, Prettier, npm, Git
• Deployment: Netlify

Getting Started

1. Clone the repository:

   git clone https://github.com/Torehirth/HelTech.git
   cd HelTech

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Create production build
npm run preview	Preview production build
npm run test	Run tests
npm run lint	Run ESLint
npm run format	Format code with Prettier

Project Structure

• components – Reusable UI components
• features – Pages and feature logic
• hooks – Custom React hooks
• styles – Global styles
• types – TypeScript definitions
• utils – Helper functions
• store – Zustand state management

Collaboration

HelTech was developed by two students, with an emphasis on collaboration using Git and GitHub, reusable components, and maintaining a clear project structure.

The project provided practical experience with React, TypeScript, state management, automated testing, and working together on a shared codebase.