DEV Community: Suhani Singh

What I Learned from “I Built OpenRouter From Scratch in 4 Hours” — A Simple Developer Breakdown

Suhani Singh — Mon, 20 Apr 2026 15:53:39 +0000

There are some videos you watch for entertainment.
There are some you watch for inspiration.
And then there are videos that genuinely change how you think about building products.

Recently, I watched Harkirat Singh’s video, “I Built OpenRouter From Scratch in 4 Hours,” and I found it genuinely valuable, not because it was just another AI project, but because it showed how a real developer product can be broken down, understood, and rebuilt from first principles. The video is available on Harkirat Singh’s YouTube channel, and the corresponding code is published in the code100x/openrouter GitHub repository. ([YouTube][1])

This is not my project, and I am not the creator of the video.
This blog is simply my attempt to explain, in a simple and detailed way, what I learned from it, why the idea is powerful, and what beginner-to-intermediate developers can take away from it.

If you are someone who wants to move beyond “just consuming APIs” and start thinking like a builder of platforms, this topic is worth understanding.

Useful Links

You can watch the original video by Harkirat Singh here: ([YouTube][1])

You can explore the public code repository here: ([GitHub][2])

You can also check OpenRouter’s official documentation to understand what the real product does: its Quickstart describes OpenRouter as a unified API for hundreds of models, and its API docs explain that it normalizes request and response schemas across providers. ([OpenRouter][3])

First, what is OpenRouter in simple words?

Before talking about the video, let’s simplify the core idea.

Normally, if you want to use AI models in your app, you may need to integrate with different providers separately. One provider may have one API format, another may have different authentication, another may expose different model names, and another may return responses in a slightly different structure.

That creates unnecessary complexity.

OpenRouter solves this by acting as a single gateway for many AI models. Its official docs describe it as one API that gives access to hundreds of models through a single endpoint, while handling routing and fallbacks. The docs also say its schema is intentionally similar to the OpenAI Chat API, so developers do not need to learn different request formats for every provider. ([OpenRouter][3])

So in very simple language:

OpenRouter is like a middle layer between your app and multiple AI providers.

Instead of talking to five providers separately, your app talks to one system.

That one idea alone teaches a very important product lesson:

Great developer tools reduce integration pain.

Why this video stood out to me

A lot of AI videos focus on prompts, wrappers, or quick demos.

This one is different.

The interesting part is not “using AI.”
The interesting part is building the infrastructure layer around AI.

That shift matters.

Because once you start building the routing layer itself, you are forced to think about real backend problems like:

API design
request normalization
provider abstraction
fallback logic
usage tracking
security
dashboard design
developer experience

That is a much more valuable exercise than building another basic chatbot UI.

What I liked most is that the project naturally pushes you to think like a product engineer, not just a tutorial follower.

What I understood from the project structure

The public GitHub repository already reveals a lot about the architecture. The repo uses a Turborepo monorepo setup and includes apps named api-backend, primary-backend, and dashboard-frontend, along with shared packages like db. The top-level package configuration also shows a TypeScript-based stack using Bun and ElysiaJS. ([GitHub][2])

Even if you do not study every file in the repo, this structure gives a clear idea of how the system is organized.

1. Dashboard Frontend

This is likely the developer-facing UI.

A dashboard in a product like this usually helps with:

generating API keys
viewing usage
checking balance or credits
exploring models
managing settings

This is important because when you build a developer product, backend functionality alone is not enough. Developers also need visibility and control.

2. API Backend

This is most likely the public entry point.

This layer probably handles things like:

receiving incoming API requests
verifying API keys
validating request formats
deciding where the request should go
returning a normalized response

This is the part external applications actually call.

3. Primary Backend

This likely supports internal operations or orchestration.

In a real-world product, this kind of backend often manages:

internal business logic
billing or credit calculations
analytics
admin actions
system-level workflows

4. Shared DB Package

This is a smart monorepo approach.

Instead of duplicating database schemas and types across multiple services, shared packages keep things consistent. For full-stack developers, this is a strong reminder that architecture matters even in small or medium-sized products.

Why Bun and ElysiaJS were smart choices

The video title and repo indicate that the project was built using Bun and ElysiaJS. That stack makes a lot of sense for a fast-moving experimental build. ([YouTube][1])

Bun

Bun is attractive for projects like this because it speeds up development workflow:

fast installs
fast startup
modern TypeScript support
low setup friction

If your goal is to validate an idea quickly, Bun helps reduce overhead.

ElysiaJS

ElysiaJS is a lightweight backend framework that works well for building APIs quickly. For a project centered around routing requests and exposing clean endpoints, that makes it a practical choice. The value here is not hype. The value is speed, clarity, and developer productivity. ([GitHub][4])

For me, one big lesson here was:

The best stack is not always the biggest stack.
The best stack is the one that helps you ship the architecture clearly.

The main concept I learned: unified APIs are powerful

The biggest lesson from the video is not technical syntax.
It is product thinking.

A unified API sounds simple on paper:

one endpoint
one API key
one request format
access to many models

But behind that simple experience, there is a lot of hidden engineering.

OpenRouter’s official docs explain that the platform normalizes schemas across different models and providers so the developer only has to learn one interface. They also document automatic fallback behavior when a chosen model fails. ([OpenRouter][5])

That means the product is not just forwarding requests.
It is creating consistency over inconsistency.

And that is what good infrastructure products do.

What actually makes this kind of project difficult?

At first glance, someone might think:

“Okay, so it just takes a request and sends it to another API.”

But the real challenge is not forwarding requests.

The real challenge is handling the fact that each provider behaves differently.

Different providers can vary in:

authentication format
model naming
supported features
error messages
response shape
streaming behavior
latency
pricing
rate limits

So if you want to build a system like OpenRouter, your real task is:

Create one stable developer experience on top of many unstable differences.

That is much harder, and much more interesting.

🔗 👉 Click here to read the full Blog on TheCampusCoders

Why code breaks in production

Suhani Singh — Mon, 08 Sep 2025 15:58:02 +0000

Every developer has faced that frustrating moment: the code works perfectly on their local machine, tests pass, everything looks fine… and then - boom - the production server crashes. The infamous line echoes:
“But it worked on my machine!”

This gap between development and production isn’t just about luck or bad coding. It happens because software systems are far more complex in the real world than what we simulate locally. Understanding why code breaks in production is the first step toward preventing late-night firefighting sessions and keeping users happy.

In this blog, we’ll explore the most common reasons production bugs occur and how to prevent them with better practices. Think of it as a developer’s survival guide for real-world deployments.

1. Common Reasons Code Breaks in Production

A. Environment Differences

One of the biggest culprits is the difference between local, staging, and production environments.

Locally, you might run Node.js v20, but production uses Node.js v18.
Your local .env file might have test credentials, but in production, a single missing environment variable can stop your entire app from booting.
A dependency works on MacOS but fails on Linux-based servers.

💡 Example: Imagine you use an image-processing library that depends on libvips. On your machine, everything works fine because you already had the right version installed. But when deployed to production, the library fails because the server doesn’t have that dependency.

This is why Docker, containerization, and Infrastructure-as-Code tools are so popular - they ensure the environment is consistent across dev, staging, and production.

B. Uncaught Edge Cases

Developers usually test the happy path - the expected way users interact with a feature. But in reality, users are unpredictable, and APIs can respond in unexpected ways.

A form where you expected a string, but a user uploads an emoji or leaves it blank.
An API you depend on suddenly returns an empty object instead of the usual JSON payload.
A database query returns null because the data didn’t exist in production.

💡 Example: A payment system that assumes every transaction has a valid email may suddenly crash when a user signs up with a missing or malformed email.

The lesson? Production is full of “what ifs.” Writing defensive code, using input validation, and thorough testing of edge cases is critical.

C. Third-Party Dependencies

Modern applications are built on a mountain of third-party libraries, frameworks, and APIs. While this speeds up development, it also introduces risks - because your app is only as stable as the services it depends on.

Library updates: A new version of a library may contain breaking changes. If you deploy without pinning versions, production can suddenly break.
API downtime: Relying on external APIs like Stripe, Google Maps, or AWS services means that if they’re down, your app suffers too.
Rate limits: APIs often have usage limits. Everything may work fine in testing, but production traffic can hit those limits and cause failures.

💡 Example: Imagine your app depends on a currency conversion API. In development, it works perfectly with your limited testing. But in production, thousands of requests per hour exceed the API’s free-tier limit, and suddenly, your app starts returning errors to all users.

That’s why developers often use caching, retries, fallbacks, and monitoring to handle dependency issues gracefully.

D. Race Conditions & Concurrency Issues

Another big reason for production failures is concurrency. Code that runs perfectly with a single user may behave unpredictably when multiple users interact simultaneously.

Race conditions: Two processes trying to update the same record at the same time can lead to inconsistent data.
Deadlocks: Multiple processes waiting on each other can freeze the system.
Thread safety: Some operations aren’t safe when executed concurrently, leading to strange, hard-to-reproduce bugs.

💡 Example: Let’s say you’re running an e-commerce store. Two users buy the last item at the same time. Without proper concurrency control, both orders might succeed - and suddenly, you’ve sold one product to two different people.

These issues rarely show up locally because the traffic is low. But in production, under real-world load, they can cause chaos. This is why techniques like transactions, locks, queues, and stress testing are essential for production-grade systems.

🔗 👉 Click here to read the full Blog on TheCampusCoders

Why Every Developer Should Learn Git Early

Suhani Singh — Sun, 07 Sep 2025 05:21:50 +0000

Imagine this: you’ve been working on a project for two weeks. One night, you try to “fix a small bug,” and suddenly your entire project stops working. You panic, copy your files into a new folder called “Project_v2_final”, and start fixing things again. A few days later, the same thing happens-and now you have “Project_final_realfinal_v3”.

Sound familiar?
This is exactly why Git exists.

Git is a version control system, but more importantly, it’s a safety net for developers. It allows you to track changes, experiment freely, and collaborate with others without the fear of losing your work. The earlier you learn Git, the faster you grow as a developer-because it teaches you to code smart, not just code fast.

1. The Importance of Git for Developers

Think of Git as a time machine for your code. Every commit you make is like a snapshot in time-you can always go back to a previous version if something breaks. No more endless backup folders.

But Git is more than just backups. It’s a collaboration booster. Imagine you’re building a project with friends or working in a company. Multiple people will be editing files at the same time. Without Git, you’d be stuck copy-pasting code over email or WhatsApp, praying nothing breaks. With Git, everything is structured: branches, merges, and pull requests make teamwork seamless.

It’s also the industry standard. Whether you’re aiming for internships, freelance gigs, or full-time jobs, recruiters and senior developers expect you to know Git.

2. Common Beginner Struggles Without Git

When beginners skip Git, they face the same frustrating problems again and again:

Accidentally overwriting code: You make a change and suddenly lose hours of progress because you can’t get back to the old version.
Multiple versions of the same project: Those messy folders-“final_project_v4” or “final_final_reallyfinal”.
Teamwork headaches: Ever tried merging two different sets of code manually? It’s like mixing puzzle pieces from two different puzzles.
Fear of experimentation: Without Git, beginners hesitate to try new features because they’re afraid of breaking everything.

These struggles might feel small at first, but once you start working on larger projects or collaborating with others, they become a nightmare.

3. Benefits of Learning Git Early

When you learn Git early in your coding journey, you build habits that stick with you forever.

Confidence to Experiment: With Git, you’re no longer scared of breaking your code. You can create a new branch, try something risky, and if it fails, just delete the branch and move on.
Smooth Transition to Teamwork: Once you start internships, hackathons, or open-source contributions, Git becomes second nature. You don’t have to “learn under pressure” because you already know the basics.
Portfolio Power: Your GitHub profile is like a mini-resume. Recruiters often check it to see your coding style, consistency, and project history. A strong GitHub shows that you’re serious about your growth.
Future-Proofing Your Skills: Every major company-from startups to FAANG-relies on Git for collaboration. Learning it early means you’re already aligned with industry standards.

🔗 👉 Click here to read the full Blog on TheCampusCoders

Must Read Blog

Suhani Singh — Thu, 10 Jul 2025 05:57:03 +0000

Deepak Kumar

Jul 10 '25

Why You Should Start Using Signals in React (or Why Not Yet?)

#react #javascript #webdev #beginners

Comments 8

3 min read

DROGO Throne Ergonomic Gaming Chair Review: A Throne Built for Coders, Creators & Gamers Alike

Suhani Singh — Sat, 14 Jun 2025 01:11:45 +0000

Looking for a chair that delivers on comfort, functionality, and durability — without the outrageous price tag? The DROGO Throne Ergonomic Gaming Chair is making serious waves among both gamers and work-from-home professionals. With a sleek fabric finish, integrated massager, adjustable features, and solid build, this chair offers an experience you'd expect from models twice its price.

Why This Chair Stands Out

1. Comfort That Lasts All Day

The DROGO Throne is designed with a pocket coil cushion, high-density foam, and breathable fabric, ensuring maximum comfort for long sessions. Whether you're gaming for hours or grinding through work, the chair molds to your posture and keeps you relaxed.

Integrated massager lumbar pillow provides on-demand relief.
Headrest pillow supports your neck and reduces fatigue.
Retractable footrest lets you fully recline and relax.

2. Unmatched Adjustability

This isn't your regular office chair. It adapts to your lifestyle:

Reclines up to 180° – perfect for power naps or relaxed gaming.
10cm height adjustment to suit any desk setup.
Linkage armrests move with the chair to maintain elbow comfort.

3. Sturdy, Quiet, Built to Last

Crafted with a metal frame, nylon base, and tested PU casters, this chair is built for stability and smooth motion. It supports up to 136 kg, with no creaking or wobbling even during movement or recline.

Noise-free wheels glide effortlessly on hard floors.
Anti-rollover base ensures full support and safety.
Explosion-proof chassis provides a stable tilt mechanism.

Perfect for Home, Office & Gaming

Whether you're setting up a gaming den, a creative workstation, or a productivity hub, this chair blends comfort with aesthetics. Its winged back design gives multi-point body contact, enhancing posture while reducing stress on your spine and lower back.

What Users Are Saying

“Absolutely worth the money. The fabric feels premium, and the massager adds incredible value. Perfect for long hours of work or gaming.” – Verified Buyer
“Easy to assemble, rock-solid, and the recline + footrest combo is a game-changer.” – Verified Buyer
“One of the few chairs that actually deliver both design and durability. Highly recommended!” – Verified Buyer

Final Verdict

If you're on the hunt for an ergonomic chair that does more than just look good, the DROGO Throne is your answer. With features typically reserved for higher-end chairs, this model offers comfort, reliability, and customization at a highly competitive price.

Don’t Miss the Limited Time Deal

Now available at ₹15,738 (42% OFF) — down from ₹26,999.
Also includes No Cost EMI, Amazon Pay cashback offers, and 10-day replacement guarantee.

➡️ Click here to grab your DROGO Throne Chair on Amazon

Key Specs at a Glance:

Feature	Details
Material	Breathable Fabric + High-Density Foam
Support System	Massager Lumbar + Headrest Pillow
Weight Capacity	136 kg
Recline Angle	Up to 180°
Armrest	Linkage-Style, Padded
Base	5-point Nylon with PU Casters
Seat Design	Bucket Seat with Pocket Coil Cushion
Assembly Time	~15 Minutes (Tools Included)
Color Options	Black, Blue, Grey, Light Blue, Green

Product Description:

Looking to upgrade your setup?
Make your hours in front of the screen healthier and more productive.
This might just be the last chair you’ll ever need.

👉 Buy the DROGO Throne Ergonomic Chair Now

🚨 80% OFF on PrepInsta Prime – Limited Time Only! 💥

Suhani Singh — Fri, 30 May 2025 14:49:06 +0000

Are you preparing for your dream job? Whether it's cracking top MNCs, product-based companies, or government exams — PrepInsta Prime has your back. And right now, it's more affordable than ever with a massive 80% OFF – but only for a limited time!

🌟 What is PrepInsta Prime?

PrepInsta Prime is a premium subscription service by PrepInsta, India's #1 placement preparation platform. It's designed to give students and professionals everything they need to get placed in top companies across India and abroad.

Whether you're targeting TCS, Infosys, Wipro, Accenture, Capgemini, Cognizant, Deloitte, or product-based firms like Amazon, Microsoft, Adobe — PrepInsta Prime offers tailored content, mock tests, interview guidance, and certifications to help you crack the code.

It’s trusted by over 2.5 million users, and has helped countless aspirants get offers from over 150+ top recruiters.

🎁 What’s Included in the Prime Subscription?

Here’s why over 1M+ learners trust PrepInsta Prime:

✅ 200+ Job-Focused Video Courses

Learn everything from Aptitude, Reasoning, Verbal to DSA, Competitive Coding, Python, Java, SQL, DBMS, OS and more.
Courses curated by experts and industry professionals.
Beginner to advanced level content.

✅ Topic-wise Practice Questions

Get structured practice questions aligned with company-specific patterns (like TCS, Infosys, Wipro, Accenture, etc.).
Covers each topic in-depth, helping you master concepts quickly and efficiently.

✅ Mock Tests to Sharpen Your Skills

Simulate real exam environments with company-wise and topic-wise mock tests.
Boost your confidence with regular assessments and performance tracking.

✅ Real Projects + Certifications

Build real-world projects to strengthen your resume.
Earn certificates recognized by recruiters to stand out from the crowd.

🎯 Who is PrepInsta Prime For?

PrepInsta Prime is perfect for:

💼 College students in any year (especially final year students).
💻 Aspiring developers and software engineers.
📈 Job seekers and freshers preparing for off-campus or on-campus drives.
👨‍🏫 People switching careers into tech or preparing for interviews.
🧪 Those preparing for government exams with aptitude and reasoning components.

🎟 Use Code: PCC14091044

Unlock this incredible deal using the coupon code above and save a huge chunk of your prep budget.

⚡ Original Price: ₹33,999
🔥 Discounted Price: ₹6799 (After 80% OFF)

💬 "One subscription. All courses. One step closer to your dream job."

⏳ Don’t Miss Out – Offer Ends Soon!

This is a limited-time deal, and once it’s gone, it’s gone. Take action now and kickstart your placement journey with the best tools and resources in the industry.

👉 Grab the deal now

💚 With Love,

Team PrepInsta
🧠 Learn Smart. Get Placed.

Hiring Season is Here: Top Companies Are Hiring for 2026 Batch Graduates!

Suhani Singh — Fri, 18 Apr 2025 12:21:45 +0000

The wait is finally over — Hiring Season has officially begun!

Big names like Google, Microsoft, Flipkart, and over 7+ other top companies have opened their hiring processes for 2026 batch pass-outs.

If you're someone graduating in 2026, this is your golden opportunity to kickstart your dream career with some of the world's leading companies.

Why This Hiring Season Is Special?

Early Access: Companies are now focusing on early engagement, meaning you get internship or full-time offers well before graduation.
High Competition: With limited slots available, getting updated quickly is the key to success.
Exclusive Partnerships: Many colleges (maybe yours too!) have partnered with companies to provide direct hiring pipelines — making it mandatory for students to stay updated and participate actively.

Get Real-Time Hiring Updates on Instagram!

To make sure you never miss any hiring opportunity, Team PrepInsta has launched an Exclusive Hiring Instagram Channel dedicated to real-time updates, application links, exam details, and preparation tips.

Benefits of Joining:

Instant notifications on hiring drives.
Access to application links directly.
Company-specific preparation guidance.
Tips and tricks to crack aptitude, coding rounds, and interviews.
Special perks, webinars, and mentoring sessions.

Mandatory:

If your college is partnered with us, it’s mandatory for you to join the updates channel to stay informed and not miss crucial hiring deadlines.

How to Join and Apply?

It's simple!

Just click on the link below to join the exclusive Hiring Updates Channel and start applying for your dream companies today:

🎁 Join Here & Apply: https://cutt.ly/argxbZ3n

Remember, early preparation = better chances of selection!

A Final Note from Team PrepInsta

We are super excited to help you land your dream job!

Stay proactive, stay prepared, and make the most of every opportunity that comes your way.

This is your moment — don’t let it slip!

Team PrepInsta 💚

"Your Career, Our Mission!"

How I Use AI to Identify and Fix My Developer Skill Gaps Efficiently

Suhani Singh — Sat, 12 Apr 2025 02:08:20 +0000

Introduction: The Turning Point That Made Me Rethink My Skillset

A few months ago, I found myself stuck during a freelance project. It was a seemingly simple requirement—optimize the performance of a React application. But despite my solid understanding of the MERN stack, I realized I was guessing more than I was solving. That moment made me pause. It wasn’t about not knowing React—it was about not knowing what I didn’t know.

That’s when I began exploring how I could use AI not just for writing code or debugging, but for something much deeper: helping me identify the blind spots in my skills.

As developers, we’re constantly learning. But without direction, that learning becomes scattered. We watch tutorials, build side projects, and consume content, but how often do we ask, “What’s the next best thing for **me* to learn right now?”* That’s the question I set out to answer using AI.

This blog post walks you through exactly how I do it—how I use AI to analyze my current skillset, compare it to industry demands, and create a personalized roadmap for growth. Whether you're a beginner or a working developer, these strategies can help you learn with purpose.

1. Why Identifying Skill Gaps Matters

When we talk about improving as developers, most people think about adding more skills—learning the latest framework, understanding system design, diving into DevOps. But real improvement doesn’t just come from adding things. It comes from finding and fixing gaps in what you already know.

Here’s why skill gap identification matters:

1. Freelancing Efficiency

As a freelance developer, missing skills directly affect the quality of your work. If you don’t know proper performance optimization techniques, deployment workflows, or accessibility best practices, you’ll struggle to meet client expectations. Even if the project gets completed, it won’t be as efficient or scalable as it could be.

2. Job Interview Performance

I’ve experienced this firsthand—going into an interview confident in my MERN skills, only to stumble on something like server-side rendering or REST API security. These are skill gaps that don’t surface until they’re tested. Identifying them before you’re in the hot seat gives you a better shot at success.

3. Focused Learning

Instead of learning randomly or following every trending tutorial, knowing your weaknesses allows you to focus on what matters most. You’re not just learning—you’re leveling up with intent.

4. Confidence with Clients & Teams

When you’re aware of your limitations, you’re in a better position to communicate timelines, request support, or delegate work. You also build more trust by being transparent and showing that you’re actively working to improve.

🔗 👉 Click here to read the full Blog on TheCampusCoders

Turn Your React App into a PWA That Works Offline, Installs Like Magic & Feels Native

Suhani Singh — Fri, 11 Apr 2025 08:07:29 +0000

Introduction

The first time I encountered a Progressive Web App (PWA), I was using Twitter on a painfully slow connection while traveling. I remember being impressed that Twitter still loaded, allowed me to scroll, and even let me post a tweet. Later, I discovered that what I was experiencing was the magic of a well-built PWA.

PWAs are more than just websites. They combine the best of both web and mobile apps—lightweight, installable, offline-capable, and blazing fast. For developers, especially those already using React, building a PWA can be a game-changer. It means offering users the flexibility of the web with the performance and reliability of a native application.

In this blog post, we’ll walk through the entire process of turning a regular React app into a robust PWA. We'll not only touch on the how, but also explain the why at each step. Whether you're building a portfolio site, a budget tracker, or a full-fledged social media app, understanding how to “PWA-ify” your React app is a skill worth learning.

1. Prerequisites

Before we start writing any code, let’s take a quick look at what you'll need to follow along smoothly.

Basic React Knowledge

You don’t need to be an expert, but understanding React components, props, and hooks will help you a lot. If you’ve built a simple app like a to-do list or a weather app, you’re ready.

Node.js and npm Installed

We’ll use Node.js to run our development server and npm (or Yarn) to manage dependencies. Make sure you’ve got these installed. You can check by running:

node -v
npm -v

If you’re seeing version numbers, you’re good to go. If not, download them from https://nodejs.org/.

A React App to Work With

We’ll use Create React App (CRA) in this guide because it comes with built-in PWA support. If you already have a CRA project, you can use it. Otherwise, we’ll create one in the next section.

Tools and Libraries

While the native service worker provided by CRA is great, we’ll also introduce Workbox, a powerful toolset by Google for managing caching and offline behavior.

Real-World Use Case: Job Application Tracker

For this walkthrough, imagine we’re building a Job Application Tracker—a simple app where users can add jobs they've applied to, mark statuses, and track interviews. Making this app a PWA ensures users can check their application statuses even when offline, such as during travel or in areas with spotty connections

2. Setting Up the Project

To bring our Job Application Tracker idea to life, we’ll begin by setting up a fresh React project using Create React App. CRA is a solid starting point because it includes basic PWA configurations out of the box—especially the service worker setup that we’ll expand upon later.

Step 1: Create a New React App

Open your terminal and run:

npx create-react-app job-tracker-pwa

This command scaffolds a new React project in a folder called job-tracker-pwa with a working development setup.

Navigate into your project folder:

cd job-tracker-pwa

Start the development server to make sure everything’s working:

npm start

Once the server starts, open http://localhost:3000 in your browser. You should see the default CRA homepage.

At this point, we’ve got a basic React app running. Think of it as the foundation for our PWA. All the ingredients we need are here—we just need to fine-tune them.

Step 2: Understand the Folder Structure

Here’s a quick overview of the key folders and files we’ll be working with:

public/manifest.json – describes your app to the browser (name, icons, colors, etc.)
src/service-worker.js (or equivalent CRA abstraction) – handles caching and offline behavior
src/index.js – where you register the service worker
public/index.html – contains the link to the manifest file

We'll gradually update each of these to turn our app into a PWA.

Step 3: Clean Up the Boilerplate

To focus on our job tracker, let’s clean up the default content:

Delete the CRA logo and default content from App.js
Remove unnecessary CSS or assets in App.css and logo.svg
Replace it with a simple heading:

function App() {
  return (
    <div className="App">
      <h1>Job Application Tracker</h1>
      <p>Track your job applications, interviews, and offers.</p>
    </div>
  );
}

This gives us a clean slate to build from—just like clearing out a room before redecorating.

3. Understanding PWA Essentials

Before we begin tweaking the code to turn this into a real PWA, let’s understand what makes a web app progressive. It boils down to a few key technologies and concepts:

Web App Manifest

The Web App Manifest is a simple JSON file that gives the browser information about your app—its name, icon, theme color, how it should be displayed, and more.

It’s what allows a user to “install” your app to their home screen and what makes the app look like a native app when launched.

Service Workers

A Service Worker is a script that runs in the background, separate from your React app. It acts like a network proxy and can intercept requests, cache assets, and provide content even when the user is offline.

Service workers power the offline capabilities and performance boost that make PWAs so impressive. They’re what allowed Twitter to load even when I was halfway through a train tunnel.

HTTPS is Required

Service workers only work on secure origins. So once we deploy, the app must be served over HTTPS. Most platforms like Vercel, Netlify, and Firebase Hosting handle this for you automatically.

App Shell Model

PWAs typically use the App Shell model—essentially caching the core layout of the app (header, footer, routing, etc.) so it loads instantly even if the network is slow or unavailable. The actual content (like job application data) can be fetched and updated when the connection returns.

4. Creating the Web Manifest File

Imagine your app is a product on a shelf. The manifest file is its label—telling the browser what it’s called, what it looks like, and how it should behave when someone installs it.

The manifest is a JSON file located in the public/ folder of your project. Let’s open the one that CRA generated for us: public/manifest.json.

You’ll see some default settings like:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [...],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Let’s customize this to fit our Job Application Tracker:

{
  "short_name": "JobTracker",
  "name": "Job Application Tracker",
  "icons": [
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0d9488",
  "background_color": "#ffffff"
}

🔗 👉 Click here to read the full Blog on TheCampusCoders