WEEK_2:_FULL-STACK_IMPLEMENTATION_&_UI/UX_PROBLEM_SOLVING
Mr. Anton
Interpreted user stories for the Classes module into functional UI components. Researched and designed UI/UX layouts independently due to lack of Figma assets. Developed backend logic in NestJS and validated endpoints via Postman. Resolved data-sync issues when connecting the frontend to the backend. Added QR code generation and direct link sharing for class access. Engineered a hierarchical filtering system for the Grades section. Integrated PDF and XLSX export libraries for student grade reporting. Built an interactive Star-rating system with custom CSS animations.
Solving the 'Empty Canvas' Design Challenge
My primary task was the Classes module, but I faced an immediate hurdle: there was no Figma design to follow. To solve this, I spent my first day researching modern LMS patterns to ensure a professional look. I utilized shadcn/ui to maintain consistency with the existing codebase while manually crafting the UX flow. After the UI was set, I built the NestJS backend and verified the logic using Postman. The biggest challenge arose on Day 3 during integration; ensuring the UI didn't break while handling asynchronous data from the database was time-consuming, requiring careful state management to handle loading and empty states.
Iterative Feedback and Logic Complexity
After a successful demo, my mentor requested immediate iterations: a student roster view and a QR code sharing feature. I implemented these quickly, but was then moved to the Grades section, which had no provided user story. My mentor simply requested a 'way to see grades.' I had to figure out the logic myself, realizing that a flat list wouldn't work for teachers with multiple classes. I designed and coded a separate navigation UI where teachers first select a Course, then a Class, which then unlocks the specific grade table.
To make the Grades section truly functional, I researched and implemented PDF and Excel export features, allowing teachers to take data offline. I wrapped up the week with the Evaluation module, where I focused on 'polish' by coding a custom star-rating animation from scratch. This week taught me that as a developer, I must often act as my own Product Manager and Designer when requirements are vague.