/ #web development 

App Ideas: 17 Web Apps You Can Build To Level Up Your Coding Skills

Have you ever wanted to build something as a web developer? The answer is probably…yes. A common problem web developers have is that they don’t know WHAT to build and HOW to build them. Well, you’ve come to the right place.

This is a list of 17 web apps you can (and should) build to level up your coding skills and expand your coding knowledge.

This isn’t just a simple list of projects you can build. Each of these projects are described in detail with links to tutorials so you can develop them from the ground up. If you want to become a solid front-end web developer, then stay tuned.

Table of Contents

Notes App

Difficulty: Beginner

With a notes app, you can create and store any of your notes for later use. It’s fairly easy to build, and can be done with only JS for the functionality.

Basic Features

User should be able to create, edit, and delete a note. When a user closes the browser window, the notes will be stored and when the user returns to the application, the data will be retrieved (use localStorage).

Bonus Features

User can create and edit a note in Markdown formatting. The application will convert the Markdown to HTML on save. The User should also be able to see the date when he made the note.

Useful Resources and Tutorials

  1. Create Notes App With JS Tutorial
  2. Notes App Tutorial Docs
  3. LocalStorage
  4. Markdown Syntax

Quiz App

Difficulty: Intermediate

With a quiz app, you can practice and test you knowledge by answers questions in a quiz. You can create a quiz app for the purpose of testing yourself or others.

Basic Features

User can start the quiz by pressing a button, can see a question with 4 possible answers, and then move on to the next question. At the end of the quiz, the user will see what questions they got correct or incorrect. The application should show them how long it took to finish the quiz, and whether or not they passed or failed the quiz.

Bonus Features

Make the end of the application have a restart button to redo the quiz. On the redo, shuffle the order of the questions so the user can’t cheat as easily.

Useful Resources and Tutorials

  1. Example Project
  2. Another Example
  3. Build a Quiz App Tutorial

Difficulty: Beginner-Intermediate

A cookie clicker game is an incremental game where a user clicks on a big cookie, earning a single cookie per click. Then, they can spend cookies on purchasing assets that will automatically produce cookies.

Basic Features

A displayed number should increment by 1 every time a user clicks the cookie. User should be able to change the name of their bakery. Once the user reloads the page, the changed name of the bakery should save. The number of cookie clicks should also be saved using localStorage.

Bonus Features

Add investments that cost a certain amount of cookies. Once the user buys those investments, the amount of cookies they get for each click increases.

Useful Resources and Tutorials

  1. Example Game (deployed with heroku so wait for it to load)
  2. Cookie Clicker Game Tutorial
  3. LocalStorage
  4. Original Cookie Clicker

E-commerce Online Store

Difficulty: Intermediate

The simple online store gives users the capability of selecting products to purchase, viewing the purchase information, adding to their cart, and actually purchasing the products that they added to their shopping cart.

Basic Features

User can view their products on a Products page. They can see a card on the Products page for each product. Each product has a photo, name, price, short description, and a ‘Add To Cart’ button.

User sees a Product Details page displayed when they click the ‘Add To Cart’ button. The Product Details page also shows a unique product id, detailed description, ‘Add To Cart’ button, and other products that are similar.

When the user clicks on the ‘See More Products’ page, they return to the original Products page.

User can see how much their total purchase costs, how many of each product they want, and is able to cancel or change their purchase.

Bonus Features

User sees an error message if they order more than the amount of that product in stock. User can specify their billing info and shipping address.

Useful Resources and Tutorials

  1. Build a Shopping Cart Tutorial
  2. Ecommerce Bootstrap Theme

Book Finder

Difficulty: Intermediate

An easy-to-use application that allows users to search for books by entering a query. The query can either be the book title, author, or genre. Then, the books are displayed in a list on the page with all of the matching data.

Basic Features

User can enter a search query into an input search field. A query can be submitted which calls an API that returns a list of books with the corresponding data. Then, users can see the list of books that match what they searched for.

Bonus Features

Each book has a link that goes to the book on Amazon. You can also add loading animations and an improved design, or just use a website theme.

Useful Resources and Tutorials

  1. Example Project
  2. Book Finder App Tutorial
  3. JS DOM Search Filters

To-Do List App

Difficulty: Intermediate

The todo list is an application where a user can keep track of their daily, weekly, and even yearly tasks. Users can write down everything they want to accomplish or do today.

Basic Features

User types in a task item in an input field. The user can also submit the task and see that it is added to a list of tasks. This can be done by pressing the enter key or a button. Tasks can also be marked as completed, and removed by pressing on a button.

Bonus Features

Users should be able to edit their tasks easily. The tasks are also saved with LocalStorage.

Useful Resources and Tutorials

  1. Code a Better To-do List
  2. Make a Todo List With JS: Dev Ed

Card Memory Game

Difficulty: Intermediate

A card memory game is where you click on a card to see what image is underneath it, and then try to find the matching image underneath other cards.

Basic Features

Users should see a grid of cards that are faced down (hidden state). Then, users click a button to start the game. When they click the button, a timer will be started.

To reveal the image that is underneath, users will click on any card (visible state). Then, the image will be shown until the user clicks on a 2nd card.

If the 2 cards match, they will be removed and eliminated from the game. If the cards don’t match, they will be flipped back to their original hidden state.

When the user finds all matching cards, they will see a “Congratulations” message. They will also see a counter showing them how long it took them to match all of the cards.

Bonus Features

To make this card game more difficult, you can make multiple levels of difficulty. Do this by decreasing the time available to match all of the cards. Users can also see how many times they won or lost.

Useful Resources and Tutorials

  1. Make a Memory Card Game
  2. Wikipedia Memory Card Game
  3. Memory Card Game Example

Chat App

Difficulty: Advanced

Build a real-time chat application where multiple users can message each other. Real-time functionality doesn’t need to be built right away.

Basic Features

User signs up by entering a username. The username will be stored in the chat application’s database. User can type a new message in an input field. By clicking a “Send” button or pressing enter, the user’s message will be displayed in the chat box.

Bonus Features

To improve this application, messages should be visible to all users in the chat app. Messages should be saved in a database. Users can also send images, videos, links, emojis, and can even chat privately.

Useful Resources and Tutorials

  1. Build a React Chat App in 10 Minutes
  2. Build a Chat App
  3. Socket.io Chat App Tutorial

Website Builder

Difficulty: Very Advanced

Build a complex application that lets you easily builds websites in minutes that’s similar to Webflow or Wix.

Basic Features

Users should be able to sign up and login. Then, they can choose website themes that you already built using the application. Users should then be able to change the content or design of each element in the website.

This is very difficult to build, so don’t feel bad if you’re not at the level that you can’t build this application from scratch.

Bonus Features

To make this complex web app even more complicated, add a deployment option.

Useful Resources and Tutorials

  1. Application Example

Movie Search App

Difficulty: Intermediate

Build a simple movie search app using React JS.

Basic Features

User retrieves a list of movies and render them in a movie list component. To search for a movie, user types in an input search bar. When the user clicks on a movie, they view the movie details in a modal.

Bonus Features

User can pick a genre and see a list of movies in that genre. User can even sign up to save their movies.

Useful Resources and Tutorials

  1. Build a Movie Search App Using React Hooks
  2. Movie Search App With ElasticSearch
  3. Build a Scalable Movie Browser App
  4. Movie Search App Demo

Weather App

Difficulty: Intermediate

Learn how to build a simple and functional weather app with JS.

Basic Features

User searches for a city in an input element. When a user presses enter or clicks a submit button, the weather API gets called to display the weather. User can view the weather in his/her location. User can choose between Celsius or Fahrenheit.

A weather icon or background image changes depending on weather conditions (sunny, rainy).

Bonus Features

User can even search for weather information of other locations.

Useful Resources and Tutorials

  1. Weather App Codepen
  2. Build a Weather App With Node.js
  3. Build a Weather App FreeCodeCamp
  4. Weather App Tutorial Dev Ed

Beat Maker

Difficulty: Intermediate-Advanced

Build a fun beat maker that makes simple and exciting beats to jam along to during coding sessions.

Basic Features

User can click panels that makes different sounds.

Bonus Features

User can make beats by adding the sounds together in a recording.

Useful Resources and Tutorials

  1. Build a Music App With JS - Dev Ed

Javascript Clock

Difficulty: Beginner

Wouldn’t it be great to have a simple application that counts down the months, weeks, days, hours, minutes, and seconds to a certain event in the future?

That’s why you should build a simple countdown timer to provide a display of decrementing months, weeks, days, hours, minutes, and seconds to a user specified date and event.

Basic Features

User chooses a date in the future. User clicks a button and a countdown timer begins. User can add a label to an event. For example, a user can name an event “My friend’s birthday” to help them remember their friend’s birthday.

Bonus Features

User sees a warning message if the event name is blank, or if it is not filled out correctly. User can save the event so he or she doesn’t lose it or forget about it. User gets alerted when the timer is finished. You can also add a feature to allow the user to make more than 1 event.

Useful Resources and Tutorials

  1. Countdown Timer Tutorial
  2. Simple Clock/Timer Example
  3. Build Countdown App With React

Javascript Tip Calculator

Difficulty: Intermediate

A tip calculator is a calculator that calculates a tip based on the price and percentage of the total bill.

Basic Features

User can enter preferred amount in an HTML form. User can also enter the cost of the bill.

Then, once the user hits submit, a fair tip amount is generated by doing a simple calculation in JS.

Bonus Features

To make sure the user tips a fair amount, he or she should enter a description of how their service was.

Useful Resources and Tutorials

  1. Build a Tip Calculator Tutorial
  2. Tip Calculator Example

Chess Game

Difficulty: Advanced

Make a chess game application where users can play chess day and night. You can build it with a variety of programming languages.

Basic Features

User can create an account to keep track of their games. User can join a live game and play any other people. When a user moves a piece, the piece should do what it would in actual chess games.

Bonus Features

Make chess puzzles to help users get better at chess. You can also make tournaments that keep track of who wins and loses.

Useful Resources and Tutorials

  1. Make a Chess Game
  2. Build a JS Chess Board
  3. Chessboard JS

Food Calorie Tracker

Difficulty: Advanced

Getting and staying healthy requires consistent exercise, proper nutrition, and mental peace. The goal of this calorie counter app is to help the user stay or become healthier.

Basic Features

The user will be able to keep track of what they eat and drink. A JSON file containing food items to be searched will be displayed when the app is opened. User can enter and keep track of food items.

User can see a warning message if what they entered is not available or spelled wrong. To clear the search items and results list, user can click on a “Clear” button.

Bonus Features

User can see more search entries by clicking a “Show More” button.

Useful Resources and Tutorials

  1. Food Calorie Tracker App Tutorial
  2. Calorie Tracker Example

Weight Conversion Tool

Difficulty: Beginner

Build a simple weight converter app using JS. It converts pounds to grams, kilograms, and ounces.

Basic Features

User enters a number that gets converted to other weights.

Bonus Features

User can keep what weights they converted saved (use LocalStorage).

Useful Resources and Tutorials

  1. Simple Weight Converter Tutorial
  2. Weight Converter Source Code
  3. Weight Converter App W3schools

It’s Your Turn, Go Build

You now have a list of 17 web apps you can build and play with to improve your web development skills. If you find other app ideas that aren’t on this list, feel free to tweet at me

unsplash-logoHal Gatewood

Author

Josh Ternyak

Hi, I am Josh Ternyak. I am a front-end web developer based in Minneapolis, Minnesota who builds websites and talks about how he does it.

Get The Jest Handbook (200+ pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.