DEV Community

John Au-Yeung
John Au-Yeung

Posted on

JavaScript Project Ideas to Practice our Skills

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.

Top comments (0)