Posts

Frontend 60% Complete – Visuals Taking Shape (Day-22)

   Frontend Progress – Around 60% Complete! The frontend of the Codeforces Tracker project is officially more than halfway done! Today I focused on polishing UI elements , integrating additional backend routes, and making the interface more interactive and dynamic.  What’s Done So Far (60% Complete): ✅ Basic student listing table with real backend data ✅ Contest history section with dropdown filters (30/90/365 days) ✅ Problem stats layout: total solved, avg rating, bar chart structure ✅ Routing and page navigation ✅ Tailwind CSS layout and responsive design structure  What’s Left: Final integration of: Submission heatmap Bar chart (using Recharts or Chart.js)  Data refinement and formatting for better readability  Final styling and alignment  Toggle for email reminders with backend connection  Polishing edge cases and handling null/invalid states Learnings Today: Clean component hierarchy makes ...
Post a Comment
Read more

Frontend in Progress – Building the User Experience(Day-21)

  Frontend in Progress – From Data to Design Today was all about continuing the frontend journey for the Codeforces Tracker project. With the backend ready, I focused on connecting API data to UI components , enhancing the layout, and preparing sections for contest history and problem-solving insights . The frontend is slowly taking shape and the experience of converting backend logic into usable UI feels both creative and technical — a fun mix!  What I Worked On Today: Fetched and displayed full student data from backend  Started work on Contest History Section : Created dropdown filters (days) Designed card view layout for contests Integrated contest API (basic data shown)  Basic structure added for Problem Solving Stats : Created layout for showing total problems solved, average rating, etc. What I’m Learning: Importance of breaking down large UI tasks into small components Managing conditional rendering based on loading, er...
Post a Comment
Read more

Frontend Begins – Bringing Data to Life (Day-20)

  Frontend Development Kickoff – Visualizing the Backend After wrapping up the backend, today I officially began working on the frontend for the Codeforces Tracker project. It felt great to shift gears and start turning data into interactive UI components. The main goal was to lay a strong foundation using React and Tailwind CSS , fetch data from the APIs, and set up the reusable layout and components that will drive the dashboard experience.  What I Worked On Today: React Frontend Setup Clean React structure created Installed essential dependencies (axios, react-router-dom, tailwind) Component Structure Created base folder structure for pages, components, utils, etc. Set up routing and basic layout UI Work Header and navigation bar set up Designed and implemented basic table structure for students  What I Learned: React and Tailwind combo makes it fast and clean to build beautiful layouts Working with real backend data is al...
Post a Comment
Read more

Backend Complete – Ready for Integration(Day-19)

  Backend Wrapped – A Solid Milestone Achieved! Today was a fulfilling day — I finally completed the backend for the Codeforces Tracker project! From basic CRUD to smart features like contest history, submission analysis, cron job setup , and reminder logic , the system is now ready to serve dynamic data to the frontend. What I Finalized Today: Finalized All API Endpoints Student list, creation, update, delete Codeforces handle-based submission and contest history fetch Toggle reminder emails Data Flow Tested Verified all major routes with mock data using Postman Checked edge cases and fallback mechanisms Ensured proper status codes, JSON structure, and error handling Cron Job Logic Synced data automatically with a daily schedule Enabled last sync time display for each student Reminder Email Logic Integrated placeholder function for email alerts Built toggle switch to enable/disable for individual users  Key Learnings: ...
Post a Comment
Read more

Backend Progress – Strengthening the System(Day-18)

  Another Day in Backend – Layering Stability Today I continued backend development on the Codeforces Tracker project , and spent around 3–4 hours refining, testing, and adding stability to the existing API endpoints. Each improvement helps make the system more scalable and error-proof for future integration.  What I Focused on Today:  Refined previously built routes for better data consistency Added input validations in the controller methods using basic conditionals  Started basic testing of endpoints using Postman  Added more console/debug logs to trace API flow  Handled possible edge cases for: Empty student data Invalid/missing Codeforces handle Update/delete failure cases Small Learnings: Realized the importance of status codes — using the right 200 , 400 , 404 , 500 makes debugging and frontend integration easier Naming conventions for route handlers and responses really help with code clarity Added a f...
Post a Comment
Read more

Progress of Project– Backend Continuation(Day-17)

  Continuing the Backend Flow – Small Steps Forward Today, I continued building and polishing the backend part of the Codeforces Tracker project.I focused on improving what I built yesterday and began adding functionality incrementally.  What I Worked On Today: Continued refining the student API endpoints (GET, POST, PUT) Improved response messages for better frontend readability Added validation and checks in a few endpoints ( POST , PATCH ) Started thinking about integrating a test Codeforces handle for dummy data testing Added placeholder logic for email reminder toggle  Observations & Learning: Even after the main endpoints are written, it takes time to refactor , add proper checks, and ensure clean data structure Small decisions like default values, error handling, or field naming really impact long-term maintainability  Gracias: I’m grateful to have some breathing room to go slower and refine my logic. Not every day has t...
Post a Comment
Read more

Building the Backbone – API Endpoints with Node.js (Day -16)

  Constructing the API Layer – Connecting Data to Frontend After understanding the full system architecture yesterday, today I stepped into the actual development phase , starting with building the API endpoints using Node.js and Express-like vanilla setup (or lightweight custom structure) . These APIs will serve as the bridge between our backend logic (like Codeforces data fetching, syncing, filtering, etc.) and the React frontend that presents it all to the user. API Endpoints Created: Here’s a summary of the routes I implemented today: Student Routes Method Endpoint Description GET /getStudentsIdAndHandle Returns only students' IDs and Codeforces handles PATCH /toggleReminder/:studentId Toggles reminder email status for a student GET /submissions/:id Fetches all Codeforces submissions for a student GET /contestHistory/:id Fetches Codeforces contest history for a student GET / Returns a list of all students POST / Adds a new student to the database PUT /:id Updates a st...
Post a Comment
Read more