Frontend Overview

The ResQConnect frontend is a modern web application built with Next.js 15, designed to provide a responsive and intuitive interface for users, admins, and responders. It leverages Tailwind CSS for styling and Shadcn/UI for accessible, pre-built components.

Technology Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn/UI
• State Management: React Context & Hooks
• Data Fetching: Custom Service Layer (Axios)
• Authentication: Firebase Auth
• Maps: Leaflet (via react-leaflet)
• Forms: React Hook Form + Zod

Getting Started

Prerequisites

• Node.js: v18 or higher
• npm: v9 or higher

Installation

1. Navigate to the frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Set up environment variables: Create a .env.local file in the frontend root and add your Firebase and API configurations.

   NEXT_PUBLIC_API_URL=http://localhost:8000
   NEXT_PUBLIC_FIREBASE_API_KEY=...
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
   # ... other firebase config
   

Running Locally

Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Scripts

• npm run dev: Runs the app in development mode.
• npm run build: Builds the app for production.
• npm run start: Starts the production server.
• npm run lint: Runs ESLint to check for code quality issues.