100 JavaScript Project Ideas

Let’s face it, you spend more time thinking about new project ideas than you should. We’ve all been there, whether you try to come up with something to practice a skill, challenge a candidate in an interview, or build the next billion-dollar app, we’ve all spent some time thinking about project ideas.

In this article, I’ve collected 100 of them, so you can have an easier job choosing your next challenge. I’ve included designs for most of the projects so you don’t have to be a UX, and I will leave references to tutorials where appropriate, so you can cheat if you get stuck. I’ve also come up with a set of features that can act as acceptance criteria and listed some key takeaways so you know what can you learn by building each project.

JavaScript Course

I’ve also created an interactive tool called UI Challenge, where you can randomly generate a challenge for yourself with a random set of tools. Do you have a project idea that you want to be added to the tool? You can do that too. Don’t forget to leave a reference for your bio so we can give you credit.

With that being said, let’s see the 100 JavaScript project ideas, ordered by different types, such as small projects, apps, games, or components. Let’s start with the simple ones.


#1 β€” Create a To-Do App

By now, it would be a crime to leave out a to-do app from this list, so let’s quickly get this out of the way. The reason todo apps are so great for starter projects is that they have simple features, yet you can create a full-fledge, usable application in a matter of hours, while also learning key concepts in JavaScript. So what can you learn from this?

Todo app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#2 β€” Create a Counter

Building a counter is another great way to get started with JavaScript. Just as for the majority of the projects here, you can get familiar with DOM manipulation, as well as event listeners, and basic state management. You don’t need to worry about CSS too much, as we are more interested in the functionality here.

Counter design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#3 β€” Create a Calculator

Creating a simple calculator is yet another great way to get exposure to JavaScript. Here we are starting to have more and more functionality, meaning it’s a great starter project for learning how you can structure your code to make it more easily maintainable, scalable, and readable.

Calculator design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#4 β€” Create a Contact Form

A contact form lets you practice not just client-side JavaScript, but also server-side if you want to opt for the harder route. Of course, you can also create a functional contact form without having to worry about the backend, using only API calls.

Contact form design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#5 β€” Create a Landing Page

We’ve yet to create a full webpage in one go, so as a next project, we can look into building a landing page. We can also integrate the contact form we’ve built previously into the bottom of the page. There’s not so much JavaScript involved with the project, rather it’s about learning how to structure your HTML and layout your elements with CSS. But to get some JavaScript into the mix still, we can add smooth scrolling for anchors.

Landing page design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#6 β€” Create a Toggleable Sidebar

Let’s take a look at some components now. Components can help you build reusable pieces of code, and they are just the right size in terms of complexity: they are small enough so you can practice key concepts in a short amount of time, but they are just large enough to give you some challenges while doing so. One of these projects is creating a toggleable sidebar.

Sidebar design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#7 β€” Create a Tooltip Component

Another great challenge is to build a tooltip component. Tooltips can let you learn about hover effects, dynamically inserting content, and positioning. They should be positioned above the content. But should they also cover sticky elements, such as a fixed header?

Tooltip component design

✨ Features:

tooltip({
    selector: '.dom-element',
    trigger: 'click',
    position: 'top-left',
    closeButton: true
});
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#8 β€” Create a Hamburger Menu

Building a hamburger menu is another great way to hone your JavaScript skills. You can combine this project with a sidebar component that can be toggled on and off using this menu. You can also throw in some animations into the mix if you would like to learn more about CSS too.

Hamburger menu design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#9 β€” Create an Image Slider

An image slider is heavy in JavaScript, and if you want to make it customizable, then you have to go the extra mile. In this challenge, you’ll learn about transitioning between elements and handling user interaction on desktop, as well as on mobile.

Image slider design

✨ Features:

slider({
    selector: '.dom-element',
    animation: 'slide',
    arrows: true,
    dots: true,
    images: [...]
})
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#10 β€” Create an FAQ Component

Next up, we have an FAQ component. FAQs are usually displayed in accordions which can act as a great base for learning how to toggle states in JavaScript. It’s a simple, but fun project where you can also enhance your HTML and CSS skills.

FAQ Component design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#11 β€” Create a Customizable Modal

Designing and creating a customizable modal is another great way to get yourself in the habit of building reusable, flexible components that you can later take with you to other projects. In this project, you will learn how to work with different layers through z-index, how you can use data attributes to store metadata in the DOM, and how you can use those in JavaScript. If you want to go the extra mile, you can also enable the use of callback functions for the buttons to execute custom events.

Customizable modal design

✨ Features:

modal({
    selector: '.dom-node',
    title: 'Are you sure?',
    text: 'All your data will be deleted...',
    buttons: [
        {
            title: 'Cancel',
            type: 'secondary',
            callback: () => { console.log('hide modal'); }
        },
        {
            title: 'Yes, I\'m sure',
            type: 'primary',
            callback: () => { console.log('delete system32'); }
        }
    ]
})
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#12 β€” Create a Bookmarklet

If you rather want to improve your workflow while learnings JavaScript instead of building components, a great way to do that is to build a bookmarklet. A bookmarklet is like a bookmark that holds a piece of JavaScript code.

Once you click the bookmarklet, instead of opening a new page, you execute that code. You can implement various useful scripts this way, from highlighting outgoing links on the page to displaying extra information.

Create a bookmarklet

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#13 β€” Create Tabs

Using tabs is a common way to organize, and display data. In this project, you’ll learn about how you can switch out content by interacting with the tabs, and if you want to learn about the drag and drop API, you can also make the tabs draggable. Mixing this with a close button also lets you take a look at how to remove DOM elements completely.

Tabs component design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#14 β€” Create a Download Progress Bar

Giving feedback to the user is one of your main jobs as a frontend developer. A download progress bar lets you do just that. Here you can learn more about promises, the different states they can take, the async/await keywords, and how you can manage different states in order to reflect the current progress of a download or file upload on the UI.

Download Progress bar

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#15 β€” Create a Form Validator

Form validation is another common task you will often find yourself dealing with. In this project, you can learn how to validate input fields, and give actionable error messages to users in case something goes wrong. You can also learn about regular expressions here, as they are often used to validate complex patterns. Always remember that you want to validate inputs on the server too.

Form validation design

✨ Features:

validate([
    {
        input: '.url-dom-reference',
        validate: /validation-rule-for-url/g
        message: 'Please input a valid url.'
    },
    {
        input: '.email-dom-reference',
        validate: /validation-rule-for-email/g
        message: 'Please specify a valid email address.'
    }
]);
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#16 β€” Create a Calendar

Building a calendar can let you learn a lot about how to work with the Date API. Next to that, you can also learn how you can display data in a table, or even store it inside local storage if you want to assign time entries to days.

The design looks simple, but the implementation can quickly grow in complexity. How about adding different styles to holidays, or handling leap years?

Calendar design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#17 β€” Create a Timeline Component

Building a timeline is also a great challenge if you want to hone your CSS skills. By building this component, you can learn more about working with arrays and objects, loops, and learn about different array methods.

Timeline component design

✨ Features:

timeline(['Eat, 'Code', 'Sleep', 'Repeat']);
timeline([
    {
        title: 'Eat',
        text: 'Everything you find in the fridge',
        color: '#AEC9F3'
    },
    { ... },
    { ... },
    { ... }
]);
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#18 β€” Create an Event Countdown Component

Another great challenge you can do that is related to time, is building an event countdown component. With this, you can familiarize yourself with how the date API, and intervals work. If you would like to take the challenge a step further, make sure you are also able to call the timer with hours or minutes.

Countdown timer design

✨ Features:

countdown(30); // Default to days
countdown(24, 'hours'); // Be able to use hours
countdown(30, 'minutes'); // Be able to use minutes
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#19 β€” Create a Star-rating Component

Using a star rating component is a common way to indicate votes or reviews. In this project, you will learn how to generate a number of icons based on an argument, as well as how to handle user interaction with these icons. If you also want to persist the data, you can look into using cookies or the local storage API.

Star rating component design

✨ Features:

starRating(5);  // Generates a 5-star rating component
starRating(10); // Generates a 10-star rating component
starRating(5, 'hearts'); // Use predefined icon
starRating(5, 'https://location.to/image/path.png'); // Use custom image
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#20 β€” Create a Breadcrumbs Menu

Showing navigation as breadcrumbs is a common way to visualize the relationship between pages. Building this component helps you dive into working with arrays and objects, as well as looking at generating navigation elements based on the JavaScript data.

Breadcrumbs menu design

✨ Features:

breadcrumbs([
    {
        menu: 'Home',
        link: '/'
    },
    { ... },
    { ... } // The last item - which is the current page - should not have a link
]);
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#21 β€” Create a Stepper Component

A stepper, or a multi-step form is a way to indicate the progress of filling out a form through a list of actions. With this project, you can learn how to manage an internal state, and work with object methods to externally update the component and trigger a change in steps.

Stepper component design

✨ Features:

const stepperComponent = stepper({
    selector: '.dom-wrapper',
    steps: [
        {
            name: 'Select campaign settings',
            completed: true
        },
        {
            name: 'Create an ad group',
            completed: false
        },
    ]
});

stepperComponent.next();     // Trigger the component to move to the next step
stepperComponent.previous(); // Trigger the component to move to the previous step
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#22 β€” Create a Chips Component

Chips let you quickly assign predefined tags to an input. It works similarly to an autosuggest, but here, the input can take on multiple values. To make the project a little bit more complicated, you can also look into adding a remove button for the chips or let them have different states, eg.: make them clickable, create primary / secondary styles, or adding custom icons to them.

Chips component design

✨ Features:

chips({
    selector: '.input-field',
    value: ['chip1', 'chip2', 'chip3'],
    items: ['remaining available items for selection', ...],
    style: 'primary',
    icon: 'icon/path'
    onChange(value) { console.log('value changed to...'); }
});
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#23 β€” Create a Drop Down Menu

Using a drop-down menu is a common way to handle multi-level navigation. With this project, you can learn about correct positioning and displaying elements on hover. Want to go a bit more advanced? Try to integrate some sliding animation between navigating sub-menus, and you can also play with recursion if you want to implement a multi-level drop-down menu.

Drop down menu design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#24 β€” Create an Autocomplete Search

We’ve looked at working with chips before, but there’s also a similar component we haven’t touched yet. Creating an autocomplete search is a great way to learn more about how you can search through a dataset and filter it based on some user input.

With this project, you will learn a lot about array methods, and if you want to add some extra challenge, make sure you add support for keyboard navigation too.

Autocomplete search design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#25 β€” Create a Pagination Component

Dealing with paginations is a common task that you will probably come across at one point in your career. This project can help you understand how can you break down a large set of data into smaller, more digestible pieces. How to offset the displayed elements, and how to set a limit, so only a predefined number of elements are rendered on the page at any given time.

Pagination component design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#26 β€” Create a Sortable and Filterable Table

Building upon the previous project, we can go one step further, and look at building a sortable and filterable table with a pagination component on the bottom. Along the way, you can deepen your knowledge on pagination, and also gain new skills on how to work with tabular data, or sort and filter a resultset.

Sort and filterable table design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#27 β€” Create a Blog From Scratch

Building a blog as a side project is a great way to get familiar with a handful of things. With the help of this project, you will be able to learn the basics of navigation, displaying data from an external source, working with grids, and paginating large data sets. It puts together multiple smaller projects into one big challenge you can take on.

Blog design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#28 β€” Create a Parallax Effect

Let’s take a look at some animations too. A parallax effect is a great way to illustrate the depth of elements on a page. It is triggered by scrolling, and if executed right, it can create a captivating effect. With this project, you can learn more about scroll events, how different layers can work together, and how translations can help you achieve it.

Parallax effect on mobile

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#29 β€” Create an Infinite Scroll Page

Just like pagination, infinite scroll works on the same logic, however, here you don’t have to interact with anything. As you scroll down a page, the next page is automatically loaded in after the other, creating the illusion that you can infinitely scroll down.

If you didn’t get pagination right for the first time, here you can learn more about it, how to work with scroll event listeners, and how to append elements to the DOM after requesting the next page from an API.

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#30 β€” Create a Scroll-animated Site

While we are talking about scrolling, another fun project to take on is building a site that is animated by the position of your scrollbar. With this project, you can get familiar with the ScrollMagic library that is used for adding animations to your scrolls, and with that, you will be able to create a similar effect to the one below:

Scroll animated page

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#31 β€” Create a Shopping Cart

Are you looking to learn how to build an e-commerce site? Then this project will be for you. A shopping cart is an integral part of any online store that connects your way from browsing products, to checking out. With the project, you can learn how to add and remove products from a cart, and how to display a sum based on the prices and quantity of the products inside the cart.

Shopping cart design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#32 β€” Create a Color Generator

Next up, we have a color generator. Generating random colors in JavaScript can be done in a quick and straightforward manner. But what about generating shades of color, or generating entire color palettes?

Here you can learn about how to convert numbers into hexadecimal values, how to deal with random numbers, or how to copy strings to the clipboard for later use.

Color generator design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#33 β€” Create Feature Flags

Feature flags let you quickly test out new features in a production environment, and even turn off existing features, without having to deploy additional code changes.

With this project, you can learn more about how to work with the local storage API, how to toggle the state of objects on and off, and how to display features based on these states. You will also learn how you can quickly build a bookmarklet β€” like the one in the image below β€” that you can share with others to use in order to manage the features through an interface.

Feature flags design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#34 β€” Create an Exit-Intent Popup

Building an exit-intent popup is a great way to get your audience to subscribe to your mailing list, but it’s also a great way to learn more about mouse and keyboard events. With this project, you will learn how to trigger a popup right when the mouse is about to leave the page, how to close the popup in three different ways, and how to work with cookies in order to prevent the popup from appearing again for every session.

Exit-intent popup design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#35 β€” Create an Animated Day and Night Toggle Switch

Do you want to make a dark theme for your app? You can look into implementing a day and night toggle switch for it to create a transition between the two themes using CSS, and some JavaScript for toggling the necessary classes, and creating a similar effect:

Animated day and night toggle switch

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#36 β€” Create a Network Status Notification Bar

A network status notification bar can help your users see status changes in their network connection. It comes especially useful if your app depends on a saving function, and suddenly the connection is dropped. You can let users know in this case that any changes made during this period are bound to be lost.

Network status bar shown when being offline

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#37 β€” Create a Chrome Extension

If you want to look into enhancing your workflow, and a bookmarklet doesn’t suit you, then building a custom Chrome extension might help you with that. With this project, you will learn about the basic structure of a Chrome extension: how to create a custom popup, how to work with permissions and content scripts, and how to test everything.

Chrome extension design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#38 β€” Create a VSCode Extension

Rather not want to leave your code editor? Then building a VSCode extension is a good choice too. With this project, you will learn how you can create your own VSCode extension, how to create custom commands for it, and how to deploy it to the extensions marketplace so others can use it too.

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Now let’s see some game ideas that you can easily (or not so easily) implement in JavaScript.


#39 β€” Create a Tic-Tac-Toe Game

Tic-tac-toe is a classic game that can be traced back to ancient Egypt, dating back around 1300 BC. It’s a great starting project to learn about turn-based games, and how to handle game logic. As part of the project, you can also learn how to generate a grid, how to handle turns, and how to define a winning condition.

Tic Tac Toe Design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#40 β€” Create a Rock, Paper, Scissors Game

Another classic game, this time, dating back to the Han dynasty around 200 BC is the rock, paper, scissors game. In this project, you will learn about working with random numbers and data attributes. After three turns, a winner should be nominated.

Rock / Paper / Scissors design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#41 β€” Create a Platformer Game

Want to look into a more advanced game? You can take a look at building a platformer, like an infinite side scroller with simple gameplay mechanics, such as Chrome’s jumping dinosaur, or a more complex one such as the famous Mario Bros from Nintendo. With these projects, you will learn a lot about how to build basic games with PhaserJS.

Creating a platformer game in JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#42 β€” Create a Snake Game

You can also build games with JavaScript using only HTML elements. In this project, you will learn how you can build a snake game using nothing more, but checkboxes, and a radio button as an apple.

Snake game in JavaScript made from checkboxes

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#43 β€” Create Atari’s Breakout

Another famous game you can look into implementing is the famous Breakout from Atari. The aim of the game here is to hit every block with a ball, without allowing the ball to fall off. You have 3 lives, and you win the game once all blocks have been destroyed.

With this project, you will learn how to handle mouse events in Phaser, as well as how to handle arcade physics, tweens, or how to implement a scoring mechanism.

Atari's Breakout game written in JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#44 β€” Create a Quiz Game

Rather work with HTML than the canvas, but still want to work on a game? Try looking into implementing a quiz game. Here you will learn more about working with an array of objects that describe each question and answer in the quiz, and how to implement a scoring system to see how good you are with a given quiz.

Quiz game design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#45 β€” Create a Hangman

Another great game project where you can train your JavaScript skills is building the hangman. We all know how it goes, you have to guess the word before you run out of guesses, and the game is over. Here you will learn how to handle click events, and handle different game states, such as win or lose.

Hangman design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#46 β€” Create a Memory Game

Building a memory game can not only improve your JavaScript knowledge but can also help you improve your memory. In this project, your task is to build a grid of cards that can be flipped over. If a match is found, the cards stay flipped, if not, they will turn back. If you run out of time, the game is over, but if you manage to find all matching cards, just like you would in a memory game, then you take the price.

Memory game design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#47 β€” Create a Minesweeper Game

Another fun project to take on is developing the minesweeper game. The task of the player here is to uncover all fields that are free from any mines. If the player hits a mine, then the game is over. With this project, you can learn a lot about working with arrays, grids, and loops. Want to make the game more challenging? Implement a countdown so the game can only be solved under a certain amount of time.

Minesweeper game design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#48 β€” Create a Word Scramble Game

How about building a word scramble game? You can go as wild as on the design below and make them appear in a hexagonal grid, or you can simply switch words one after another with an input field where the user can type in their guesses. We all know the rules, you need to find all words to win the game. You will learn about working with keyboard events, manipulating the DOM, and implementing a scoring mechanism.

Word scramble game design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#49 β€” Create Fireworks

As we are approaching the end of the year, it’s a perfect opportunity to start practicing how particles can be created in JavaScript. With this project, you will be building a mage with a wand that can shoot fireworks to the night sky, all done on a canvas element. You will learn how to handle different mouse events, and how to create physics-simulated particles by utilizing the Math object. This will be the final output of this project:

Fireworks created in JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#50 β€” Create a 3D Planet

If you want to look into 3D instead, then you might want to try out Three.js. It provides all the necessary APIs for you to more easily build 3D projects right inside your browser. In this project, you will be building a 3D replicate of Mars with lightning, textures, depth, and camera movement. Here is the final end result:

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#51 β€” Create a 3D Rubik’s Cube

Looking for more challenging work? With the help of Three.js, you can also try building a 3D working Rubik’s cube. With this project, you can learn a lot about rotating objects and mouse events inside the scene. If you would like to go the extra make, try to let the cube auto shuffled, or completed by the computer itself.

Rubik's cube design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Want something even more advanced? Let’s see a couple of examples that involve AI/machine learning.

Remove ads

#52 β€” Create an Image Classifier

One of the most common use-cases of machine learning is image classification. With this project, you will need to build an image classifier using the TensorFlow library, that should be able to accurately predict images based on a pre-trained model. Here is what we are going to build:

Image Classifier built with JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#53 β€” Create a Chatbot

Want to learn about natural language processing? Then building a chatbot is a great way to get you started. Here you’ll learn about the basics of NLP, how to work with the Natural library, and how to train a model based on a large data set, that will respond to even messages it has never seen before.

Creating a chatbot in JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#54 β€” Create a Face Recognition App

Another great machine learning project that involves images is an app that can recognize faces and emotions. Here, we will take a look into how face-api works, and how you can use its models to detect faces on images, draw facial landmarks or even use it for emotion detection.

Emotion detection done with JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

If you’re looking for more simple challenges, there are plenty of other app ideas out there you can implement, such as:


#55 β€” Create a Weather App

Probably the most common project you will come across is a weather app. The reason for that is that it’s simple even so that it can be built in a matter of hours, but it has all major technical challenges you can come across during your daily work. These include things such as requesting data from an API, displaying it to the user, or be able to search for weather forecasts.

Weather app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#56 β€” Create a Clone

You can also look into implementing one of your favorite services out there. Want to learn about how e-commerce works? Build an Amazon clone. Want to learn how you can build complex search algorithms? Build a Google clone. Want to learn how to build a social network? Build a Facebook clone. You get the idea.

In this project, you will learn how to create a basic IMDB clone. You will learn about routing, fetching data from an API, and consuming it to display it in a meaningful way.

IMDB Clone created with Sapper

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#57 β€” Create a Desktop Application

If you want to think outside of the browser, you can also look into building an actual desktop application. With the help of Electron, you can use technologies you are already familiar with: HTML, CSS, and JavaScript.

With this project, you will not only learn how to build a desktop app using Electron, but also how to work with cron jobs, and how to work with the native notification API.

Desktop app built with Electron and Svelte

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#58 β€” Create Bubble Charts

If you are into working with visualizing data, then the following two projects might be just for you. Here you will learn how to work with D3.js to build a bubble chart that represents what articles drive the most traffic to your site. You will also learn about creating a tooltip to showcase more data upon hovering a bubble, and you can also interact with them to navigate to different sections on your page.

How to Make Interactive Bubble Charts in D3.js

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#59 β€” Create Treemaps

Another great way to get familiar with D3.js is by building a treemap. Here we will be looking at how to create a treemap from a JSON file. You will be able to visually see which files/folders take up the most space. You will be also able to navigate between different levels, and even change the styles of the treemap. If you ever wanted to learn more about recursions, then this is the right project as we will also look into that.

Interactive treemap created with JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#60 β€” Create a Real-Time Chat App

If you want to dive into the realm of real-time, then try building a real-time chat application with the ability to also see who is typing at the moment. In this project, you will learn more about web sockets, working with socket.io, and how you can emit and listen to events to update the UI accordingly.

Real time chat app built in JavaScript with Socket.IO

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#61 β€” Create a Kanban Board

If you would like to learn more about how the drag and drop API works, then building a Kanban board is a great way to do that. Here you will learn about how you can drag and drop cards from one column to the other. If you want to persist the state of the cards after page reload, you can also learn about local storage or working with a database, depending on your use case.

Drag and drop functionality created in JavaScript

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#62 β€” Create a Retro Board

We can also look into creating another kind of board, this time, a retro board. In this project, you will learn about adding, editing, and removing items from columns, as well as giving them likes in the form of claps. The end project will look something similar:

Create a retro board in Svelte

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#63 β€” Create a Reminder App

Building a reminder app from scratch can help you learn more about working with cron jobs and scheduling events. In this project, we will look into how you can work with push notifications in order to see reminders popping up on your screen, and we will also see how the whole application can be handled by a single global state.

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#64 β€” Create a Scheduler

If you’d rather want to work on your Node skills, and you don’t want to build an entire reminder app, then you can look into building a scheduler that works with the native push notification API. Works in a similar way as the previous project, only this time, without a user interface. As part of this project, you will also learn how you can create cron jobs to send scheduled notifications. By the end of the project, you will get the following behavior:

Push notification send with node

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#65 β€” Create a Note-Taking App

Next up, we have a note-taking app. With this project, you will learn how to display data using JSON files, work with global states, and implement CRUD operations so that you can create, update, and delete pages as you go. We will also look into integrating a WYSIWYG editor into the mix to make the app more accessible.

How to Get Started With React + JSON Server

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#66 β€” Create a Habit Tracker

Building new habits, and getting rid of old bad ones is not an easy take, but it is an essential part of becoming a better version of yourself. With this project, your task is to build a habit tracker so you can keep yourself more accountable. You will learn how to create new habits, define a frequency for them, and how to store everything in local storage. If you want to go wild, you can also look into visualizing it on a chart or calendar to see your progress.

Habit tracker app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#67 β€” Create a Mobile App

Of course, you can not only build apps for the web or desktop with JavaScript but also build mobile applications. With this project, you will learn how you can make a checklist app with React Native with saving and loading functionality. You will also learn how to create list elements, how to handle their state, and how to store everything on your device’s storage.

How to Build Mobile Apps With React Native

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#68 β€” Create a CMS

Looking for something complex, but for the web? Then you might want to take a look into building a content management system. You can start with a simple page and a WYSIWYG editor, and build out more features as you go to make it more complex and useful.

CMS design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#69 β€” Create a Budget Tracker

Building a budget tracker not only helps you become more aware of your spendings, but also helps you learn key concepts on how to implement CRUD operations in JavaScript, and really deepen your knowledge of arithmetic operators. Want to go a step further? You can also pull in a chart library to visualize the data, or even filter it with a date range.

Budget tracker design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#70 β€” Create a Pomodoro App

The pomodoro technique helps you break down your tasks into smaller, more manageable chunks, so they become less daunting. Set a timer for 25 minutes, work on the task until the timer rings, then go for a break. You can also do this in cycles and repeat the steps a number of times to extend this to hours.

By building this app, you can learn more about how to handle time in JavaScript, how to work with loops, and how to work with the web audio API.

Pomodoro app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#71 β€” Create a What’s in my Fridge App

It probably happened to you before too that something expired in your fridge. What better way to battle this than building an app to keep track of the food inside?

This project lets you learn about CRUD operations, working with the date API, sorting the items so the food with the soonest expiry date is at the top, and optionally, working with routing if you want to store data in different categories.

Fridge app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#72 β€” Create a Recipe App

Going one step further, we can look at creating a recipe app for storing our favorite foods in one place. Again, this can help you deepen your knowledge on CRUD operations, as well as persisting data through either local storage, or an actual database. You will also need to fetch data from an endpoint that you can display to the user, which helps you learn more about the fetch API and how promises work.

Recipe app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#73 β€” Create a Flashcard App

If you also want to learn something else while you are learning JavaScript, then you might want to look into building a flashcard application. You can also enhance this app with some gaming elements, such as a scoring system, or achievement board. With this project, you will learn about fetching data from an API and using that to generate the flashcards, as well as handling card states and click events.

Flashcard app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#74 β€” Create a Meditation App

The earliest records of meditation are found in the ancient Hindu writings called Vedas that are thought to be composed somewhere between 1500-1200 BE. It is an ancient practice that is known to have many positive effects on health, such as reduced stress levels, anxiety, depression, and pain.

So why not try to look into building a meditation app that can help us practice it? With this project, you can learn more about how to work with timers or how to play sounds using the web audio API.

Meditation app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#75 β€” Create a Book Note-Taking App

Do you have a collection of books that you would like to take notes on? You can take on this project to build a book list, or a book note-taking app. You will be able to create, remove and store books for later use. With this project, you will learn about how to work with classes and persist your data throughout page reloads with the help of local storage.

Book list app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#76 β€” Create an Activity Tracker

An activity tracker helps you keep track of your activities in order to make you more aware of your everyday habits. Building this project can help you become more familiar with the Date API, and helps you understand how to work with charts and persisting data for later use.

A great tool that is similar to this project is called Webtime Tracker. It can help you discover your browsing habits so you can better understand where you spend the most time.

Activity tracker design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#77 β€” Create a Random JSON Response Generator

Rather want to create a tool that helps other developers or even your own workflow? Probably you will work a lot with JSON responses. Building a random JSON response generator can not only help you learn JavaScript through a project but can also help your own journey along the way.

In this project, you will mostly learn with string interpolation, and getting JavaScript to execute functions based on certain values. Eg.: {{name}} should generate a random name, while {{email}} should generate a random email address.

✨ Features:

{
    name: "{{name}}",
    age: "{{number(18, 40)}}"
    email: "{{email}}",
    achievements: "[[words(3)]]",
    projects: [
        {
            generateThisObjectNumberOfTimes: 3,
            codeName: "{{word}}",
            progress: "{{percentage(0, 100)}}"
        }
    ]
}
Copied to clipboard!

🧠 Takeaways:

πŸ“š Resources:


#78 β€” Create a Piano

If you want to learn more about the web audio API, building a piano is a great way to start. With the help of this project, you will learn how to play different sounds through click and keyboard events. If you want to take this project one step further, you can also look into building the entire project out on a canvas.

Piano design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#79 β€” Create an App for Writers

If you are an avid writer, then you may want to also look into a project that helps to improve your writings. Similar to the famous Hemingway app, you can take a look at how to highlight errors, sentences that are hard to read or long, or things like passive voice or fillers that don’t provide any information.

If you choose this project as your next challenge, you can learn a lot about working with a WYSIWYG editor and not to mention natural language processing.

app for writers design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#80 β€” Create a JSON – CSV Converter

Want to deepen your knowledge of JSON? Try building a JSON to CSV converter that can prove to be useful for other situations as well. In this project, you will need to work with both JSON and CSV files, look at formatting and parsing data, and figuring out how to convert from one to another.

JSON to CSV converter design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#81 β€” Create a Markdown β†’ HTML Converter

We’ve already looked at JSON to CSV, but you can also have fun with Markdown and HTML. You will learn how to parse Markdown, and based on the generated tokens, you can generate the HTML file. If you would like some more challenges, you can also look into generating HTML files back to Markdown.

Markdown to HTML editor design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#82 β€” Create an Image Filter App with CSS Filters

If you would rather work with images, then you might want to take a look into building an image filter app. Here you can learn more about the different CSS filters available, how to work with the Canvas API, and more specifically, how to work with image data.

Image filter app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#83 β€” Create a Drawing App

Talking of canvas, another fun project is about building a drawing application. You can really go wild and implement all sorts of functionality to increase the complexity of this project. How about switching to different colors, or setting brush sizes and hardness? Don’t forget to also add the ability to download the masterpieces!

Drawing app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#84 β€” Create a Presentation App

We all used PowerPoint at one point in our life. With this project, we can take a look into how we can achieve the same using Reveal.js that also powers Slides which is built on top of that. With this project, you will learn how you can create slides and transition between them using JavaScript.

Slide animations

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#85 β€” Create a β€œBest Places to Go” App

Want to find out what is the best place to go in your town? You can use Google’s places API to request the data and display it as you like. In the meantime, you will learn about how to work with an external API, request the data you need, then sort and filter the dataset. The places API also returns a subset of the whole data, so you need to do pagination to get everything.

Google Places API

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#86 β€” Create a Poll App

If you want to learn a bit about user identification, then you can think about building a poll app where each user can vote only one time. For storing the data, you probably want a server if you would like to make the app usable on every device, but if you are just trying to learn more about JavaScript, then it’s a great start to first implement this app using local storage.

Poll app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#87 β€” Create an Image Cropper

If you are looking for more projects that deal with images, then an image cropper might just be the right fit for you. Here you can learn a lot about image manipulation: how to crop images, how to work with aspect ratios, with flips and rotation. Lastly, if you want to keep the result, you can also look into implementing a download functionality for the image.

Image cropper app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#88 β€” Create a Web Scraper

Web scraping is done when a site doesn’t expose a public API from where we can query data from. It is done by requesting a website and then reading the DOM in order to get the necessary data from there. From this project, you can learn how to work with Cypress to scrape a website for data and collect all the necessary information into an array of objects.

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#89 β€” Create a News Aggregator

By creating a news aggregator, you can see all of the most important news in one feed. With this project, you can learn how to work with the fetch API in order to source and combine data from multiple sources, and display them in a feed.

News aggregator design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#90 β€” Create a Password Generator

Having a hard time coming up with new passwords? Try building a password generator that will let you quickly create a secure one. With this project, you will learn more about working with strings and arrays, how to implement sliders, and finally, how to generate a password based on the provided settings.

Password generator app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#91 β€” Create a Resource Network App

Want to learn more about working with graphs and data visualization? You can look into building a resource network app where each document can be connected, and its connections are visualized by a network graph. Documents that are referenced the most are emphasized so you can easily spot cornerstone content at a glance.

Network graph desing

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#92 β€” Create a Journaling App

A great example of this project is Minidiary, which was also written in JavaScript. Unfortunately, the project is not maintained anymore, but we can try to replicate it ourselves and see what we can learn on the way.

Namely, you will be closely working with the Date API and a WYSIWYG editor. For keeping data, you can look at either the local storage API for a simple solution or if you want to take it to another level, implement it in Electron to create a desktop experience. This way, you can also learn more about the file system API.

Journaling app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#93 β€” Create a Time Tracker App

Want to time block your day to manage your time better? Build a time tracker app where you can start tracking activities, and you can see with an overview of what really takes up most of your time in a day. You can also become more mindful of distractions. You will learn about working with timers in this project, and if you want to go the extra mile, you can look into data visualization as well using charts.

Time tracker app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#94 β€” Create a Mind Map

A mind map is a great way to visualize your ideas and see where you are now, and where do you want to be. With the help of this project, you can learn more about how to work with D3.js to visualize graphs and make them interactive.

Flow chart design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#95 β€” Create a Code Challenge App

If you really want to dive into coding, then one of the best ways to do it is to build an app that challenges you to write functioning code. A similar tool to this is called CodeWars where you have to solve code challenges by following a set of instructions. As part of this project, try to build a similar tool where the user can write code that can be executed and verified.

Code challenge app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#96 β€” Create a Family Tree App

If you are the type of developer who is all into binary trees, then you needed to scroll through all 95 projects in order to get to the one where you can finally work with one.

In this project, try to build an interactive family tree where you can create new branches by adding and editing members. You can also look into exporting and importing the data to JSON to make the data portable.

Family tree app design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#97 β€” Create a PDF Generator

Want to dive deeper into how HTML works? You can look into building a PDF generator that will require you to parse HTML data in order to dynamically build the PDF files. If you want to make the app more accessible and usable by users, then you can also look into integrating a WYSIWYG editor to make the generated PDF editable, like in the screenshot below:

PDF generator design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#98 β€” Create a Timetable App

If you have finished the calendar project, or you have already worked with a calendar before, then this project will feel similar to you. It is an extension of a calendar where you can visually see the different tasks you have throughout the day. By taking on this project, you will become deeply familiar with how the date API works, as well as how to work with tables and grids.

Time table design

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


#99 β€” Create a Business Card Collector App

Keep losing your business cards? Why not keep them in one place digitally? By building this project, you can learn more about CRUD operations, and how to work with the local storage API to keep all of your data in your browser, even after leaving the page. Want to reach it from elsewhere? You can also look into hosting it in the cloud and uploading the data into a database.

✨ Features:

🧠 Takeaways:

πŸ“š Resources:

Remove ads

#100 β€” Create a Frontend Project Challenge Generator

And we’ve reached the final project idea, an app that generates project ideas just like this list. You can already check out one that was inspired by this article at uichallenge.dev. Creating the app came with its own challenges too. So what are the takeaways?

Design for ui challenge

✨ Features:

🧠 Takeaways:

πŸ“š Resources:


Conclusion

You can take this list one step further and convert these project ideas from JavaScript to your favorite framework or library, whether be it React, Angular, Vue, or Svelte. For extra difficulty, you can throw in some syntactic sugar with TypeScript, or use GraphQL to source your data.

Do you have any project ideas that you think are missing from this page? Let us know in the comments below, or add them on uichallenge.dev! Have you already worked on one of these projects? Share them with us in the comments below! Thank you for taking the time to read through, happy coding!

JavaScript Course
Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.