Sample web application prompt list

Every time I start a tutorial, I get confused and wonder which application I should build. To do? No more!

If you are reading this article, then you are looking for an idea, a simple application that you can use in your tutorials or sample projects to test new frameworks or APIs, but you can’t find it that really resonates with you s things.

It must be simple enough, but at the same time complex enough to be worthwhile.

I hear you thinking: "I don't want to build another to-do application."

I wrote this article to help myself, and I hope it will help you too.

Some ideas are independent (does not involve the use of external APIs), while others use well-known public APIs where you can easily obtain pre-built data.

Some require a server part, and some don't, which may also depend on your implementation.

But I try to keep these ideas:

  • Well set up a tutorial
  • You can try to use network technology
  • Things that don’t take a week to figure out
  • Not a "startup idea"
  • My goal is not a mobile application, but a web application
  • Easy to explain
  • Easy to build (less than 24 hours if prepared)
  • New features that are easy to extend

So, enough talk, this is the list!

Simple application

Weight tracker app

  • It accepts manual input of a set of weight measurements taken on different dates
  • It can draw a picture
  • It can allow tracking multiple entities, such as a person's weight
  • Store them somewhere

Calculator app

Standard calculator: number, +, -, *, / and result

Watch the video tutorial

Book database

  • Enter the book you own
  • Enter the book you want to buy
  • Store book information, images

Recipe app

  • Enter name, description and steps
  • illustrated
  • There are some rankings in difficulty and quality
  • Add the required time
  • Different pictures for each step
  • Store them somewhere

Watch the video tutorial

Bill tracker

  • Record bill, amount and date
  • List bills
  • There are some charts (this year/last year)
  • Store them somewhere

Expense tracker

  • Record expenses, mark expenses (or have categories)
  • List costs
  • There are some charts (last month/last year)
  • Store them somewhere

Chat app

  • Some kind of simplified relaxation
  • People enter without authentication and are assigned a name for their next visit
  • Store history
  • Add notification

Note-taking app

  • Add note
  • List all notes in the sidebar
  • Store them somewhere

Personal diary application

  • Add entry with date and text
  • Entry has a date
  • Show more latest first
  • Attach pictures
  • Store them somewhere

Pomodoro

  • Input time
  • Start timer
  • Reminder when the time is up

Watch the video tutorial

A memetic generator

  • There are 10 popular meme pictures
  • Let users add text
  • The result is image + text
  • Store history

Tic Tac Toe

We all know what Tic Tac Toe is 🙂

Watch the video tutorial

Game of life

A great project involving math and graphics.

Watch the video tutorial

Blog engine

  • Allow login and add posts
  • Visitors can add comments
  • Store data somewhere

QA Engine

  • Allow login
  • Allow questions to be added
  • Allow to answer questions
  • Allow the original user to choose the best question
  • Store data somewhere

Forum engine

  • Allow login
  • Allow adding posts
  • Allow comments on posts
  • Store data somewhere

Embeddable live chat

Consider walkie-talkie or Olark.

  • There is a "backend" where you can respond
  • Embed in webpage
  • Let people write to you privately

API-driven applications

Hacker News Client

  • List popular posts
  • Show post comments
  • Show user profile
  • Search HN

ViewHampwithHacker NewsSeek inspiration

Reddit client

  • List popular posts
  • List comments on posts
  • Show user profile

Instagram client

  • Enter hashtags and get the latest posts
  • Enter username and get the latest posts
  • Allow to store one or more hashtags/usernames and get all the latest posts from them

GitHub API client

  • List popular repositories of today/week/month
  • List the latest commits in the repository
  • Show the public repositories of individuals or organizations ranked by stars

Unsplash API client

  • Search for images by subject
  • Let the user enter a term and display related images

Start atUnsplash API


Data for your sample application

Sometimes, you start to make some simple applications, but are boring to find the data you can use. You don’t have to use real data or random data.

Public API you can use in the sample project

Maybe you have an ideal CRUD application idea, or an API compatible idea, but you don't want to create an API in the first place.

I suggest to check it outAir table, It provides a good API for developers, very easy to use, such as a database.

You can use the amazing public API:

Image placeholder for your example project

Image generator

Avatar:

Sample text generator for sample projects

Lorem Ipsum is boring. Add spices:

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

Other false data

Pseudo JSONHas a large number of forged data generation functions.

JSONPlaceholderContains fake posts, comments, photos, to-dos, users and photo albums, available for REST.

Need fake name/user data generation? ViewUI namewithRandom user

wrap up

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

have fun!

Download mine for freeJavaScript beginner's manual


More js tutorials: