A web-based campus management and reporting platform designed to help students, faculty, and administrators maintain a safe, clean, and efficient university environment.
The Smart Campus Reporting System is a modern web application designed to provide a centralized platform for campus users to access their profiles, submit and track campus-related issues, receive notifications, and access role-specific functionality.
The system is designed around a simple idea:
Make it easier for members of a university community to report problems and keep track of campus activities.
The application provides a university-branded login experience followed by a role-aware campus dashboard.
The application provides a dedicated university login interface with:
- University email authentication
- Password-based sign-in
- Form validation
- Loading states during authentication
- Error handling
- Role-based redirection
- Password-change flow for users who are required to update their password
The login interface is designed around the Ahmedabad University identity and uses a dedicated campus background and university logo.
After authentication, users are taken to their campus dashboard.
The dashboard provides:
- User profile information
- User name and email
- User role identification
- Profile management section
- Campus reporting section
- Notifications section
- Logout functionality
The dashboard also displays different role icons depending on the user's role.
The system provides a dedicated area for campus reporting.
Users can:
- Submit campus-related issues
- Track reported campus issues
- Use the reporting system as a centralized channel for campus concerns
This feature is intended to improve communication between campus users and the relevant administrative authorities.
The dashboard includes a notifications section intended to keep users updated about:
- Campus activities
- Updates related to reported issues
- Important campus information
The application supports role-aware functionality.
Currently represented roles include:
- Admin
- Faculty
- User / Student
Administrators have access to an additional Admin Panel, while other users are directed to the standard dashboard.
Administrators can access a dedicated administrative area through the dashboard.
The admin functionality is designed to provide privileged access to campus management functionality.
The application checks the user's role before exposing the Admin Panel.
The application includes a password-change flow for users whose account is flagged as requiring a password update.
Users with the must_change_password status are automatically redirected to the password-change page after authentication.
The interface follows a clean university-oriented visual design.
- Ahmedabad University branding
- Clean blue and white colour palette
- Rounded cards and controls
- Responsive layouts
- Modern dashboard design
- Lucide icons
- Accessible form elements
- Clear error and loading states
- Desktop and mobile considerations
The login page uses a split-screen layout:
Left side
- University branding
- Campus imagery
- System title
- Project tagline
Right side
- University login form
- Email field
- Password field
- Sign-in button
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Lucide React
- Radix UI
- shadcn/ui component structure
- Class Variance Authority
- Tailwind Merge
- CMDK
- React Hook Form
- Zod
@hookform/resolvers
- Supabase SSR
- Next.js API routes
- date-fns
- Recharts
- Embla Carousel
- Sonner
- Vaul
- TypeScript
- PostCSS
- Tailwind CSS
- Next.js development server
smart-campus-main/
│
├── app/
│ ├── ... # Next.js application routes and pages
│ └── ...
│
├── components/
│ ├── ui/
│ └── ... # Reusable UI components
│
├── hooks/
│ # Custom React hooks
│
├── lib/
│ # Utility functions and shared logic
│
├── public/
│ ├── ahd-logo.png # Ahmedabad University logo
│ ├── campus-bg.png # Campus background
│ └── ...
│
├── scripts/
│ # Project scripts
│
├── styles/
│ # Styling resources
│
├── components.json # UI component configuration
├── next.config.mjs # Next.js configuration
├── package.json # Dependencies and scripts
├── package-lock.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── tsconfig.json
└── .gitignore
The general user flow is:
┌──────────────────┐
│ Login Screen │
└────────┬─────────┘
│
▼
┌──────────────────┐
│ Authentication │
└────────┬─────────┘
│
┌───────────┴───────────┐
│ │
▼ ▼
Password Change Normal Login
│ │
▼ ▼
Change Password Role Detection
│
┌───────────────┼───────────────┐
│ │ │
▼ ▼ ▼
Admin Faculty Student/User
│ │ │
▼ └───────┬───────┘
Admin Panel │
▼
User Dashboard
| Role | Access |
|---|---|
| Admin | Dashboard + Admin Panel |
| Faculty | Standard Dashboard |
| Student / User | Standard Dashboard |
The application uses the authenticated user's role to determine the appropriate destination after login.
The dashboard provides a centralized view of the user's campus account.
Displays:
- User name
- University email
- Account role
Provides access to the campus issue reporting workflow.
Provides a space for campus-related updates and notifications.
Administrators are provided with an additional Admin Panel entry point.
The frontend login form sends the submitted credentials to:
/api/auth/login
The expected login payload is:
{
"email": "user@university.edu",
"password": "********"
}Following successful authentication, the returned user information is stored locally for the application session.
The application then determines the appropriate destination based on the user's account state and role.
The application is designed with responsive layouts in mind.
The login interface includes a desktop split-screen experience while adapting the university branding for smaller screens.
Dashboard layouts use responsive grid structures to accommodate different screen sizes.
The project includes Supabase-related dependencies and is structured to support server-side Supabase integration.
Supabase can be used for:
- Authentication
- User management
- Database storage
- Campus reporting data
- Notifications
- Role-based application data
Actual production credentials and database configuration should be supplied through environment variables.
The application is designed around authenticated and role-aware access.
Important security practices include:
- Never commit passwords or API keys
- Keep
.envfiles out of version control - Use environment variables for sensitive configuration
- Validate authentication requests on the server
- Enforce authorization server-side
- Do not rely solely on client-side role checks
- Protect administrative routes and API endpoints
Potential future enhancements include:
- Real-time campus issue tracking
- Report status updates
- Image attachments for reports
- Location-based campus reporting
- Push notifications
- Email notifications
- Admin analytics dashboard
- Report filtering and search
- Issue priority levels
- Report assignment to departments
- Report resolution workflow
- User profile management
- Faculty-specific dashboards
- Student-specific dashboards
- Mobile application support
- Advanced reporting and analytics
The Smart Campus Reporting System aims to:
- Provide a centralized platform for campus issue reporting.
- Improve communication between students, faculty, and administrators.
- Simplify the process of submitting campus-related concerns.
- Provide users with visibility into their reported issues.
- Support role-specific campus functionality.
- Create a cleaner and more efficient campus management workflow.
- Provide a scalable foundation for future smart-campus features.
Built using the modern Next.js App Router architecture with React and TypeScript.
Reusable UI components are organized under the components directory.
Different user roles receive different access and navigation options.
The interface incorporates Ahmedabad University branding and campus imagery.
The UI adapts to desktop and smaller-screen layouts.
The project structure allows additional reporting, notification, analytics, and administrative functionality to be added over time.
Project Type: Academic / Prototype Project
Current Focus:
- Smart campus user management
- Campus issue reporting
- Role-aware dashboards
- University authentication interface
- Administrative access
- Responsive user interface
Note: Some backend services and production configuration may require additional setup before the application can be deployed as a fully operational production system.
This project was developed as an academic/project prototype.
Add the appropriate license here if the project is later released under an open-source license.
Smart Campus Reporting System
Built with:
Next.js · React · TypeScript · Tailwind CSS · Supabase