Campus Issue Tracker

🎓 A modern web application for managing campus issues - built with React, Firebase, and Tailwind CSS.
Students can report issues while administrators track and resolve them efficiently.

👉 Live Demo: issue-tracker-38509.web.app

---

A comprehensive web application for managing and tracking campus-related issues, built with React, Firebase, and modern web technologies. This platform enables students to report issues and allows administrators to efficiently manage and resolve them.

🚀 Features

For Students

• Issue Reporting: Submit detailed reports with attachments (images/videos)
• Real-time Status Updates: Track issue progress from submission to resolution
• Dashboard: Personal overview of submitted issues with filtering and search
• Categorization: Organized issue categories (Facilities, Technology, Academic, etc.)
• Profile Management: Manage user profile and preferences

For Administrators

• Comprehensive Dashboard: Overview of all issues with statistics and analytics
• Issue Management: Efficiently review, assign, and track issue resolution
• User Management: Manage user accounts and permissions
• Category Management: Create and organize issue categories and subcategories
• Analytics & Reporting: Detailed insights with charts and downloadable reports
• Notifications System: Stay updated on new issues and status changes
• Bulk Operations: Export data and manage multiple issues

Core Features

• Real-time Updates: Firebase Firestore for live data synchronization
• Dark/Light Theme: Complete theming support with user preference storage
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Search & Filtering: Advanced filtering by status, category, priority, and dates
• Media Support: Cloudinary integration for image and video uploads
• Authentication: Secure Firebase Authentication with role-based access
• Progressive Web App: Works offline and can be installed on devices

🛠️ Tech Stack

Frontend

• React 19 - Modern UI library with latest features
• React Router DOM 7.2 - Client-side routing
• Tailwind CSS 3.4 - Utility-first CSS framework
• Lucide React - Beautiful and consistent icons
• Recharts - Interactive charts and analytics

Backend & Services

• Firebase 11.6 - Backend-as-a-Service
  • Authentication (user management)
  • Firestore (real-time database)
  • Storage (file uploads)
  • Hosting (deployment)
• Cloudinary - Media management and optimization

Development Tools

• Vite 6.3 - Fast build tool and dev server
• ESLint - Code linting and quality
• PostCSS & Autoprefixer - CSS processing
• Concurrently - Run multiple commands simultaneously

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (v16 or higher)
• npm or yarn package manager
• Firebase project with the following services enabled:
  • Authentication
  • Firestore Database
  • Storage
  • Hosting (for deployment)
• Cloudinary account (for media uploads)

🚀 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd my-issue-tracker

2. Install Dependencies

npm install

3. Firebase Configuration

1. Create a Firebase project at Firebase Console
2. Enable Authentication, Firestore, and Storage
3. Create a src/config/firebase.js file with your Firebase configuration:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  // Your Firebase config object
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);
export default app;

4. Cloudinary Configuration

Create a src/config/cloudinary.js file:

export const cloudinaryConfig = {
  cloudName: 'your-cloud-name',
  apiKey: 'your-api-key',
  apiSecret: 'your-api-secret'
};

5. Environment Variables

Create a .env file in the root directory:

# Firebase Configuration
VITE_FIREBASE_API_KEY=your-firebase-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id

# Cloudinary Configuration
VITE_CLOUDINARY_CLOUD_NAME=your-cloud-name
VITE_CLOUDINARY_API_KEY=your-api-key

🔧 Development

Start Development Server

npm run dev

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

Start Firebase Emulators (Optional)

npm run emulators

Run Development with Emulators

npm run dev:emulators

Code Linting

npm run lint

🏗️ Build & Deployment

Build for Production

npm run build

Preview Production Build

npm run preview

Deploy to Firebase Hosting

firebase deploy

📱 Usage

Getting Started

1. Registration: Create an account using email/password
2. Profile Setup: Complete your profile with room number, roll number, etc.
3. Report Issues: Use the "Create Issue" button to submit new issues
4. Track Progress: Monitor your issues from the dashboard

Admin Access

Administrators have additional privileges:

• Access to admin dashboard (/admin)
• Issue management and assignment
• User management
• Analytics and reporting
• Category management

To make a user an admin, update their role in Firestore:

// In Firestore, update the user document
{
  email: "[email protected]",
  role: "admin",
  // other user fields...
}

📊 Project Structure

src/
├── components/           # Reusable UI components
│   ├── common/          # Common components (Button, Card, etc.)
│   ├── dashboard/       # Dashboard-specific components
│   ├── forms/           # Form components
│   ├── layout/          # Layout components (Header, Sidebar)
│   └── navigation/      # Navigation components
├── features/            # Feature-based organization
│   ├── admin/           # Admin-specific features
│   ├── analytics/       # Analytics and reporting
│   ├── auth/            # Authentication
│   ├── dashboard/       # Dashboard pages
│   ├── issues/          # Issue management
│   ├── student/         # Student-specific features
│   └── settings/        # User settings
├── contexts/            # React contexts (Auth, Theme, etc.)
├── hooks/               # Custom React hooks
├── services/            # API and Firebase services
├── styles/              # CSS files and theme variables
└── utils/               # Utility functions

🎨 Customization

Themes

The application supports dark and light themes. Customize themes in:

• src/styles/themeVariables.css
• tailwind.config.js

Categories

Issue categories can be managed through:

• Admin panel (/admin/categories)
• src/utils/categories.js for default categories

🔒 Security

Authentication

• Firebase Authentication with email/password
• Role-based access control (student/admin)

Database Security

• Firestore security rules in firestore.rules
• User can only access their own data
• Admins have broader access permissions

File Upload Security

• Cloudinary for secure media uploads
• File type validation
• Size limitations

📈 Analytics & Monitoring

The application includes comprehensive analytics:

• Issue volume trends
• Resolution time metrics
• Category distribution
• Priority analysis
• Performance dashboards

🧪 Testing

Unit Testing

npm run test

E2E Testing

npm run test:e2e

🤝 Contributing

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

Code Style

• Use ESLint configuration
• Follow React best practices
• Maintain consistent naming conventions
• Write meaningful commit messages

🆘 Support

For support and questions:

1. Check the FAQ section
2. Create an issue in the repository
3. Contact the development team

🔮 Roadmap

Upcoming Features

• Mobile app (React Native)
• Email notifications
• Advanced analytics
• Integration with campus systems
• Multi-language support
• API for third-party integrations

Version History

• v1.0.0 - Initial release with core features
• v1.1.0 - Added analytics and reporting
• v1.2.0 - Enhanced UI/UX and mobile responsiveness

🙏 Acknowledgments

• Firebase team for excellent backend services
• Tailwind CSS for the utility-first CSS framework
• React community for continuous innovation
• All contributors and testers

---

Campus Issue Tracker - Making campus life better, one issue at a time! 🎓✨