Interested in learning JavaScript? Get my ebook at jshandbook.com
If you’re reading this post, you are probably looking for an idea. You likely want to build a simple app that you can use in a 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 not to take up all your time, 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 get it. I wrote this post to help myself, and I hope it will help you as well.
What you’ll find below
Some of the ideas are self-contained (not involving the use of an external API), while some make use of famous public APIs where you can easily grab pre-built data.
Some require a server part, and some do not, which might also depend on your implementation.
But I tried to make sure these ideas are:
- good for a tutorial
- good to experiment with web technologies
- not something that will take a week to figure out
- not “startup ideas”
- targeted to 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 without external dependencies
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 you to track multiple entities, for example more than one person’s weight
- It stores the weights somewhere
A calculator app
- A standard calculator: numbers, +, -, *, /, and the result
A book database
- Enter the books you own
- Enter the books you’d like to buy
- Store the book info and images
A recipes app
- Enter a name and 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
A bill tracker
- Log bills, amounts, and dates
- List bills
- Have a few graphs (this year / last year)
- Store them somewhere
An expenses tracker
- Log expenses and 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
- Show more recent first
- Attach pictures
- Store them somewhere
A pomodoro app
- Enter a time
- Start timer
- Alert when the time is over
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 ?
The game of life
A great project involving math and graphics.
A blog engine
- Allow user to login and add posts
- Visitors can add comments
- Store the data somewhere
A QA engine
- Allow user to login
- Add questions
- Answer to questions
- Allow original user to choose the best question
- Store the data somewhere
A forum engine
- Allow user to login
- Add posts
- 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
API-powered apps
An Hacker News client
- List the popular posts
- Show a post’s comments
- Show a user’s profile
- Search HN
Check out HNPWA and Awesome Hacker News for inspiration.
A Reddit client
- List the popular posts
- List the comments of a post
- Show a user’s 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 for inspiration.
Data for your sample apps
Sometimes you start building some simple app, but you’re bored with the data you’ve found that you can use. You don’t have to be bored! 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 that you check out Airtable, which provides a great API for developers. It’s very easy to use, like a database.
Here are some amazing public APIs you can use:
- The Cat API
- The Dog API
- The Chuck Norris API
- F**k Off As A Service API
- Quotes API
- Quotes API
- Dad Jokes API
- The Spotify API
- The New York Times API
- The Wikipedia API
- The Wikidata API
- The Medium API
- Design Quotes API
- The GoodReads API
- The Dribbble API
- The 500px API
- The Unsplash API
- The Giphy API — GIFs!
- The Pixabay API
- Exchange rates
- Site screenshots API
- The Oxford Dictionary API
- Website Technologies API
- The Mapbox API
- Music Lyrics API by Genius
- Site meta tags API
- The EventBrite API
- Open source projects changelogs
- The GitHub REST API
- The GitHub GraphQL API
- QR codes API
- The StackExchange API
- Words and synonyms
- The Nasa API
- The SpaceX API
- The Hacker News API
- The Instagram API
- The Reddit API
- The Slack API
- The Twitter API
- The YouTube API
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, and albums, all 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!
Interested in learning JavaScript? Get my ebook at jshandbook.com