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
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
Cookie Clicker Game
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
- Example Game (deployed with heroku so wait for it to load)
- Cookie Clicker Game Tutorial
- LocalStorage
- 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
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
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
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
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
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
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
- Build a Movie Search App Using React Hooks
- Movie Search App With ElasticSearch
- Build a Scalable Movie Browser App
- 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
- Weather App Codepen
- Build a Weather App With Node.js
- Build a Weather App FreeCodeCamp
- 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
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
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
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
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
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
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
Get The Jest Handbook (100 pages)
Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript
