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
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 2×2 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 2×2 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
- 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)
- 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)
- If there isn’t a match, the 2 cards will flip back to their original state (
hidden 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
- 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)
- User can draw different shapes (
rectangle, circle, star, 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
- 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
- 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:
curl -u "user-id" https://api.github.com/users/user-id/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!
Deixe um comentário
Seja o Primeiro a Comentar!