Building a Process Scheduling Simulator: Relearning TypeScript and Reducing AI Dependence
Source: Dev.to
For several weeks I hadn’t written any real Next.js or TypeScript code without relying heavily on AI tools. While studying CPU scheduling algorithms in an Operating Systems class, I decided to build a visualizer for them. It turned out to be the perfect project to force myself back into manual coding.
The Problem
- I could only manage the basic Next.js boilerplate.
- Simple tasks—creating a dummy data object, sorting processes by arrival time—stumped me.
- My recent coursework had been in C++/Java, so I even typed
intinstead ofnumberin TypeScript.
Realisation: Skills fade when you stop practising them.
The Reset
I set a simple rule: no AI for core logic.
If I forgot something, I would:
- Check the official documentation.
- Search Stack Overflow.
- Look at reference material the traditional way.
At first it felt slow and frustrating, but gradually:
- TypeScript types and array methods returned.
- Designing TypeScript interfaces came back quickly (structural thinking sticks longer than syntax details).
Adjusting My AI Use
Completely rejecting AI isn’t realistic; modern development embraces tools, including AI.
Instead of letting AI generate the whole app, I used it for:
- Discussing component structure and interface design.
- Reviewing code I had already written.
- Questioning naming choices and architecture decisions.
- Suggesting clearer variable, type, and function names.
- Exploring design trade‑offs before committing.
Result: I wrote the code, AI reviewed it. This distinction mattered—cleaner code, better naming, and a more organised folder structure without sacrificing learning.
The Project: Interactive Process Scheduling Simulator
What Users Can Do
- Enter a list of processes (arrival time, burst time, optional priority).
- Run multiple scheduling algorithms.
- View results instantly via Gantt charts and detailed metrics tables.
Supported Algorithms
| Algorithm | Description |
|---|---|
| FCFS – First Come First Serve | Simple, non‑preemptive. |
| SJF – Shortest Job First (non‑preemptive) | Picks the shortest burst time. |
| SRTF – Shortest Remaining Time First (preemptive) | Tracks remaining burst time each step. |
| Priority Scheduling – preemptive & non‑preemptive | Uses process priority. |
| Round Robin – configurable time quantum | Maintains a ready queue and quantum. |
Calculated Metrics (per algorithm)
- Completion Time
- Turnaround Time
- Waiting Time
- Response Time
Average values are also computed.
A small but important detail: the simulator correctly handles CPU idle time, which is easy to overlook when first learning scheduling.
Technical Stack
- Framework: Next.js (App Router)
- Language: TypeScript 5
- UI Components:
shadcn/ui+ Radix UI - Styling: Tailwind CSS v4
- Forms & Validation: React Hook Form + Zod
- Icons & Theming: Lucide React,
next-themes
Architecture Highlights
- Separation of concerns: Algorithm logic lives apart from the UI, making it easier to test and reason about.
- Validation: Zod + React Hook Form provides clean validation, even with dynamic numbers of processes and inter‑field constraints.
- Strict typing: Guarantees consistency across algorithms.
I briefly considered a shared abstraction for the algorithms to reduce duplication, but ultimately kept them separate. The goal was to understand each algorithm, and forcing a common abstraction would have hidden the nuances I needed to see.
- Explicit code > clever abstractions when learning.
- Constants (
fcfs,sjf,srtf, …) replace magic strings, giving autocomplete and type safety.
Lessons Learned
Technical
- Deepened understanding of scheduling concepts:
- Preemption
- Context switching
- Starvation (especially in SJF)
- Impact of time quantum in Round Robin
Personal
| Extreme Approach | Outcome |
|---|---|
| AI writes the whole project | Working code, minimal learning. |
| No AI at all | Noble, but unrealistic in modern development. |
Middle ground that worked: Write the logic yourself, let AI refine it. This kept the thinking process mine while still benefiting from an extra pair of eyes.
Open Source
The project is available on GitHub:
🔗 (repository name truncated for brevity)
Feel free to explore, fork, or contribute!
Cess Scheduling Visualization
Live demo:
🔗
If you’re studying Operating Systems and want to see how scheduling algorithms behave in practice, this tool may help.
Upcoming Ideas
- Multilevel Queue Scheduling
- Multilevel Feedback Queue Scheduling
- Timeline animations
- Automated tests
- CSV import of inputs and export of results
- Step‑by‑step execution with explanations
The best learning projects are the ones that feel slightly too difficult at the start. If everything feels comfortable from line one, you’re probably not growing.