8080.AI
DesignReqs
Tasks
User FlowArchitecture
Log inSign up for free

super-database

byPatryk Biniek

Create a full-stack web application for managing student tutoring registrations (adding and removing students). The system should allow the user (admin/teacher) to manually input student data into a form and store it in a SQL database. Each new entry should be automatically assigned an incremental ID number (1 to n). Required student fields: Auto-generated ID (1, 2, 3, ...) First name Last name Address Subject (e.g., math, physics, etc.) School class Level (basic or extended) Lesson day (day of the week) Lesson time (start time and end time) Hourly rate Functional requirements: Add Student A form should allow entering all the above data. After submission, the data must be saved in a SQL database. The table displayed on the website should update instantly without requiring a page reload (use AJAX / Fetch API or WebSockets). Display Students Show all students in a dynamic table. Data must be fetched directly from the SQL database. The table should refresh automatically after every insert or delete. Delete Student Provide a way to delete a student by entering their assigned ID number. After deletion, the database should be updated immediately and the table refreshed. Technical requirements: Use a backend (Node.js / Express or Python Flask or Django — choose one). Use SQL database (MySQL, PostgreSQL, or SQLite). Frontend should be responsive and simple (HTML, CSS, JavaScript). Use asynchronous requests (AJAX/Fetch) for real-time updates. Ensure proper validation of form inputs. Keep the UI clean: table view + form for adding + input field/button for deleting. Bonus (optional): Add search/filter by subject or day. Prevent duplicate entries for the same student at the same time slot. Add confirmation before deleting a student.

DashboardStudents
Dashboard

Comments (0)

No comments yet. Be the first!

Project Tasks7

#1

Implement Theme & Structure

To Do

As a user, I want the application to visually match the mock-design pages exactly. This task covers implementing the global color palette (#F5F7FA background, #FFFFFF surface, #2C3E50 text, #3498DB accent, #BDC3C7 muted), typography, layout structure, and shared UI components (navbar, sidebar, containers) across all pages. Also remove any scaffold pages not needed by the application (e.g., login, signup, welcome pages if not part of the user flow). This task must be completed before any page-specific implementation begins.

AI 85%
Human 15%
High Priority
1 day
Frontend Developer
#4

Implement Students CRUD API

To Do

As a user, I want a backend API to manage student records. Implement FastAPI endpoints: GET /students (retrieve all students), POST /students (add a new student with auto-incremented ID and all required fields: first name, last name, address, subject, school class, level, lesson day, lesson time start/end, hourly rate), DELETE /students/{id} (delete a student by ID). Include input validation for all fields and enforce database-level constraints to prevent overlapping lesson times for the same student on the same day. Return appropriate HTTP status codes and error messages.

AI 80%
Human 20%
High Priority
2 days
Backend Developer
#2

Build Dashboard Page

To Do

As a user, I want to view the Dashboard page that serves as the main hub after login, displaying a live interactive calendar with color-coded lesson blocks per subject, hover animations revealing student details, and a conflict alert system flagging overlapping lesson times in red. Implement the Dashboard based on the existing Dashboard (v2) JSX design. The page navigates to the Students page and shows real-time schedule monitoring. Include smooth transitions and micro-interactions as described in the SRD Signature Design Concept.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#3

Build Students Page

To Do

As a user, I want to view the Students page that displays all student records in a dynamic table fetched from the database in real-time, with options to add a new student via a form and delete a student by ID. Implement the Students page based on the existing Students (v2) JSX design. The page is navigated to from the Dashboard and includes: a form for adding students (auto-generated ID, first name, last name, address, subject, school class, level, lesson day, lesson time start/end, hourly rate), a dynamic table with slide-in animation for new entries and fade-out for deletions, and a delete input/button. Table updates instantly without page reload.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#5

Implement Conflict Detection API

To Do

As a user, I want the backend to prevent scheduling overlapping lesson times for the same student on the same day. Implement a database-level unique constraint (or trigger) on the student, lesson day, and lesson time (start/end) fields in MySQL. The POST /students endpoint should return a clear conflict error response when a scheduling conflict is detected. Integrate conflict detection logic into the FastAPI backend and surface conflict alerts to the frontend Dashboard page.

Depends on:#4
Waiting for dependencies
AI 75%
Human 25%
High Priority
1.5 days
Backend Developer
#6

Integrate Real-Time Table Updates

To Do

As a user, I want the student table on the Students page to update in real-time (within 1 second) after any add or delete operation, without requiring a page reload. Implement AJAX/Fetch API calls from the React frontend to the FastAPI backend to refresh the student table after every insert or delete action. Connect the Students page frontend to the Students CRUD API and Conflict Detection API. Ensure success animations (green checkmark fade) on add and slide-in/fade-out animations on the table are triggered correctly.

Depends on:#3#5#4
Waiting for dependencies
AI 80%
Human 20%
High Priority
1.5 days
Frontend Developer
#7

Integrate Dashboard with API

To Do

As a user, I want the Dashboard page to fetch live schedule data from the backend and display it on the interactive calendar with real-time conflict alerts. Connect the Dashboard (v2) frontend to the Students CRUD API to populate the calendar with scheduled lessons, apply color-coded subject blocks, and trigger red conflict alerts from the Conflict Detection API. Ensure hover animations and modal interactions (edit/delete) are wired to the correct API endpoints.

Depends on:#4#5#2
Waiting for dependencies
AI 80%
Human 20%
Medium Priority
1.5 days
Frontend Developer
Dashboard design preview
Dashboard: View Schedule
Dashboard: Monitor Conflicts
Students: View All
Students: Add Student
Students: Submit Form
Students: Delete Student