Senior ReactJS Developer Needed for AI-EdTech Admin Portal (MyRollCall Pro)
Budget: ₹37,500 – ₹75,000 INR
Project Overview: We are looking for an experienced ReactJS developer to build the "Super Admin" and "Institute Management" portal for MyRollCall Pro, an automated attendance management system. The project involves converting high-fidelity PDF wireframes into a fully functional, responsive, and high-performance dashboard.
Note on Scope: The attached file is for reference only. While the PDF contains the primary design direction, approximately 10 additional intermediate screens will be required during production. Freelancers should calculate their bid and timeline based on a total of 25 to 30 screens.
Key Requirements:
Tech Stack: ReactJS (v18+), Vite Development Environment, Tailwind CSS or Material UI, Chart.js or Recharts for analytics, and Redux/Context API for state management.
JS/TS Mastery: Advanced problem-solving skills in JavaScript (ESNext) and TypeScript are essential for building a scalable and type-safe architecture.
Payment Gateway Integration: Experience integrating payment gateways (e.g., Razorpay, Stripe, or BillDesk) for subscription management and automated invoice generation.
Experience: Proven track record in building complex SaaS admin panels with data-heavy tables and real-time notifications.
Interactions: Smooth transitions, dynamic filtering, and integration-ready components for REST APIs.
Timeline: Please specify your estimated time to complete the full scope of 25–30 screens.
How to Apply: Please share your portfolio specifically showcasing Admin Dashboards and projects where you have implemented payment flows. Briefly explain a complex technical problem you solved using TypeScript in a previous project.
Detailed Scope of Work
The developer is expected to build a multi-module Admin Portal for MyRollCall Pro consisting of 25–30 total screens using Vite as the build tool to ensure a modern, high-performance developer experience and optimized production bundles.
1. Super Admin Dashboard (Overview)
Stats Cards: Implementation of 12+ dynamic stats cards including "Active/Expired Institutes," "Total Students/Teachers," and "Attendance Sessions".
Analytics Graphs: Interactive charts for "Institutes Growth" and "Attendance Activity" (Monthly/Yearly views).
Expiring Alerts: A dedicated table for "Institutes Expiring Soon" with automated "Notify Institute" actions.
2. Institute & College Management
Central Directory: A searchable and filterable list of all registered colleges showing size, creation date, and status.
Detailed Institute Profile: A comprehensive view for individual colleges including:
User Breakdown: Counts for Students, Faculty, and Coordinators.
Operational Settings: Form toggles for "Proxy Enable," "Face Mismatch as Absent," "Lecture Timing," and "Attendance Duration".
Plan Management: Subscription status, price, and validity tracking.
3. Payment Gateway & Financial Management
Payment Integration: Development of the frontend flow for online payments to handle plan extensions and renewals.
Payment History: A detailed history table tracking "Date," "Plan Duration," "Amount Paid," "Payment Mode (Online/Offline)," and "Payment Status (Complete/Pending)".
Invoice System: Integration for viewing and downloading automated invoices (e.g., "INV-00123") linked to successful transactions.
4. Support & Complaints System
Complaints Dashboard: Summary view of tickets categorized by Status and Priority.
Ticketing Interface: A detailed "Ticket Details" page featuring a conversation timeline and quick actions like "Assign To" or "Mark as Resolved".
5. Demo & Slot Management
Booking System: Management of available slots for Client and Agent demos.
Slot Refill: Interface to add or refill demo slots and rescheduling capabilities.
6. Inventory & Operations
Hardware Tracking: Management of Beacons, Mobile devices, and LED monitors.
Assignment Logic: Tools to transfer inventory to institutes or specific staff with Serial/IMEI tracking.
7. Technical Standards & Additional Screens
Total Screen Count: 25–30 screens.
Development Environment: Project must be initialized using Vite to ensure fast Hot Module Replacement (HMR) and efficient builds.
Code Quality: Use of TypeScript is required for all components and utilities to minimize runtime errors and enhance maintainability.
Scope Expansion: In addition to the reference PDF, the freelancer will develop approximately 10 additional screens covering intermediate states (success/error views), multi-step payment flows, and deep-dive reporting pages.
Security: Adherence to "Privacy by Design" to support DPDPA 2023 compliance, ensuring secure access controls for all financial and institutional data.
Note on Scope: The attached file is for reference only. While the PDF contains the primary design direction, approximately 10 additional intermediate screens will be required during production. Freelancers should calculate their bid and timeline based on a total of 25 to 30 screens.
Key Requirements:
Tech Stack: ReactJS (v18+), Vite Development Environment, Tailwind CSS or Material UI, Chart.js or Recharts for analytics, and Redux/Context API for state management.
JS/TS Mastery: Advanced problem-solving skills in JavaScript (ESNext) and TypeScript are essential for building a scalable and type-safe architecture.
Payment Gateway Integration: Experience integrating payment gateways (e.g., Razorpay, Stripe, or BillDesk) for subscription management and automated invoice generation.
Experience: Proven track record in building complex SaaS admin panels with data-heavy tables and real-time notifications.
Interactions: Smooth transitions, dynamic filtering, and integration-ready components for REST APIs.
Timeline: Please specify your estimated time to complete the full scope of 25–30 screens.
How to Apply: Please share your portfolio specifically showcasing Admin Dashboards and projects where you have implemented payment flows. Briefly explain a complex technical problem you solved using TypeScript in a previous project.
Detailed Scope of Work
The developer is expected to build a multi-module Admin Portal for MyRollCall Pro consisting of 25–30 total screens using Vite as the build tool to ensure a modern, high-performance developer experience and optimized production bundles.
1. Super Admin Dashboard (Overview)
Stats Cards: Implementation of 12+ dynamic stats cards including "Active/Expired Institutes," "Total Students/Teachers," and "Attendance Sessions".
Analytics Graphs: Interactive charts for "Institutes Growth" and "Attendance Activity" (Monthly/Yearly views).
Expiring Alerts: A dedicated table for "Institutes Expiring Soon" with automated "Notify Institute" actions.
2. Institute & College Management
Central Directory: A searchable and filterable list of all registered colleges showing size, creation date, and status.
Detailed Institute Profile: A comprehensive view for individual colleges including:
User Breakdown: Counts for Students, Faculty, and Coordinators.
Operational Settings: Form toggles for "Proxy Enable," "Face Mismatch as Absent," "Lecture Timing," and "Attendance Duration".
Plan Management: Subscription status, price, and validity tracking.
3. Payment Gateway & Financial Management
Payment Integration: Development of the frontend flow for online payments to handle plan extensions and renewals.
Payment History: A detailed history table tracking "Date," "Plan Duration," "Amount Paid," "Payment Mode (Online/Offline)," and "Payment Status (Complete/Pending)".
Invoice System: Integration for viewing and downloading automated invoices (e.g., "INV-00123") linked to successful transactions.
4. Support & Complaints System
Complaints Dashboard: Summary view of tickets categorized by Status and Priority.
Ticketing Interface: A detailed "Ticket Details" page featuring a conversation timeline and quick actions like "Assign To" or "Mark as Resolved".
5. Demo & Slot Management
Booking System: Management of available slots for Client and Agent demos.
Slot Refill: Interface to add or refill demo slots and rescheduling capabilities.
6. Inventory & Operations
Hardware Tracking: Management of Beacons, Mobile devices, and LED monitors.
Assignment Logic: Tools to transfer inventory to institutes or specific staff with Serial/IMEI tracking.
7. Technical Standards & Additional Screens
Total Screen Count: 25–30 screens.
Development Environment: Project must be initialized using Vite to ensure fast Hot Module Replacement (HMR) and efficient builds.
Code Quality: Use of TypeScript is required for all components and utilities to minimize runtime errors and enhance maintainability.
Scope Expansion: In addition to the reference PDF, the freelancer will develop approximately 10 additional screens covering intermediate states (success/error views), multi-step payment flows, and deep-dive reporting pages.
Security: Adherence to "Privacy by Design" to support DPDPA 2023 compliance, ensuring secure access controls for all financial and institutional data.