# Student Registry System - Static Version

A modern, responsive student registration system built with React, TypeScript, and Tailwind CSS. This is now a fully static application that uses local storage for data persistence.

## Features

- **Student Management**: Add, edit, delete, and search students
- **Modern UI**: Built with Radix UI components and Tailwind CSS
- **Responsive Design**: Works on desktop and mobile devices
- **Data Persistence**: Uses browser local storage
- **Form Validation**: Comprehensive form validation with Zod
- **Activity Tracking**: Track all system activities
- **Reports & Analytics**: View student statistics and trends
- **Badge System**: Gamification with achievement badges

## Tech Stack

- **Frontend**: React 18, TypeScript
- **Styling**: Tailwind CSS, Radix UI
- **Forms**: React Hook Form with Zod validation
- **State Management**: TanStack Query (React Query)
- **Data Storage**: Browser Local Storage
- **Build Tool**: Vite
- **Icons**: Lucide React

## Getting Started

### Prerequisites

- Node.js (v18 or higher)
- npm or yarn

### Installation

1. Install dependencies:
```bash
npm install
```

2. Start the development server:
```bash
npm run dev
```

The application will be available at `http://localhost:5173`

### Building for Production

To build the static application for production:

```bash
npm run build
```

The built files will be in the `dist` directory and can be served by any static web server.

### Preview Production Build

To preview the production build locally:

```bash
npm run preview
```

## Data Storage

This application uses browser local storage to persist data. The following data is stored:

- **Students**: All student records with personal and academic information
- **Activities**: System activity logs
- **Badges**: User achievement badges

**Note**: Data is stored locally in your browser and will persist between sessions. To reset the data, clear your browser's local storage for this domain.

## Sample Data

The application automatically generates 25 sample students on first load to demonstrate the features. You can:

- Add new students through the registration form
- Edit existing student information
- Delete students (with confirmation)
- Search and filter students by various criteria

## Deployment

Since this is a static application, it can be deployed to any static hosting service:

- **Netlify**: Drag and drop the `dist` folder
- **Vercel**: Connect your Git repository
- **GitHub Pages**: Push the `dist` folder to a `gh-pages` branch
- **AWS S3**: Upload the `dist` folder contents to an S3 bucket
- **Any web server**: Serve the `dist` folder contents

## File Structure

```
client/
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/              # Page components
│   ├── lib/                # Utilities and services
│   │   ├── static-data-service.ts  # Local storage data service
│   │   ├── queryClient.ts          # Mock API client
│   │   └── sample-data.ts          # Sample data generation
│   └── hooks/              # Custom React hooks
├── index.html              # Entry HTML file
└── ...
shared/
└── schema.ts               # TypeScript type definitions
```

## Browser Compatibility

This application works in all modern browsers that support:
- ES2020+ features
- Local Storage API
- CSS Grid and Flexbox

## License

MIT License