A list of sample Web App Ideas

Feb 19, 2018updated Jul 6, 2026

A big list of sample web app ideas to build for tutorials and practice, from a weight tracker, calculator, and notes app to AI-powered apps and API clients.

~~~

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.

Tip: I turned this list into a sample app idea generator — get a random idea with one click, or let AI invent a fresh one for you.

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, and some use AI APIs, because nowadays adding an LLM to your app is just one API call away.

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

But I try to keep those ideas:

good to build a tutorial
good to experiment with web technologies
not something that will take a week to figure out
not “startup ideas”
I do not target mobile apps but web apps
easy to explain
easy to build (less than 24 hours if prepared)
easy to extend with new features

So, enough talk, here’s the list!

Simple apps
AI-powered apps
API-powered apps
Data for your sample apps
Wrapping up

Simple apps

A weight tracker app

It accepts a set of manual entries of weight measurements taken at different dates
It can plot a graph
It can allow to track multiple entities, for example more than one person weight
Store them somewhere

A calculator app

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

See video tutorial

A book database

Enter the books you own
Enter the books you’d like to buy
Store the book info, images

A recipes app

Enter a name, a description with the steps
Have pictures
Have some ranking for difficulty and quality
Add the time needed
Have different steps with a picture for each
Store them somewhere

See video tutorial

A bill tracker

Log bills, amounts and date
List bills
Have a few graphs (this year / last year)
Store them somewhere

An expenses tracker

Log expenses, tag them (or have categories)
List expenses
Have a few graphs (last month / last year)
Store them somewhere

A chat application

Some sort of stripped-down Slack
People enter without authentication and are assigned a name, stored for when they come back
Store the history
Add notifications

A notes app

Add a new note
List all your notes in the sidebar
Store them somewhere

A personal diary app

Add entries with a date and text
Entries have a date
Show more recent first
Attach pictures
Store them somewhere

A pomodoro app

Enter a time
Start timer
Alert when the time is over

See video tutorial

A meme generator

Have 10 popular meme images
Let the user add the text
Result is image + text
Store the history

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

Allow to login and add posts
Visitors can add comments
Store the data somewhere

A QA engine

Allow to login
Allow to add questions
Allow to answer to questions
Allow original user to choose the best question
Store the data somewhere

A forum engine

Allow to login
Allow to add posts
Allow to comment on posts
Store the data somewhere

An embeddable live chat

Think Intercom or Olark.

Have a “backend” where you respond
Embed on a web page
Let people write to you privately

A habit tracker

Define habits you want to build
Mark each day as done or missed
Show streaks and a calendar view
Store the data somewhere

A bookmarks manager

Save a URL with a title and tags
Fetch the page title automatically
Search and filter by tag
Store them somewhere

A URL shortener

Enter a long URL, get a short one
Redirect visitors to the original URL
Count the clicks
Store the data somewhere

A kanban board

Think a stripped-down Trello.

Create columns (todo, doing, done)
Add cards and drag them between columns
Store the board state

A flashcards app

Create decks of question/answer cards
Flip a card to reveal the answer
Track which cards you got right
Add spaced repetition if you want a challenge

A markdown editor

Write markdown in a textarea
Show a live preview next to it
Save documents somewhere
Export to HTML

AI-powered apps

These days it’s easier than ever to add AI to an app. You call an LLM API, you get text (or images, or audio) back.

The interesting part is building the app around the AI: the UI, the data handling, the user experience.

Most of these ideas work with any LLM API provider (OpenAI, Anthropic, Google…), or a local model.

A chatbot with a personality

Build a chat UI
Send messages to an LLM API with a system prompt that defines a personality
Stream the response as it comes in
Store the conversation history

This is the “hello world” of AI apps, and streaming responses is a great exercise.

A “chat with your documents” app

Upload a text or markdown file
Ask questions about its content
Pass the document (or relevant chunks) to the LLM as context

A great way to learn about RAG (retrieval-augmented generation) without the buzzwords getting in the way.

A text summarizer

Paste a long article or a URL
Get a short summary, key points, or a TL;DR
Let the user pick the output style (bullet points, one paragraph, ELI5)

An AI recipe generator

Enter the ingredients you have in the fridge
Get a recipe you can cook with them
Ask for variations (vegetarian, quicker, spicier)
Save the recipes you liked

An image generation playground

Enter a prompt, get an image back from an image generation API
Show a gallery of previous generations
Let the user tweak the prompt and compare results

A language learning buddy

Chat with the AI in the language you’re learning
Get corrections when you make mistakes
Ask for translations and explanations
Track new words you learned

An AI-powered flashcards generator

Paste your study notes
The AI generates question/answer flashcards from them
Review the cards and edit them
Combine this with the flashcards app above

A voice notes transcriber

Record audio in the browser
Send it to a speech-to-text API
Get the transcription, then ask the AI to clean it up or summarize it
Store the notes somewhere

A code explainer

Paste a snippet of code
Get a plain-English explanation of what it does
Ask follow-up questions
Bonus: let the user pick the level (beginner / expert)

API-powered apps

A Hacker News client

List the popular posts
Show a post comments
Show a user profile
Search HN

Check HNPWA and Awesome Hacker News for inspiration

A Reddit client

List the popular posts
List the comments of a post
Show a user profile

An Instagram client

Enter an hashtag and get the latest posts
Enter a username and get the latest posts
Allow to store one or more hashtags/usernames and get all the latest posts from those

A GitHub API client

List the popular repositories from today / week / month
List the latest commits in a repository
Show a person or organization public repositories ranked by stars

An Unsplash API client

Search images by topic
Let the user enter a term, show relevant images

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!

Tagged: JavaScript · All topics

~~~