Skip to content

A list of sample Web App Ideas

Every time I start a tutorial I find myself in a limbo wondering which app should I build. A to-do app? Not again!

If you’re reading this post you are looking for an idea, a simple app that you can use in your tutorial or in your example project to test a new framework or API, but you can’t find anything that really resonates with you.

It needs to be simple enough but at the same time complex enough to be worth doing.

”I don’t want to build another to-do app”, I hear you thinking.

I wrote this post to help myself, and I hope this will help you as well.

Some of the ideas are self-contained (not involving the use of an external API), some make use of famous public APIs where you can easily grab pre-built data.

Some require a server part, some do not, which might also depend on your implementation.

But I try to keep those ideas:

So, enough talk, here’s the list!

Simple apps

A weight tracker app

A calculator app

A standard calculator: numbers, +, -, *, /, and the result

See video tutorial

A book database

A recipes app

See video tutorial

A bill tracker

An expenses tracker

A chat application

A notes app

A personal diary app

A pomodoro app

See video tutorial

A meme generator

Tic-tac-toe game

We all know what a tic-tac-toe game is 🙂

See video tutorial

The game of life

A great project involving math and graphics.

See video tutorial

A blog engine

A QA engine

A forum engine

An embeddable live chat

Think Intercom or Olark.


API-powered apps

A Hacker News client

Check HNPWA and Awesome Hacker News for inspiration

A Reddit client

An Instagram client

A GitHub API client

An Unsplash API client

Start at Unsplash API


Data for your sample apps

Sometimes you start doing some simple app, but you’re bored at finding data you can use. You don’t have to, you can use real data, or random data.

Public APIs you can use in example projects

Maybe you have an idea for a perfectly nice CRUD app, or something that works with an API, but you don’t want to create the API in the first place.

I recommend to check out Airtable, which provides a great API for developers, very easy to use, like a database.

There are amazing public APIs you can use:

Image placeholders for your sample projects

Image generators

Avatars:

Sample text generator for your sample projects

Lorem Ipsum is boring. Spice it up:

If you insist on using Lorem Ipsum, Loripsum is a good generator.

Other fake data

FakeJSON has tons of fake data generation capabilities.

JSONPlaceholder has fake posts, comments, photos, todos, users, albums ready for REST consumption.

Need fake name/user data generation? Check UI Names and RandomUser

Wrapping up

I hope this list is comprehensive enough to suit your needs!

Have fun!

→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code

Here is how can I help you: