skip to content

Student Information System (React)

[completed]ChakraUI, Reactgithub ↗

Project Overview

An upgraded version of my initial Student Information System — same backend API, same data model, but rewritten as a React SPA with ChakraUI for components and styling.

Technology Stack

  • Framework: React (Vite)
  • UI library: ChakraUI
  • Language: JavaScript

What Changed From the HTML/JS Version

  • Components. Each view (Students, Courses, Enrollments) became a React component with its own state. The vanilla DOM-diffing logic disappeared.
  • Forms. ChakraUI's <FormControl> + <Input> primitives handle validation, error states, and accessibility out of the box.
  • Routing. react-router-dom for /students, /courses, /enrollments URLs. The vanilla version was a single page with show/hide divs.
  • State management. Component-local useState for everything. No Redux, no Context. This is a small enough app that prop drilling worked fine.

What I Learned

  • React's mental model clicks once you accept that your component renders are describing the UI, not manipulating it. The DOM-diffing is the framework's job; your job is to keep the description accurate.
  • ChakraUI in 2024 was a good choice for fast project work — accessible by default, dark mode for free, good defaults. (For this portfolio, I dropped it in favour of Tailwind — different aesthetic, different priorities.)
  • Vite's HMR is genuinely magic after years of vanilla page reloads. Editing a component and seeing the change without losing form state is a real productivity boost.
  • The same backend API powering both this and the vanilla version proved the value of API/UI separation. The contract didn't change; only the renderer did.