Tea Spill - Student Complaint Portal

A beautiful, modern student complaint portal built with React and TypeScript, featuring an interactive gradient background using WebGL.

Features

• 🎨 Interactive Gradient Background: Beautiful animated gradient blinds effect using OGL (WebGL)
• 📝 Complaint Submission: Easy-to-use form for submitting complaints
• 🔒 Anonymous Submissions: Option to submit complaints anonymously
• 📊 Dashboard: Real-time statistics and complaint tracking
• 📱 Responsive Design: Works perfectly on all devices
• 🎯 Category System: Organized complaint categories
• ⚡ Priority Levels: High, medium, and low priority classifications
• 📈 Status Tracking: Track complaint status (pending, in-progress, resolved)

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm, yarn, or pnpm

Installation

1. Clone the repository:

git clone <repository-url>
cd Teaspill

2. Install dependencies:

cd frontend
npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm start
# or
yarn start
# or
pnpm start

4. Open http://localhost:3000 to view it in the browser.

Technology Stack

• React 18 - Modern React with hooks
• TypeScript - Type-safe JavaScript
• OGL - WebGL library for the gradient effects
• CSS3 - Modern styling with backdrop filters and gradients
• Responsive Design - Mobile-first approach

Project Structure

frontend/
├── public/
│   └── index.html
├── src/
│   ├── App.tsx          # Main application component
│   ├── App.css          # Main application styles
│   ├── GradientBlinds.tsx # WebGL gradient component
│   ├── GradientBlinds.css # Gradient component styles
│   └── index.tsx        # Application entry point
├── package.json
└── tsconfig.json

Usage

Submitting a Complaint

1. Click the "Submit New Complaint" button
2. Fill in the complaint details:
   • Title (required)
   • Description (required)
   • Category (required)
   • Priority level
   • Anonymous option
3. Click "Submit Complaint"

Viewing Complaints

• View all complaints on the main dashboard
• See real-time statistics
• Track complaint status and priority
• Filter by categories and status

Customization

Gradient Colors

You can customize the gradient background by modifying the gradientColors prop in App.tsx:

<GradientBlinds
  gradientColors={['#667eea', '#764ba2', '#f093fb', '#f5576c']}
  // ... other props
/>

Categories

Add or modify complaint categories in the categories array in App.tsx:

const categories = [
  'Technology',
  'Food Services',
  'Infrastructure',
  'Academic',
  'Administrative',
  'Safety',
  'Other'
];

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• OGL library for WebGL functionality
• React team for the amazing framework
• Modern CSS features for beautiful styling