15 App Ideas to Build and Level Up your Coding Skills

App ideas that are great to improve your coding skills, experiment with new technologies and add to your portfolio!

We all know that it can be hard sometimes to find new application ideas that you could build in order to either improve or learn a new programming language or framework.

In this article we’re going to look into 15 app ideas which are:

great to improve your coding skills 💪;

great to experiment with new technologies 🆕;

great to be added in your portfolio to impress your next employer/client 📁;

great to be used as examples in tutorials (articles or videos) 📃;

easy to complete and also easily extendable with new features 👌;

And on top of that, each app idea has:

A clear and descriptive objective; A list of User Stories which should be implemented; A list of bonus features which are option, but “good-to-have”; All the resources and links to help you find what you need to complete the project

We divided these app ideas into three tiers based on the knowledge and experience required to complete them. The tiers are: Beginner, Intermediate and Advanced.

In this article, you’ll find 5 ideas from each tier.

Try to publish your reusable components, from either app to Bit.dev, a cloud component hub. You can document them and add examples in each component page (on Bit’s site) — then, use them in future apps or simply share them with your team.

Example: exploring React components published on Bit.dev

1. Countdown Timer

Tier: 1-Beginner

We all have important events we look forward to in life, birthdays, anniversaries, and holidays to name a few. Wouldn’t it be nice to have an app that counts down the months, days, hours, minutes, and seconds to an event? Countdown Timer is just that app!

The objective of Countdown Timer is to provide a continuously decrementing display of the he months, days, hours, minutes, and seconds to a user entered event.

Constraints

Use only builtin language functions for your calculations rather than relying on a library or package like MomentJS. This assumes, of course, that the language of your choice has adequate date and time manipulation functions built in.

You may not use any code generators such as the Counting Down To site. You should develop your own original implementation.

User Stories

User can see an event input box containing an event name field, an date field, an optional time, and a ‘Start’ button.

User can define the event by entering its name, the date it is scheduled to take place, and an optional time of the event. If the time is omitted it is assumed to be at Midnight on the event date in the local time zone.

User can see a warning message if the event name is blank.

User can see a warning message if the event date or time are incorrectly entered.

User can see a warning message if the time until the event data and time that has been entered would overflow the precision of the countdown timer.

User can click on the ‘Start’ button to see the countdown timer start displaying the days, hours, minutes, and seconds until the event takes place.

User can see the elements in the countdown timer automatically decrement. For example, when the remaining seconds count reaches 0 the remaining minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display.

Bonus features

User can save the event so that it persists across sessions

User can see an alert when the event is reached

User can specify more than one event.

User can see a countdown timers for each event that has been defined.

Useful links and resources

Images of analog tube-based countdown timers can be found here

clearInterval MDN

MDN setInterval MDN

MDN Date MDN

Example projects

Countdown Timer built with React

Simple Clock/Countdown Timer

2. FlipImage

Tier: 1-Beginner

It’s important for Web Developers to understand the basics of manipulating images since rich web applications rely on images to add value to the user interface and user experience (UI/UX).

FlipImage explores one aspect of image manipulation — image rotation. This app displays a square pane containing a single image presented in a 2x2 matrix. Using a set of up, down, left, and right arrows adjacent to each of the images the user may flip them vertically or horizontally.

You must only use native HTML, CSS, and Javascript to implement this app. Image packages and libraries are not allowed.

User Stories

User can see a pane containing a single image repeated in a 2x2 matrix

User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image

Bonus features

User can change the default image by entering the URL of a different image in an input field

User can display the new image by clicking a ‘Display’ button next to the input field

User can see an error message if the new images URL is not found

Useful links and resources

Example projects

Image Effects by bennettfeely

3. Notes App

Tier: 1-Beginner

Create and store your notes for later purpose!

User Stories

User can create a note

User can edit a note

User can delete a note

When closing the browser window the notes will be stored and when the User returns, the data will be retrieved

Bonus features

User can create and edit a note in Markdown format. On save it will convert Markdown to HTML

User can see the date when he created the note

Useful links and resources

Example projects

Markdown Notes built with Angular on Codepen

Markdown Notes built with React

Markdown Notes built with Angular 7 and bootstrap 4

4. Recipe

Tier: 1-Beginner

You might not have realized this, but recipe’s are nothing more than culinary algorithms. Like programs, recipe’s are a series of imperative steps which, if followed correctly, result in a tasty dish.

The objective of the Recipe app is to help the user manage recipes in a way that will make them easy to follow.

Constraints

For the initial version of this app the recipe data may be encoded as a JSON file. After implementing the initial version of this app you may expand on this to maintain recipes in a file or database.

User Stories

User can see a list of recipe titles

User can click a recipe title to display a recipe card containing the recipe title, meal type (breakfast, lunch, supper, or snack), number of people it serves, its difficulty level (beginner, intermediate, advanced), the list of ingredients (including their amounts), and the preparation steps.

User click a new recipe title to replace the current card with a new recipe.

Bonus features

User can see a photo showing what the item looks like after it has been prepared.

User can search for a recipe not in the list of recipe titles by entering the meal name into a search box and clicking a ‘Search’ button. Any open source recipe API may be used as the source for recipes (see The MealDB below).

User can see a list of recipes matching the search terms

User can click the name of the recipe to display its recipe card.

User can see a warning message if no matching recipe was found.

User can click a ‘Save’ button on the cards for recipes located through the API to save a copy to this apps recipe file or database.

Useful links and resources

Example projects

Recipe Box — a Free Code Camp Project (FCC)

React Recipe Box

5. Quiz App

Tier: 1-Beginner

Practice and test your knowledge by answering questions in a quiz application.

As a developer you can create a quiz application for testing coding skills of other developers. (HTML, CSS, JavaScript, Python, PHP, etc…)

User Stories

User can start the quiz by pressing a button

User can see a question with 4 possible answers

After selecting an answer, display the next question to the User. Do this until the quiz is finished

At the end, the User can see the following statistics

Time it took to finish the quiz

How many correct answers did he get

A message showing if he passed or failed the quiz

Bonus features

User can share the result of a quiz on social media

Add multiple quizzes to the application. User can select which one to take

User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times

Useful links and resources

Example projects

Quiz app built with React (wait for it to load as it is hosted on Heroku)

Quiz app interface

6. Book Finder App

Tier: 2-Intermediate

Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.

User Stories

User can enter a search query into an input field

field User can submit the query. This will call an API that will return an array of books with the corresponding data (Title, Author, Published Date, Picture, etc)

User can see the list of books appearing on the page

Bonus features

For each item in the list add a link that will send the User to an external site which has more information about the book

Implement a Responsive Design

Add loading animations

Useful links and resources

You can use the Google Books API

Example projects

Book Finder

7. Card-Memory-Game

Tier: 2-Intermediate

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

User Stories

User can see a grid with n x n cards ( n is an integer). All the cards are faced down initially ( hidden state)

is an integer). All the cards are faced down initially ( state) User can click a button to start the game. When this button is clicked, a timer will start

User can click on any card to unveil the image that is underneath it (change it to visible state). The image will be displayed until the user clicks on a 2nd card

When the User clicks on the 2nd card:

If there is a match, the 2 cards will be eliminated from the game (either hide/remove them or leave them in the visible state)

state) If there isn’t a match, the 2 cards will flip back to their original state ( hidden state)

state) When all the matches have been found, the User can see a dialog box showing a Congratulations message with a counter displaying the time it took to finish the game

Bonus features

Use can choose between multiple levels of difficulty (Easy, Medium, Hard). Increased difficulty means: decreasing the time available to complete and/or increasing the number of cards

User can see the game statistics (nr. of times he won / he lost, best time for each level)

Useful links and resources

Example projects

Flip — card memory game

Memory Game

SMB3 Memory Card Game

8. Drawing App

Tier: 2-Intermediate

Create digital artwork on a canvas on the web to share online and also export as images.

User Stories

User can draw in a canvas using the mouse

using the mouse User can change the color

User can change the size of the tool

User can press a button to clear the canvas

Bonus features

User can save the artwork as an image ( .png , .jpg , etc format)

, , etc format) User can draw different shapes ( rectangle , circle , star , etc)

, , , etc) User can share the artwork on social media

Useful links and resources

Example projects

Drawing App by Florin Pop

Drawing App by t0mm4rx

9. Simple Online Store

Tier: 2-Intermediate

The goal of the Simple Online Store is to give your users the capability of selecting a product to purchase, viewing purchase information, adding it to an online shopping cart, and finally, actually purchasing the products in the shopping cart.

Constraints

Starting out you may implement your product inventory as an array of JavaScript objects if you are developing in JavaScript. For other languages feel free to choose the in memory solution of your choice.

User Stories

User can click on a ‘View Products’ button on the Landing Page to display the Products Page.

User can see a card on the Products Page for each Product showing the product thumbnail, name, price, a short description, and a ‘Select’ button.

User can see a Product Details page displayed when the ‘Select’ button is clicked showing the same information from the product card, but also a unique product id, a long description, ‘Add to Cart’ button, and a ‘See More Products’ button.

User can see a confirmation message when the product is added to the shopping cart.

User can click on the ‘See More Products’ page to return to the Products Page.

User can see a ‘Shopping Cart’ button on both the Landing Page or the Products Page. Hint: a top bar might be a good common location for this button.

User can click on the ‘Shopping Cart’ button to display the Shopping Cart page containing the product id, name, price, and quantity ordered input box for each product previously added to the Shopping Cart.

User can see a total purchase amount on the Shopping Card that is calculated as the sum of the quantities multiplied by the unit price for each product ordered.

User can adjust the quantity ordered for any product to adjust the total purchase amount.

User can click a ‘Place Order’ button on the Shopping Cart Page to complete the order. User will see a confirmation number when the order has been placed.

[ ) User can click a ‘Cancel Order’ button on the Shopping Cart Page to cancel the order. User will see the product quantities and the total purchase amount reset to zero.

User can click a ‘See More Products’ button on the Shopping Cart Page to return to the Products Page. If the order hasn’t been placed yet this will not clear the products that have already been added to the Products Page.

Bonus features

User can see an error message if the quantity ordered exceeds the “on hand” quantity of the product.

User can specify a bill to and ship to address when the order is placed from the Shopping Cart Page

User can see shipping charges added to the total purchase amount

User can see sales taxes added to the total purchase amount

Developer will implement the product inventory in an external file or a database.

Useful links and resources

There are plenty of eCommerce Site Pages out there. You can use Dribbble and Behance for inspiration.

Example projects

eCommerce Animations

10. To-Do App

Tier: 2-Intermediate

The classic To-Do application where a user can write down all the things he wants to accomplish.

User Stories

User can see an input field where he can type in a to-do item

field where he can type in a to-do item By pressing enter (or a button), the User can submit the to-do item and can see that being added to a list of to-do’s

User can mark a to-do as completed

User can remove a to-do item by pressing on a button (or on the to-do item itself)

Bonus features

User can edit a to-do

User can see a list with all the completed to-do’s

User can see a list with all the active to-do’s

User can see the date when he created the to-do

When closing the browser window the to-do’s will be stored and when the User returns, the data will be retrieved

Useful links and resources

Example projects

Todo App built with React

To Do List on Codepen

11. Calorie Counter

Tier: 3-Advanced

Getting and staying healthy requires a combination of mental balance, exercise, and nutrition. The goal of the Calorie Counter app is to help the user address nutritional needs by counting calories for various foods.

This app provides the number of calories based on the result of a user search for a type of food. The U.S. Department of Agriculture MyPyramid Food Raw Data will be searched to determine the calorie values.

Calorie Counter also provides you, the developer, with experience in transforming raw data into a format that will make it easier to search. In this case, the MyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be downloaded and transformed into a JSON file that will be easier to load and search at runtime (hint: take a look at the CSV file format).

User Stories

Developer will create a JSON file containing the food items to be searched. This will be loaded when the app is started.

User can see an panel containing a food description input text box, a ‘Search’ button, and a ‘Clear’ button.

User can enter search terms into the food description input text box.

User can click on the ‘Search’ button to search for the matching food.

User can see and warning message if no search terms were entered.

User can see a warning message if no matches were found.

User can see a list of the matching food items, portion sizes, and calories in a scrollable results panel that is limited to 25 entries.

User can click on the ‘Clear’ button to clear the search terms and results list.

Bonus features

User can see the count of the number of matching food items adjacent to the results list.

User can use a wildcard character in search terms.

User can see more than 25 entries from a search by clicking a Down icon button to add more matching food items to the search results list.

Developer will implement load the MyPyramid data into a database or a data structure other than an array for faster searching.

Useful links and resources

MyPyramid Food Raw Data

Example projects

Food Calculator

12. Chat App

Tier: 3-Advanced

Real-time chat interface where multiple users can interact with each other by sending messages.

As a MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features).

User Stories

User is prompted to enter a username when he visits the chat app. The username will be stored in the application

User can see an input field where he can type a new message

where he can type a new message By pressing the enter key or by clicking on the send button the text will be displayed in the chat box alongside his username (e.g. John Doe: Hello World! )

Bonus features

The messages will be visible to all the Users that are in the chat app (using WebSockets)

When a new User joins the chat, a message is displayed to all the existing Users

Messages are saved in a database

User can send images, videos and links which will be displayed properly

User can select and send an emoji

Users can chat in private

Users can join channels on specific topics

Useful links and resources

Example projects

Chatty2

13. GitHub Timeline

Tier: 3-Advanced

API’s and graphical representation of information are hallmarks of modern web applications. GitHub Timeline combines the two to create a visual history of a users GitHub activity.

The goal of GitHub Timeline is accept a GitHub user name and produce a timeline containing each repo and annotated with the repo names, the date they were created, and their descriptions. The timeline should be one that could be shared with a prospective employer. It should be easy to read and make effective use of color and typography.

Only public GitHub repos should be displayed.

User Stories

User can enter a GitHub user name

User can click a ‘Generate’ button to create and display the named users repo timeline

User can see a warning message if the GitHub user name is not a valid GitHub user name.

Bonus features

User can see a summary of the number of repos tallied by the year they were created

Useful links and resources

GitHub offers two API’s you may use to access repo data. You may also choose to use an NPM package to access the GitHub API.

Documentation for the GitHub API can be found at:

Sample code showing how to use the GitHub API’s are:

You can use this CURL command to see the JSON returned by the V3 REST API for your repos:

Example projects

CSS Timeline

Building a Vertical Timeline With CSS and a Touch of JavaScript

14. Shuffle Card Deck

Tier: 3-Advanced

As a Web Developer you’ll be asked to come up with innovative applications that solve real world problems for real people. But something you’ll quickly learn is that no matter how many wonderful features you pack into an app users won’t use it if it isn’t performant. In other words, there is a direct link between how an app performs and whether users perceive it as usable.

The objective of the Shuffle Card Deck app is to find the fastest technique for shuffling a deck of cards you can use in game apps you create. But, more important it will provide you with experience at measuring and evaluating app performance.

Your task is to implement the performance evaluation algorithm, the Xorshift pseudorandom number generator, as well as the WELL512a.c algorithm if you choose to attempt the bonus feature.

User Stories

User can see a panel containing a text box the user can enter the number of rounds into, three output text boxes to contain the starting time, ending time, and total time of the test, and two buttons — ‘JS Random’, ‘Xorshift’.

User can enter a number from 1 to 10,000 to specify the number of times (or rounds) the selected random number is to be executed.

User can click one of the three buttons to start the evaluation of the selected random number algorithm. The random number algorithm will be executed for the number of rounds entered by the user above.

User can see a warning message if number of rounds has not been entered, if it is not within the range 1 to 10,000, or if it is not a valid integer.

User can see a tabular output area where the results of each algorithm are displayed — algorithm name, time started, time ended, and total time.

User can see a warning dialog with a ‘Cancel’ and a ‘OK’ button if the number of rounds is changed before all three tests have been run.

User can click the ‘Cancel’ button in the warning dialog to dismiss the dialog with no changes.

User can click the ‘OK’ button in the warning dialog to clear the output area and close the warning dialog.

Bonus features

User can see a third algorithm button — ‘WELL512a.c’.

Developer should review the output and determine why the fastest algorithm is faster than the slowest algorithm.

Useful links and resources

15. Survey App

Tier: 3-Advanced

Surveys are a valuable part of any developers toolbox. They are useful for getting feedback from your users on a variety of topics including application satisfaction, requirements, upcoming needs, issues, priorities, and just plain aggravations to name a few.

The Survey app gives you the opportunity to learn by developing a full-featured app that you can add to your toolbox. It provides the ability to define a survey, allow users to respond within a predefined timeframe, and tabulate and present results.

Users of this app are divided into two distinct roles, each having different requirements:

Survey Coordinators define and conduct surveys. This is an administrative function not available to normal users.

Survey Respondents Complete surveys and view results. They have no administrative privileges within the app.

Commercial survey tools include distribution functionality that mass emails surveys to Survey Respondents. For simplicity, this app assumes that surveys open for responses will be accessed from the app’s web page.

User Stories — General

Survey Coordinators and Survey Respondents can define, conduct, and view surveys and survey results from a common website

Survey Coordinators can login to the app to access administrative functions, like defining a survey.

Defining a Survey

Survey Coordinator can define a survey containing 1–10 multiple choice questions.

Survey Coordinator can define 1–5 mutually exclusive selections to each question.

Survey Coordinator can enter a title for the survey.

Survey Coordinator can click a ‘Cancel’ button to return to the home page without saving the survey.

Survey Coordinator can click a ‘Save’ button save a survey.

Conducting a Survey

Survey Coordinator can open a survey by selecting a survey from a list of previously defined surveys

Survey Coordinators can close a survey by selecting it from a list of open surveys

Survey Respondent can complete a survey by selecting it from a list of open surveys

Survey Respondent can select responses to survey questions by clicking on a checkbox

Survey Respondents can see that a previously selected response will automatically be unchecked if a different response is clicked.

Survey Respondents can click a ‘Cancel’ button to return to the home page without submitting the survey.

Survey Respondents can click a ‘Submit’ button submit their responses to the survey.

Survey Respondents can see an error message if ‘Submit’ is clicked, but not all questions have been responded to.

Viewing Survey Results

Survey Coordinators and Survey Respondents can select the survey to display from a list of closed surveys

Survey Coordinators and Survey Respondents can view survey results as in tabular format showing the number of responses for each of the possible selections to the questions.

Bonus features

Survey Respondents can create a unique account in the app

Survey Respondents can login to the app

Survey Respondents cannot complete the same survey more than once

Survey Coordinators and Survey Respondents can view graphical representations of survey results (e.g. pie, bar, column, etc. charts)

Useful links and resources

Libraries for building surveys:

Some commercial survey services include:

Example projects

Javascript Questionnaire

Conclusion

Now you have a basis of 15 applications that you can play with. We created a GitHub repository where you can find even more ideas if you are interested and you are welcomed to contribute, share and give it a star!

Happy Coding! ^_^

Learn More