📊 Traqfoot Frontend

Traqfoot is a footfall monitoring application built with the MERN stack. This repository contains the frontend built using React.js with Vite, enabling infrastructure admins to monitor real-time sensor data, view analytics, and manage device status.

---

🔧 Tech Stack

• ⚛️ React.js (with TypeScript)
• ⚡ Vite (build tool)
• 🧠 Redux Toolkit (state management)
• 🌐 Axios (HTTP requests)
• 🎨 Tailwind CSS v4 (styling)
• ✅ Formik (form validation)
• 🎞️ Framer Motion (UI animation)
• 🔔 Sonner (toast notifications)
• 🐳 Docker (containerized deployment)

---

📁 Folder Structure

/traqfoot-frontend
│
├── public/               # Static files (logo, favicon)
├── src/
│   ├── assets/           # Logos, icons
│   ├── components/       # Reusable UI components
│   ├── configs/          # App-wide constants & interfaces
│   ├── Formik/           # Form validation logic
│   ├── HOC/              # Protected and guest routes
│   ├── pages/            # Page-level components (Login, Dashboard, etc.)
│   ├── redux/            # Redux slices and store
│   ├── services/         # Axios API requests
│   ├── style/            # Tailwind and global styles
│   ├── App.tsx           # Root app with router
│   ├── main.tsx          # React app entry point
│   └── vite-env.d.ts
│
├── Dockerfile            # Docker config for production build
├── docker-compose.yml    # Docker Compose config (optional multi-service setup)
├── .dockerignore         # Files excluded from Docker image
├── .env                  # Environment variables
├── .gitignore            # Git ignored files
├── eslint.config.js      # ESLint configuration
├── index.html            # HTML entry point
├── vite.config.ts        # Vite + Tailwind config
├── vercel.json           # Vercel routing config
│
├── tsconfig.json         # TypeScript base config
├── tsconfig.app.json     # App-specific TypeScript config
├── tsconfig.node.json    # Node-specific TypeScript config
│
├── package.json          # Dependencies and scripts
├── yarn.lock             # Yarn lockfile
└── README.md             # Project documentation

---

🔑 Features

• 🛡️ Protected Routing using Redux + HOCs
• 📊 Real-time Footfall Dashboard (Sensor data updates hourly)
• 📍 Sensor Details Page with live count and status
• 👤 Infrastructure Profile Management
• 🔒 JWT-based authentication with persistent login
• 📱 Fully responsive layout with modern UI
• 🐳 Docker support for seamless deployment

---

🚀 Getting Started

📋 Prerequisites

• Node.js (v18+)
• Yarn
• Backend server running (e.g., Render)
• Docker (for containerized setup, optional)

📥 1. Clone the Repository

git clone https://github.com/syam-ts/Traqfoot-Frontend.git
cd Traqfoot-Frontend

📦 2. Install Dependencies

yarn install

⚙️ 3. Create .env File

touch .env

Add the following variable:

VITE_FRONTEND_URL=https://traqfoot.yourUrl.app
VITE_BACKEND_URL=https://traqfoot-backend.yourUrl.com

▶️ 4. Run the Development Server (Non-Docker)

yarn dev

App will be available at http://localhost:5173

---

🐳 Running with Docker

Make sure your .env file is correctly set up before building the image.

1. Build the Docker Image

docker build -t traqfoot-frontend .

2. Run the Container

docker run -d -p 5173:80 traqfoot-frontend

App will be running at http://localhost:5173

⚙️ Optional: Using Docker Compose

Add the following docker-compose.yml:

version: '3.8'
services:
traqfoot-frontend:
build: .
ports:
- '5173:80'
env_file:
- .env
restart: unless-stopped

Then run:

docker-compose up --build

Note: Ensure your backend is reachable via VITE_BACKEND_URL when running inside Docker.