15 App ideas to build and level up your coding skills
时间: 2019-05-22 11:57:45
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.
Tip: No matter what language or framework you’re using — good code is always written with modularity in mind. Bit is a great tool to share, organize and reuse your components, to build better and faster.
In this article we’re going to look into 15 app ideas which are:
great to improve your coding skills :muscle:;
great to experiment with new technologies :new:;
great to be added in your portfolio to impress your next employer/client :file_folder:;
great to be used as examples in tutorials (articles or videos) :page_with_curl:;
easy to complete and also easily extendable with new features :ok_hand:;
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.
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
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
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.
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
input
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
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)
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:
visiblehidden
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)
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.
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.
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
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! )
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.
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.
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)
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!