A modern task management application for class administrators (P.I.O.) and students. Built with React, Firebase, Material-UI, GSAP, and Tailwind CSS.

1A-genda is a class task management system with an intuitive Kanban-style board. P.I.O. administrators create and manage tasks and announcements for batches 1A1 and 1A2, while students track their individual progress without affecting the global board state.

Live Demo: https://www.1agenda.tech

• Simple Task Board: Two columns (To Do → Completed) with forward/backward navigation
• Personal Progress Tracking: Mark tasks complete without affecting other students
• Task Revision Requests: Request changes to existing tasks (edit details, deadlines, priorities)
• Content Submissions: Submit new task or announcement proposals with file attachments
• File Upload Support: Attach images, PDFs, and documents to submissions (up to 5MB)
• Announcement Feed: View important class announcements with file attachments and fullscreen image viewer
• Notion Integration: Quick links to external deadlines tracker and resources
• Semester Progress: Visual indicator of class progress
• File Downloads: Download attachments from announcements and view images in fullscreen

• Global Task Management: Create tasks for specific batches (1A1, 1A2) or all students
• Batch-Based Assignment: Assign tasks to specific batches or make them available to everyone
• Request Management: Approve/reject task revision and content submission requests (auto-cleanup on reject/approve)
• Announcement System: Post urgent alerts, info, or celebrations with file attachments
• File Upload Support: Attach images, PDFs, Office docs (up to 5MB per file, base64 storage)
• Student Dashboard: View demographics, completion statistics, and request activity
• Progress Tracker: Monitor individual student task completion and request counts
• Batch Filtering: View and manage tasks by batch or all together
• Auto Firestore Cleanup: Deleted/approved/rejected records removed automatically

• Node.js 16+ and npm
• Firebase account (free tier)
• Git

git clone https://github.com/JeraldPascual/1A-genda.git
cd 1A-genda

npm install

This will install all required packages including:

• React 19.2.0
• Firebase 12.6.0
• Material-UI v7
• Tailwind CSS v4
• GSAP 3.13.0
• Vite 7.2.4
• And all other dependencies

Copy the example environment file:

cp .env.example .env

Open .env and add your Firebase credentials:

VITE_FIREBASE_API_KEY=your_api_key_here
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
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
VITE_ADMIN_EMAIL=[email protected]

Follow the detailed Firebase setup section below to:

• Create your Firebase project
• Enable authentication
• Set up Firestore database
• Apply security rules
• Create required indexes

npm run dev

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

1. Clone the repository

   git clone https://github.com/JeraldPascual/1A-genda.git
   cd 1A-genda

2. Install dependencies

   npm install

3. Configure environment variables

   Copy .env.example to .env:

   cp .env.example .env

   Edit .env with Firebase credentials and admin email:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
   VITE_ADMIN_EMAIL=[email protected]

4. Set up Firebase (Detailed steps below)

   • Create project at Firebase Console
   • Enable Email/Password Authentication
   • Create Firestore Database
   • Apply security rules
   • Create required indexes

5. Run development server

   npm run dev

   Open http://localhost:5173

1. P.I.O. registers with the admin email (must match VITE_ADMIN_EMAIL)
2. Students register and select their batch (1A1 or 1A2)
3. P.I.O. creates initial tasks and announcements

1. Access admin panel from header navigation
2. Create Tasks
   • Title, description, subject
   • Priority: High, Medium, Low
   • Due date
   • Batch assignment: 1A1, 1A2, or All
3. Post Announcements
   • Info (🔵) - General updates
   • Urgent (🔴) - Important deadlines
   • Celebration (🟢) - Achievements
   • Attach files: Images, PDFs, Word, Excel, PowerPoint, ZIP (max 5MB)
4. Review Requests
   • Task Revision Requests - Proposed changes to existing tasks
   • Content Submissions - Suggested new tasks/announcements
5. Manage Requests
   • Approve requests to apply changes (auto-deletes request after processing)
   • Reject with deletion (cleans up Firestore immediately)
6. Monitor Activity
   • Student progress dashboard
   • Completion statistics
   • Request activity tracking

1. View Tasks - Tasks appear in To Do column
2. Complete Tasks - Click "Mark Complete" to move to Completed
3. Undo Completion - Use "Back to To Do" to revert
4. Request Revisions - Propose changes to existing tasks
5. Submit Content - Suggest new tasks or announcements with optional file attachments
6. Track Submissions - Check request status and admin feedback
7. Stay Updated - View announcements with attachments
8. Download Files - Click images for fullscreen view, download any attachment type

AdminPanel.jsx - Admin control center with tabs:

• Student Progress Tracker
• Student Dashboard
• Create Tasks
• View/Edit/Delete Tasks
• Create Announcements
• View/Delete Announcements
• Task Revision Requests (Approve/Reject)
• Content Submissions (Approve/Reject)
• Utilities (Clean orphaned data)

KanbanBoard.jsx - Main task board:

• Two-column layout (To Do → Completed)
• Personal progress tracking for students
• Task completion with confetti animation
• Content submission panel for 1A2 batch

AnnouncementTicker.jsx - Scrolling announcements:

• GSAP infinite scroll animation
• Color-coded by type (Info/Urgent/Celebration)
• Auto-refreshes on new announcements
• Attachment indicators with file count badges

AnnouncementPanel.jsx - Announcement display:

• Full announcement cards with attachment preview
• Fullscreen image viewer with portal rendering
• Download functionality for all file types
• Three-dot menu for download options

AttachmentList.jsx - File attachment display:

• Full-size image display with aspect ratio preservation
• Clickable images for fullscreen popup view
• Download menu for images and documents
• Support for images, PDFs, Office docs, text, ZIP files

StudentProgressTracker.jsx - Admin view of all students:

• Task completion counts
• Request submission counts
• Batch filtering
• Individual student details

StudentDashboard.jsx - Demographics overview:

• Total students by batch
• Completion statistics
• Request activity metrics

ContentSubmissionPanel.jsx - Student submission interface:

• Create task proposals with file attachments
• Create announcement suggestions with media uploads
• View submission history with attachment indicators
• See admin feedback and approval status
• Upload progress tracking for file submissions

TaskCard.jsx / RequestableTaskCard.jsx:

• Task details display
• Priority indicators
• Due date formatting
• Action buttons (Complete, Revise, etc.)

AuthContext - Authentication state:

• User login/logout
• Role detection (admin/student)
• User data management
• Firebase auth integration

ThemeContext - Theme management:

• Dark/Light mode toggle
• Persistent theme preference
• Dynamic theme switching

• React 19.2.0 - Latest React with improved performance and hooks
• Vite 7.2.4 - Lightning-fast dev server and build tool
• Material-UI v7 - Pre-built components for professional UI
• Tailwind CSS v4 - Utility-first CSS for rapid styling
• GSAP 3.13.0 - Professional-grade animation library

• Firebase Authentication - Secure email/password authentication
• Cloud Firestore - NoSQL database with real-time sync and base64 file storage
• Firebase Security Rules - Server-side data access control
• Auto-Cleanup System - Automatic deletion of processed/rejected records

• Confetti Celebration - Task completion rewards with canvas-confetti
• GSAP Scrolling - Smooth infinite announcement ticker
• Card Animations - Staggered entry animations for task cards
• Portal Modals - Fullscreen image viewer with smooth transitions

• Base64 Storage - Files stored directly in Firestore (no Firebase Storage billing)
• 5MB File Limit - Optimized for announcements and documents
• Instant Uploads - Local file conversion with immediate preview
• Supported Formats - Images (jpg, png, gif), PDF, Office docs, text, ZIP

For 50 users over 5 months:

• Vercel Hosting: $0 (Free tier: 100GB bandwidth/month)
• Firebase Firestore: $0 (Free tier: 50K reads/day, 20K writes/day)
• Firebase Auth: $0 (Unlimited users on free tier)

Total: $0 ✓

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

• Follow existing code style and formatting
• Test all changes thoroughly before submitting
• Update README if adding new features
• Include comments for complex logic

MIT License - Free to use and modify.

Built with modern web technologies:

• React - UI Framework
• Firebase - Backend Platform
• Vite - Build Tool
• Material-UI - Component Library
• Tailwind CSS - CSS Framework
• GSAP - Animation Library

1A-genda - Streamlining class management, one task at a time.