Practice Javascript building interactive projects

What to build with Javascript

Practice and develop your coding skills by building real live interactive autograded projects with solutions and video tutorials

  • node

  • javascript

  • reactjs

JWT Authentication with Node and React

  • intermediate

Almost every website in the world has user authentication, in this project you have to implement user authentication using NodeJS for building a backend REST API and React.js and sessionStorage API for the front end web application.

Start project
  • javascript

  • node

  • sql

Data Modeling a StarWars Blog using Node and Typescript

  • easy

Use your recently adquired knowledge to build a data-model for your starwars blog

Start project
  • python

  • javascript

  • reactjs

Authentication system with Python Flask and React.js

  • beginner

Almost every website in the world has user authentication, in this project you have to implement user authentication using the Python Flask framework for building a backend REST API and React.js and sessionStorage API for the front end web application.

Start project
  • javascript

  • reactjs

  • flask

Final Project User Stories & Wireframes

  • intermediate

Create the users stories for your final project

Start project
  • javascript

  • jest

  • unit-testing

Your first unit tests with Javascript's Jest Framework

  • easy

Give a series of exercises and solutions, create the unit tests to automaticaly grade the given solutions

Start project
  • javascript

  • reactjs

  • react-hooks

Audio player like Spotify with React.js

  • intermediate

Use the audio tag to create your own music player

Start project
  • javascript

  • html-css

  • vanilla-js

Battleship with Vanilla.js

  • intermediate

Use your DOM knowledge, HTML/CSS and Javascript to create a battleship game for one person only

Start project
  • javascript

  • reactjs

  • fetch-api

Todolist Application Using React and Fetch

  • beginner

Create a simple todo web app using the React.js framework and use the API to sync with the server

Start project
  • javascript

  • reactjs

  • react-hooks

TicTacToe with React.js

  • easy

Create a simple tictactoe 2 player game (no AI), using the React.js framework

Start project
  • javascript

  • html-css

  • vanilla-js

Sorting Cards with Select

  • intermediate

Practice building algorithms by doing a selection-sorting algorithm and displaying it on a website

Start project
  • javascript

  • reactjs

  • git

Multi View React Web App

  • easy

Create a web app using React router and Context

Start project
  • javascript

  • html-css

  • sorting-algorithms

Bubble Sorting Cards

  • intermediate

Practice building algorithms by doing a bubble-sorting algorithm and displaying it on a website

Start project
  • javascript

  • html-css

  • reactjs

The Meetup.com Clone using react.js

  • intermediate

Use React and HTTP Fetch to create a Meetup.com clone

Start project
  • javascript

  • reactjs

  • react-hooks

Contact List App Using React & Flux

  • intermediate

Create a simple contact list application using the React.js framework and Flux Architecture

Start project
  • bootstrap

  • javascript

  • html-css

Use JS to validate an HTML Form

  • beginner

Use Javascript to validate the inputs of an HTML form (on submit)

Start project
  • node

  • javascript

Domain Name Generator

  • easy

The domain mafia is far from over, with more domain extensions every day is a good idea to chase for great domain available to buy. Who knows, maybe you get lucky and become a millionaire!

Start project
  • javascript

  • python

  • flask

Todo List API + VanillaJS Front

  • intermediate

Let's build a todo list from zero to publish using a Python Flask API and a Vanilla.js front-end

Start project
  • javascript

  • reactjs

  • react-hooks

Simple Counter

  • beginner

Use your react.js skills to make a simple counter component

Start project
  • javascript

  • reactjs

  • react-hooks

Traffic Light

  • beginner

Create a small react component with its own state and event listeners

Start project
  • javascript

  • html-css

Spotify Landing Page

  • intermediate

Replicate a professional real-life landing page using bootstrap

Start project
  • javascript

  • html-css

  • Conditions

Conditional Profile Card Generator

  • beginner

Practice conditions, render a profile card based on a series of variables that could change in value during runtime like: username, avatar, etc.

Start project
  • javascript

  • html-css

  • the-dom

Code an Excuse Generator in Javascript

  • beginner

Disneyland for procrastinators. Learning Javascript? This excuse generator tutorial takes no more than 20 lines of code and can save you for the rest of your life!

Start project
  • bootstrap

  • javascript

  • html-css

Landing Page with React

  • easy

Create a simple landing page using React.js components

Start project
  • javascript

  • reactjs

  • flux

Contact List App Using React & Context

  • intermediate

Create a simple contact list application using React.js

Start project
  • javascript

  • html-css

  • the-dom

Random Card Generator

  • beginner

Use your CSS/HTML/JS skills to randomly draw a poker card on every website refresh.

Start project
  • javascript

  • reactjs

  • react-router

Starwars blog reading list

  • intermediate

Create a simple to-read website for Star Wars fans. Use the SWAPI to fetch and React + React Router + Context to save the reading list.

Start project
  • javascript

  • html-css

  • events

Todolist with Vanilla JS (no framework)

  • easy

Create a simple todo web app using vanilla js

Start project
  • javascript

  • html-css

  • reactjs

Todolist Application Using React

  • easy

Create a simple todo web app using the React.js framework

Start project
  • javascript

  • html-css

  • events

Pop Balloons using HTML/CSS and a little Javascript

  • easy

Practice your entry-level skills in Javascript, The DOM and HTML/CSS by building a Pop Balloons Game.

Start project