Ryaz Training

   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 ...

  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...

  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...

  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: ...

  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...

  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...

  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...

  System Design Day – Reading, Thinking & Architecting Today was all about laying the foundation for our MERN (MongoDB, Express, React, Node.js) project. Instead of jumping into code, I took the time to read and deeply understand the requirements document for our student performance dashboard based on Codeforces data.  What I Learned: Understanding how frontend and backend will communicate (React fetching from Node.js/Express APIs) Planning how to store structured data from Codeforces in MongoDB Why scheduled background sync (via cron) is better than frequent real-time API hits Importance of filtering, visualization, and statistics for user insights 🙏 Gracias: I’m grateful for days like these where I’m encouraged to slow down and think like a system architect . This project will push both my frontend and backend skills to the next level. 🔥 ~ Sanya

  Diving into Codeforces API – Auth, Structure, and Signatures Today I focused on understanding how the Codeforces API works — especially the authentication process and how to securely make calls using axios . The journey started with reading through the official Codeforces API documentation , and it opened up a whole new layer of how APIs work when authentication and data signing are involved. What I Explored Today: 🔹 Intro to the Codeforces API: The API is public and supports a wide range of data endpoints (user info, contest details, submissions, standings, etc.) Responses are returned in JSON format You can use the API freely, but certain endpoints require authentication via an API key + secret key. Understanding the Method Structure: Methods follow this format: https://codeforces.com/api/{methodName} Example: user.info → Fetch user details contest.standings → Fetch standings for a contest problemset.problems → Get the full problem set ...

  Backend from Scratch – Understanding Vanilla Node.js Today I stepped into the world of backend development — but with a twist. Instead of using the popular Express framework, I explored how to build a server and API endpoints using pure Node.js . This helped me understand the core of how Node handles requests and responses, without any abstraction or shortcut — just pure JavaScript and built-in modules. What I Covered:  Theoretical Concepts: What is Node.js and how it runs JavaScript outside the browser Node’s non-blocking , event-driven architecture Core modules like http , url , fs , and how they work internally  Practical Learning: Set up a basic HTTP server using the http module Handled req.url and req.method to route traffic manually Created simple API endpoints like: / → Home /about → About page /api/users → Returns dummy JSON data Parsed query params and request body without any libraries Read and served stat...

  Catching Up with Redux Toolkit – Making Things Click After yesterday's deep dive into the theory of Redux Toolkit , today was all about filling in the gaps and getting some hands-on practice . Some tasks were left unfinished yesterday — especially around practical implementation — so I focused on applying what I learned by setting up a Redux Toolkit-powered app from scratch. What I Did Today:  Redux Toolkit Implementation: Revisited configureStore() and understood how to register multiple slices Implemented a working counter slice using createSlice() Practiced dispatching actions like increment , decrement , and reset Connected Redux state with UI using useSelector Created a separate slice for a dummy user list to simulate real-world structure  Folder Structure & Best Practices: Organized the Redux files into folders: /store , /features , /slices Learned about keeping slice logic clean and separating concerns Key Learnings: Th...

  Mastering State Management in React using Redux Toolkit After getting comfortable with React and its core hooks , today’s focus was on understanding state management at a global level — especially through Redux Toolkit (RTK) . React’s local state works great for small apps, but as apps grow, managing shared state becomes complicated. That’s where Redux Toolkit steps in and makes things easier with a more streamlined API and reduced boilerplate.  What I Covered Today:  Theoretical Concepts: What is state management and why it's needed in larger applications Why Redux Toolkit is preferred over traditional Redux Difference between local state (via useState ) and global state (via Redux)  Core Redux Toolkit Concepts: configureStore to set up a Redux store createSlice to define state + reducers together Auto-generated action creators from slices Using useDispatch to send actions and useSelector to read state Understanding the struc...

  Date : July 2, 2025 Time Spent : 07:46:00 SCSS – Write Smarter Stylesheets! Today’s learning session was all about making styling easier, smarter, and scalable — thanks to SCSS , the CSS preprocessor that makes a developer’s life so much simpler. Instead of repeating styles or cluttering large CSS files, SCSS brings in features that traditional CSS lacks — like variables, nesting, and functions — all while compiling down to plain CSS behind the scenes. 🧪 What I Practiced in SCSS: Variables : Saved common values like colors and font-sizes Nesting : Organized styles better by writing parent-child relationships directly Mixins : Created reusable blocks for padding, shadows, etc. Functions : Used custom and built-in SCSS functions for cleaner logic Partials and Imports : Broke my styles into smaller manageable files  SCSS in Interviews – Key Questions & Answers  1. What is SCSS?  2. SCSS vs CSS – What’s the difference?  3. What are mi...

Project Started – Tailwind, API & Functional Components Today was super productive! I completed the remaining part of the React video tutorial and started working on the project provided in the course. It’s exciting to put into action everything I’ve learned over the last few days!  Tutorial Wrap-Up: ✅ Finished the remaining modules from the React video series ✅ Understood how the overall structure ties together before diving into the project  What I Did in the Project: ✅ Set up the project using Tailwind CSS ✅ Created the Header component ✅ Integrated the MovieDB API ✅ Developed the Card component to display movie info ✅ Implemented Search functionality ✅ Worked on essential features like API requests and rendering data dynamically  What I Learned: Tailwind makes styling fast and scalable — utility-first is a game changer Breaking UI into reusable components keeps the code organized and modular Using APIs in React with...