Frontend projects for your resume

What reviewers check first in a frontend project

The live link comes first, because it's the one thing anyone can check in ten seconds. Test it on a phone: in India, mobile made up 77.3% of web traffic in September 2026, against 22.1% for desktop, according to StatCounter.

A page that loads slowly or breaks at 360 pixels wide makes a poor first impression, whatever the code looks like. If it holds up, the next stop is the repository: the README, the folder structure and a few commits.

Google publishes the thresholds for a page that feels fast. A good experience means the largest element renders within 2.5 seconds, interactions respond in 200 milliseconds or less, and layout shift stays at 0.1 or below, measured at the 75th percentile of visits (web.dev). You don't need perfect scores, but you should know these three numbers and what moves them.

Five frontend projects worth building

Each project below covers a different part of a frontend intern's work. Build them in this order, and don't start the next one until the current one has a live link.

Pick subjects from your own life. A splitter for your actual flat's expenses gives you better interview stories than a generic finance app, because you can explain why each feature exists.

Handle errors the way reviewers expect

The dashboard is where error handling shows, or doesn't. Beginners often assume fetch fails when the server returns an error, but it doesn't.

MDN puts it plainly: "The fetch() function will reject the promise on some errors, but not if the server responds with an error status like 404" (MDN Web Docs). Check the response yourself:

export async function getJson(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`Request failed with status ${res.status}`);
  }
  return res.json();
}

Then give the interface four states: loading, data, empty and error with a retry button. Turn on network throttling in your browser's developer tools and record a short clip of each state for the README.

What to put in each README

Assume a reviewer gives your README a minute at most. Put the useful parts at the top.

• One line on what the app does and who it's for.
• The live link, then a screenshot or a short GIF.
• The stack with versions, for example React 19 and Vite.
• How to run it locally in two or three commands.
• One thing you'd change with another week.

GitHub also lets you pin a profile README above your repositories. Create a public repository with the same name as your username and add a README.md to its root (GitHub Docs). Link your three best projects from it.

How to host frontend projects for free

GitHub Pages is enough for a portfolio. It hosts static sites from a repository, and its published limits are 1 GB per site, a soft bandwidth limit of 100 GB a month and a soft limit of 10 builds an hour (GitHub Docs).

A React app with client-side routing needs one extra step there. Opening a deep link such as /expenses/march directly returns a 404, because Pages looks for a file at that path. Use a hash router or copy your built index.html to 404.html.

Run Lighthouse on the deployed site before you put the link on your resume. Chrome's Lighthouse audits performance, accessibility, best practices and SEO, and you can run it from the Lighthouse tab in DevTools.

How to talk about your projects in an interview

Expect the interviewer to pick one project and ask you to walk through it. Prepare two minutes for each, in the same order every time.

Start with the problem and who it's for, in one sentence. Then describe one decision you made and what you gave up for it, such as storing data in localStorage instead of a backend because the app had to work offline.

Next, tell the story of one bug: what broke, how you found it and what you changed. Finish with numbers where you have them, such as the Lighthouse performance score before and after you compressed your images, or how long the page took to load on a throttled connection.

Interviewers often follow up by asking what you'd change. Have one honest answer ready for each project, because "nothing" ends the conversation.

At Amazon, for example, interviews come after a timed online coding assessment, and its front-end intern interviews cover data structures too. How much DSA you need for an internship covers that part.

What to leave off your resume

Leave off anything without a live link. Few reviewers will clone and run a repository just to see what it does.

Cut tutorial clones you can't extend. A to-do list is fine practice, and DevIt's own Frontend track includes one, but your headline project should use real data and survive a bad network.

Two finished projects beat ten half-done ones. If you can't explain a project's trade-offs for two minutes, take it off.

Building these with structure and review

If you'd rather build with deadlines and someone grading your work, DevIt's Frontend Developer Internship follows a similar path. It needs no prior coding, and projects are submitted through GitHub and CodePen.

The 1-month plan covers a personal profile page, a styled landing section, responsive pricing cards, an interactive to-do list and a responsive landing page as the capstone. The 3-month plan adds a React component gallery, a React data dashboard and a React and Tailwind CSS capstone.

It's a paid training internship with no stipend: each track page shows its fee, and the internships page lists the other tracks. If you're still choosing a side, read frontend vs backend developer first. Before you apply anywhere, read are virtual internships worth it and how to spot a fake internship offer.

Traffic share, hosting limits and DevIt track details checked 12 October 2026.