NexGen WebApp

Frontend application for the NexGen Society Management Platform, a multi-tenant SaaS system designed to manage residential societies, staff, and residents through a centralized digital platform.

The application is built using React 19, TypeScript, Vite, TailwindCSS, and modern state/data management libraries.

Features

Dashboard

• Society analytics
• Attendance insights
• Visual reports using charts

User Management

• Staff and resident management
• Role-based access UI
• Profile and account management

Attendance Monitoring

• Staff attendance tracking
• Late check-in detection
• Attendance reports and charts

Forms & Validation

• Form management using React Hook Form
• Schema validation using Zod

Data Fetching

• Server state management using React Query
• API communication using Axios

State Management

• Lightweight global state using Zustand

UI

• Responsive UI with TailwindCSS
• Icons using Lucide React
• Alerts using SweetAlert2
• Data visualization using Recharts

Tech Stack

Category	Technology
Framework	React 19
Language	TypeScript
Build Tool	Vite
Styling	TailwindCSS
Routing	React Router
Forms	React Hook Form
Validation	Zod
Data Fetching	TanStack React Query
HTTP Client	Axios
State Management	Zustand
Charts	Recharts
Icons	Lucide React

Installation

Clone the repository:

git clone https://github.com/dee-raj/NexGen-WebApp.git
cd NexGen-WebApp

Install dependencies:

npm install

Environment Variables

Create a .env file in the project root:

VITE_API_URL=http://localhost:5000/api

Vite exposes variables prefixed with VITE_ to the frontend.

Development

Run the development server:

npm run dev

Vite will start the application with host access enabled:

http://localhost:5173

Build

Create production build:

npm run build

Preview production build locally:

npm run preview

Project Structure

Example structure:

src
│
├── api
├── assets
├── components
├── hooks
├── layouts
├── pages
├── store
├── types
├── utils
│
├── App.tsx
└── main.tsx

Linting

Run ESLint:

npm run lint

---

Deployment

Build the project:

npm run build

The production files will be generated in:

dist/

This folder can be deployed to:

• Vercel
• Netlify
• Render Static Sites
• AWS S3 + CloudFront

License

MIT License

Contributing

1. Fork the repository
2. Create a feature branch

git checkout -b feature/feature-name

3. Commit changes

git commit -m "Add feature"

4. Push and open a Pull Request