Category: Practice Project Ideas

In the software development world, practice makes perfect. Therefore, we should find as many ways to practice programming as possible.

In this article, we’ll look at some practice project ideas that level up our coding skills.

Emoji Translator

Emojis are icons that are used to represent expressions that people show on their faces to express their feelings.

There’re so many of them probably most people don’t know what they mean.

Therefore, we can make an emoji translator app so that we can translate emojis into English.

Emojis are parts of the standard Unicode character set so we can make a dictionary or map to convert emojis characters entered by users back to English.

Our emoji translator app would take inputs with emojis and then create the translation by making the copy of the string and then map the emojis inside back to their English equivalent.

To make it fancy, we can add a Clear button to clear the input value.

Meme Generator

We can let users enter text and add a picture to create memes from them with our app.

To make this easy, we use the HTML canvas to do that. To manipulate the canvas in a way that let us add text and images and then download the output, we can use some library like Konva to make that easier.

Konva also lets us add handles to transform objects like any photo editor, so that’s another great feature of Konva.

Typing Practice App

Making an app to let users practice their typing also gives us practice with making apps.

We take the typed input from the user and then check the inputted text against what we have that we ask the user to type.

We can do the check by splitting the string that’s typed in and do the same with the text that we asked the user to type and then check if each word is entered in the same order.

The questions can be rotated among as many questions as we like. We can either hard code them in our app or make an API to draw random questions.

We can make it even fancier by adding a UI to add or remove questions so that we can change the questions sets easily.

Also, we’ve to calculate the typing speed of the user by dividing the elapsed time since the session has started with the number of words typed in.

Therefore, we need a timer to calculate elapsed time since the user started typing.

Then we’ll get a nice typing practice apps that users can use.

Web Scraper

We can create a web scraper to get public information that we want to get from a website.

This way, we don’t have to search for the data manually.

We can use it to search one site or multiple sites. The data that it searches for can be anything under the sun.

In the process, we learn how to parse HTML and XML.

Tax Calculator

We can make our own app to calculate taxes that we’ve to pay after getting paid for our work.

It lets us set the tax rules and add the amount of income from each paycheck or job.

We can then use the tax rules to calculate the tax amount that we have to pay based on the total amount that we received from our paychecks.

Deal Finder

We can build a deal finder app with something like the eBay API to get us to search for the prices of products.

Other retailers like Wal-Mart, Best Buy, and others also have APIs to get their price and inventory data.

We just have to call those APIs to get the data and display them on our screen.

On our app, we can add a search box to search for items by making requests to those APIs with the search keywords.

If we can find what we want with those APIs, we can also scrape the data from websites and look at them.

If we’re scarping, then we should scrape too quickly so that our IP address won’t get blocked by the sites we’re scraping.

Conclusion

There’re lots of things that we can build that are useful for us to use and to practice our web development skills.

A typing tutor is easy to build and fun to use. Also, we can build our own emoji translator to translate emojis into English.

We can also build things to help us with purchases and taxes like a deal finder or tax calculator.

In the software development world, practice makes perfect. Therefore, we should find as many ways to practice programming as possible.

In this article, we’ll look at some practice project ideas that level up our coding skills.

Membership Site

We can build a website that lets users look at the content when they sign up for an account and log in.

This way, we practice building apps that have user management and authentication, which is used in almost all apps.

We can use it to display items of our choice once the user logged in.

To make it fancy, we can add a user management portal to let us manage users.

Cookies and tokens can be used for authentication to keep authentication data.

Product Landing Page

A landing page promotes a product with a beautiful page. We can build landing pages to practice our design chops and make good looking front ends.

Also, we can learn about layouts with flexbox and grid.

Quiz Game

We can make a quiz game that loads questions and let players answer them. The questions can be hard-coded in our app, use an existing API like Open Trivia to load questions, or build our own API and load questions into a database and read them from there,

Our app will let people pick or enter answers and then we check them against our questions.

Also, we can add a timer so that people have limited time to answer questions.

EBook App

An app to display an ebook is useful. The content can be loaded from a local database or from an API.

We can even load it from a file written in Markdown or HTML.

There’re many ways to make an ebook app, including static site generators like Gridsome and Gatsby, or we can stick with traditional dynamic apps that load things on the fly.

Survey Form

The survey form is great for practicing building dynamic forms. We can build a UI for managing survey questions and letting people answer questions.

To make creating dynamic forms easier, we can use frameworks like React, Angular, and Vue to do this.

The questions can be stored in an API.

We can let users add questions with various kinds of controls like text input, checkbox, radio buttons, and more.

To-Do List

To-do list apps are a very popular project for a practice app. we can let users add, edit, and remove tasks.

Also, we have to let users check off the tasks that they’ve done.

To make it even better, we can add reminder capabilities, which aren’t in most practice or tutorial to-do list apps.

Sliding JavaScript Drawers

A sliding drawer menu takes some skill to build. It opens from one side of the screen and slows it as an overlay of the web page.

Personal Portfolio Website

A personal portfolio is always needed if we want to get various opportunities as developers.

Therefore, we should make one that looks good and have some sample projects in them.

To make a portfolio site, we can make a static website to display our projects with a neat layout, lots of pictures, and nicely designed graphics.

Also, we should make sure that our site loads fast so people can see our stuff right away.

Recipes App

A recipe app is not only useful, but we can also use it to practice our own coding skills.

It has many moving parts, including managing recipes with a UI. Also, we have to add a page for people to look at our recipes and flip through them.

The form to let people add a recipe should let people enter the title, content, and one or more image or even videos.

Therefore, a simple-looking recipe app actually has lots of things that we can do to make it work more functional than the rest.

We can also add different categories and let the user tag them with the categories.

Conclusion

There’re lots of apps we can build to practice our programming skills. Simple looking projects like recipes app, to-do list and membership sites all have a lot small moving parts that we have to implement.

To practice building dynamic forms, a survey app is a great one to build.

To get good at JavaScript, you have to practice a lot. To practice a lot, you probably need a variety of app ideas.

In this article, we’ll look at some app and widgets ideas we can use to practice JavaScript programming.

Random Wikipedia Article App

We can use the Wikipedia API to get a regular Wikipedia article.

To get a random Wikipedia article, we’ve to choose a random article ID and then retrieve the article with the API.

Also, we’ve to parse the character sets and display them article properly. This may be a challenge since the articles may be written in characters that may not be displayed property on our browsers without intervention.

Weather App

We can use the OpenWeatherMap API, which has a free tier that’s good enough to make a practice app with.

We can use it to search for data weather data like weather forecast by location and then display them on a screen.

Also, we can make a browser extension to display the weather as a widget.

Tip Calculator

A tip calculator is an app that we can all use. It’s great for making sure that we didn’t underpay or overpay tips.

We can get the tipping convention for different countries and then use that to calculate the tips from the total price.

Then we can display the tip amount on the screen. Also, we can add a feature to divide the tip amount by the number of people in case we have to split the bill.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Cost Splitter

Similar to the tip calculator, we can create a cost splitter app to add up all the cost items and divide them by the number of people to split the bill with, which is a value that users enter.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Loan Payment Calculator

We can use the loan payment formula to calculate the amounts that we have to pay and find out when we’re done paying our loan.

The formula takes the principal amount, interest rate, and the number of months to pay.

So we need to let the user enter all of that data so that we can make the calculation.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Random Name Picker

We can create an app that lets user pick a random name from a list of names that they entered.

The names can be entered as a comma-separated list or a newline-separated list.

HTML to PDF Converter

An app that takes a URL of a web page or a web page file and converts it to a PDF is useful.

We can let users enter their URL or upload a file from the front end, then we can process the HTML with a Node app and convert it to PDF with a library of our choice.

For the back end, we can use frameworks like Express or Nest.js to take the request.

Unit Conversion Calculator

Unit conversion calculators are always useful. We can make one that converts weights and lengths for example.

We let users enter inputs into input boxes and display the result on the screen.

Like any other app, we should check if the numbers are valid before converting.

Secret Message Encoder/Decoder

This is a fun app that transforms messages that we want to encode with our own algorithm. Then we have to decode it when someone has the secret key.

To do all that we probably need some mapping to convert the data. We can do that by changing the code point of each character in the string by a fixed number for example.

JavaScript’s string methods can be used to get the code point and convert the code point back to the corresponding character.

Quiz Game

We can make our own quiz game by loading a bunch of questions and answers into a database and then display the questions and let players enter their answers.

If it matches, then we display a message saying that the answer is correct. Otherwise, we display a message telling the player that it’s wrong.

We can make it multiple choice or we can let players enter their answer. To make loading the questions and answers easier, we can use an ORM like Sequelize, which we can use to seed data.

Conclusion

There’re plenty of JavaScript app ideas we can use to build up or JavaScript skills. If we can do them all on our own, then we know we’re a real developer.

To get good at JavaScript, you have to practice a lot. To practice a lot, you probably need a variety of app ideas.

In this article, we’ll look at some app and widgets ideas we can use to practice JavaScript programming.

Chat App

With WebSockets, we can do real-time communication in our apps. We can create our own chat app by using libraries like Socket.io, which has both the client and server library needed for real-time communication.

Use the client on the front end and server on the back end to send and receive data in real-time so that we can have a chat room.

News App

A news app is a good opportunity to get XML from RSS feeds and aggregate them into our own app.

We’ve to parse the XML into JSON so that we can use the data in our app.

In addition, there’s APIs like the News API where we can get headlines from for free.

Appointment Scheduler

An appointment schedule has data entry forms to add entries for appointments. Then we have to display them on a calendar.

In the calendar, we’ve to add links or buttons to let users edit or delete calendar entries.

The appointment data should be saved to a database.

If we want to make is more sophisticated, we can add invitation capabilities to send emails to people we want to invite to our appointment.

RESTful API

We can practice building a Node.js RESTful API which follows the conventions of REST.

The GET, POST, PUT, PATCH and DELETE routes have to correspond to the database operations that they should be doing.

GET routes should retrieve data, POST routes should create data, PUT and PATCH routes should update data, and DELETE routes should delete data.

Also, URLs in the routes should follow common conventions like using query strings for query parameters and URL parameters for getting data by ID and looking up nested resources.

Frameworks like Express and Nest.js can all handle requests with all these HTTP verbs so we can use them to build a proper REST API.

99 Bottles

We can make our own app to display the ’99 bottles of beer on the wall’ lyrics in our app.

Since the lyric repeats so much, we can use loops and functions to display them the lyrics on our web page with JavaScript.

8 Ball

We can create our own 8 ball app in JavaScript. All we have to do is let users enter questions and display a random response after the user entered a message.

To make it better, we can also add buttons to let users clear the inputs and outputs.

Photo by Jordan Sanchez on Unsplash

Rock Paper Scissors

Rock Paper Scissors is a fun game we all played before. We can turn it into an app by letting the computer play rock-paper-scissors with us by randomly picking one of those results and displaying them on the screen.

We can display a picture of ‘rock’, ‘paper’, or ‘scissors’ when they’re chosen.

To make it better, we can also keep the score in local storage and given the player the option to play again.

Countdown Clock

A countdown clock is one that counts down from a given time span to 0.

We can create our own by calculating the elapsed time with the JavaScript Date constructor and then subtract the elapsed time from the end time.

The end time is computed from the time when the Start button is clicked plus the time span that’s entered.

To make the calculations easier, we should convert everything to milliseconds before doing the calculation.

The setInterval function lets us update the time in a set interval.

If the time has passed, we show a button to let the user start over.

Pomodoro Timer

A Pomodoro Timer is a countdown timer that runs for 25 minutes. The difference is that it also contains a todo list that we can add tasks that we can do within 25 minutes.

Therefore, in addition to the countdown timer that we have above, which starts from 25 minutes, we also have to add a todo list that lets us add and remove tasks and also check them off when we’re done with them.

Conclusion

Lots of apps that we can build to practice JavaScript. In this article, we went through timer apps, which lets us manipulate Date objects.

Also, we have apps like news apps, appointment calendar apps, etc. which have many features we have to build. Games are also fun to build and play.

To get good at JavaScript, you have to practice a lot. To practice a lot, you probably need a variety of app ideas.

In this article, we’ll look at some app and widgets ideas we can use to practice JavaScript programming.

Calculator App

We can create a calculator app with buttons like a real calculator. To make the buttons work, we have to manipulate strings so we can build the arithmetic as users click the buttons.

Then, when the user clicks enter, we’ve to calculate the result. We may use the dread eval function if we want to go the easy route or we can parse the arithmetic expression string ourselves to compute the result.

React Native Todo Application

React Native is a React-based mobile framework for creating mobile apps with React and JavaScript code.

It’s a great way to begin learning about mobile development as it’s an easy transition from making mobile web apps.

We can use React and its libraries to create a mobile todo app.

Job Scraping Web App

We can make our own app to create scrape job listings from a website. To write it with JavaScript, we’ve to make it run on Node.js

There’re libraries like request which can make HTTP requests to web pages and then we can parse the result with something like cheerio.

Twitter Data Miner

Like with the job scraper app, we can get the data from navigating to pages by parsing Twitter pages and making requests to the URLs programmatically.

Then we can parse the response and parse them as we did with the job scraper.

We can also use the Twitter Node SDK to get data that way, which is better than scraping from Twitter directly if the data we want is available.

Microblog

We can build something like Twitter where we can post messages and have a comment section below it for people to respond.

If we want to improve it, we can also let users upload images and videos. Be sure to check for format and size before accepting the upload.

We can also parse hashtags if we want to make it even better.

Spell Checker

We can build our own spell checker by parsing strings from the inputted values and then check each word for spelling mistakes.

Then we’ve to give them some suggestions for words that the user may want to change to for the words with spelling mistakes.

HTTP Server

Node.js comes with the http module that we can make our own HTTP server with.

We can learn how to parse request cookies, headers, and body so that we can do that do something with them.

It’s a great way to learn more about HTTP communication.

Flashlight App

A flashlight app can is made more sophisticated by letting users change color, brightness, etc.

Then we have a flashlight app that’s better than the rest. We can do that easily with plain JavaScript on the browser.

App With User Authentication

User authentication is something that most apps have to do since they hold private user data.

Therefore, making an app with user authentication is great practice. We can create a simple front end to let users sign up for a user account and log in.

Then we’ve to create a back end app for saving the user data and letting people log in with the right credentials.

We may also add multiple kinds of users if we want to add some authorization capabilities to our authentication app.

Trello Clone

Trello is a simple task tracker. It lets us drag and drop our task boxes to different columns to update their status.

Therefore, to make a Trello clone, we’ve to learn how to create a UI with drag and drop capabilities and updates the task status as users drop the task into a new box.

Also, we’ve to create a form to let users add and update forms.

Yelp Clone

Yelp is a review site for restaurants and events. We can create our own Yelp clone by creating forms for letting people enter restaurants, events, and reviews.

Also, we’ve to add a user form to let users register and add those things we mentioned above.

Conclusion

There’re lots of ideas that we can create practice apps from to practice programming with JavaScript. We just have to close the tutorials and start practicing.

Then we’ll become a proficient JavaScript developer in no time.