JavaScript Project Ideas to Practice our Skills
Tags: career, webdev, productivity, codenewbie
Published: 2020-05-13 02:39:55

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.