This is the UI for a simple Attendance Tracker with a Rails-API backend and a React/TypeScript front end.

I'm building this end-to-end project under a time constraint that loosely reflects production pace. At about 2-3 hours a day over the next few weeks. I'm following the roadmap below;

Core React Fluency

Focus only on: • Functional components • useState • useEffect • Props • Lifting state • Controlled forms • Fetching data from an API

Deliverable: Build a small standalone React frontend that: • Lists records from a Rails API • Creates a record • Edits a record • Deletes a record • Handles loading + error states

Week 1–2 - Build a small but real Rails + React app.

Example: • Attendance tracker • CRUD records • Authentication • Simple dashboard • API calls from React to Rails

Focus on: • Fetch data • Handle loading states • Handle errors • Write 5–10 tests

Week 3 - Refactor and improve: • Component structure • Extract reusable components • Improve form handling • Add basic client-side validation

Focus on: • Refactoring React components • Extracting reusable components • Memoization where appropriate • Improving folder structure • Cleaning Rails service objects • N+1 avoidance • SQL optimization review

Add: • Docker • Basic CI • README explaining architecture decisions

Week 4 - Polish + deploy: • Dockerize • Deploy to something simple • Write README • Add tests • Add basic CI