HANDL — Frontend

//IN PROGRESS//

Frontend repository for HANDL, a full-stack web app that helps users create, manage, and share shopping lists in real time. Whether you're planning groceries solo or coordinating with family, HANDL keeps everything in sync across devices.

🌐 Tech Stack

• Framework: Javascript & React (with Vite)
• Styling: Vanilla CSS
• Routing: React Router
• State/Data Handling:
  • TanStack Query (React Query)
  • Axios (REST API integration)
• UI Libraries:
  • Mostly custom
  • Material UI
  • Lucide Icons
  • hamburger-react
• Animations: Framer Motion

🚀 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• Backend API (see Handl Backend)

Installation

git clone https://github.com/gitXite/handl_frontend.git
cd handl_frontend
npm install

The app can be installed locally as a progressive web app (PWA).

Environment Setup

Create a .env file in the root:

VITE_API_URL=http://localhost:5000

Running the App

npm run dev

The app will be available at http://localhost:3000.

📁 Project Structure

handl_frontend/
├── public/
|    ├── favicon/
|    ├── robots.txt
|    ├── site.webmanifest
├── src/
|    ├── assets/         # Static files
|    ├── components/     # Reusable UI components
|    ├── context/        # Global context providers
|    ├── hooks/          # Custom React hooks
|    ├── pages/          # Route-based pages
|    ├── services/       # Reusable service functions
|    ├── utils/          # Utility functions
|    ├── App.jsx         # App
|    ├── axiosConfig.js
|    ├── index.css       # Global styling
|    ├── main.jsx        # Entry point
├── .env.example
├── index.html
├── README.md
├── jsconfig.json
├── package.json
├── vite.config.js

🔒 Authentication

Uses cookie-based sessions via backend (Passport + express-session).

Axios is configured to send credentials (withCredentials: true).

🔄 Real-time Features

Server-Sent Events (SSE) for real-time list updates and sharing

📦 Deployment

When deploying, make sure to point VITE_API_URL to your hosted backend.