Easily track and analyze student attendance through a robust dashboard. Gain valuable insights and manage academic administration more effectively with powerful data analytics and visualizations.
Introduction ✦ Features ✦ Tech Stack ✦ Directory Structure ✦ Getting Started ✦ Roadmap
UniTrack Dashboard is an admin tool for tracking and analyzing student attendance in universities. It offers a user-friendly interface for managing students, classes, and lectures, with detailed attendance analytics. Built with Next.js, Tailwind CSS, and Prisma.
- 🔍 Attendance Analytics: View visualizations and insights on university-wide attendance.
- 📊 Data Tables: Access, filter, and manage data for students, classes, and lectures.
- ⚙️ Admin Controls: Manage courses, users, and more with full control.
- 🛠️ Real-Time Data: Live updates for attendance metrics using React Query and tRPC.
- 📈 Customizable Dashboards: Tailor the platform to show the most relevant data to administrators.
- Next.js - Fullstack framework for server-side rendering and API routes
- React - UI framework with server components for dynamic UIs
- TypeScript - Strongly typed language for safer, maintainable code
- Prisma - ORM for interacting with the database efficiently
- tRPC - End-to-end type-safe API layer for smooth client-server communication
- Tailwind CSS - Utility-first CSS framework for rapid UI development
- Radix UI - Modular and accessible UI components
- TanStack Table - Powerful table data management for UI
- Next-Auth.js - Authentication management
- Railway - Database hosting for scalable deployments
.
├── .github # GitHub Actions CI/CD workflows
│ └── workflows
│ ├── build # Build the project on every push to the main branch
│ └── lint-pr # Lint PR titles to enforce conventional commits
│
├── .vscode # Recommended extensions and settings for VSCode
├── prisma # Prisma schema and migrations
│
├── src # Main source code
│ ├── app # Next.js App Router directory for pages and API routes
│ │ └── api # API routes for the attendance scanner hardware units
│ ├── components # UI and shared components, with shadcn-ui
│ ├── lib # Shared utility functions and hooks
│ ├── pages # (deprecated) Next.js Pages Router directory
│ ├── server # tRPC Routers, Prisma Client, and NextAuth server-side code
│ │ └── routers # tRPC Procedures for type-safe API endpoints
│ ├── styles # Global styles, Tailwind CSS configuration, and custom font imports
│ ├── types # Shared TypeScript types and Zod schemas for validation
│ └── env.mjs # Type-safe environment variables using t3-env
│
├── docker-compose.yml # Docker Compose file for local development databases
├── .nvmrc # Node Version Manager (nvm/fnm) file for setting a specific Node version
└── package.json # Project metadata and dependencies- Node.js v16.x or higher
- PostgreSQL (or equivalent) database
- Vercel (optional for deployment)
- Clone the repository:
git clone https://github.com/UniTrackApp/dashboard.git
cd dashboard- Install dependencies:
npm install- Set up environment variables by copying
.env.exampleto.envand adding your credentials:
cp .env.example .env- Apply database migrations:
npx prisma migrate dev- Run the development server:
npm run dev- Open http://localhost:3000 to view the app in your browser.
- Implement some advanced charts using Recharts and shadcn-ui charts
- Add multi-campus support
- Enable real-time student location tracking
- Expand data export capabilities (CSV, PDF)
- See GitHub Issues for more details and upcoming features