Check out our FREE Web Developer Track!
Completely free • Community Driven

JavaScript Projects

Browse through exciting and free projects in JavaScript, HTML, React, Nodejs, and more for new age web developers. Complete them with a recommended action plan.

JavaScript

Resume Builder Web Application

Have you ever thought of building a beginner-friendly React project and enhance your skills to the next level? Have you ever thought of making the task of resume generation simpler by auto-generating it in awesome templates? If so, this is your chance to grab the idea and start building this cool project.

Author

Girish Thatte

Collaborator(s)

Ayush Kumar Shaw
,
Kiran Suresh

Prerequisite(s)

JavaScript, React Basics
15 hours
Difficulty: Beginner

Skills to be Learned

Node.js Basics
Web Application Development
Material UI
Download Project

Email Alerts on WhatsApp

In our much busy schedule we usually don't have time to keep up with our emails, so we'll be working on a project to set up alerts of recent emails to WhatsApp.

Author

Pratyaksh Saini

Collaborator(s)

Ayush Kumar Shaw

Prerequisite(s)

JavaScript, JavaScript Promises
15 hours
Difficulty: Intermediate

Skills to be Learned

Async/Await
Twilio Functions
Twilio WhatsApp Sandbox
IMAP library
Download Project

Amazon clone using React

Nowadays the first thing that someone does when they create a new business for trading goods is to convert their commerce to e-commerce. Many businesses even prefer to have e-commerce as their only mode of doing business. The potential of e-commerce is nearly limitless, reason for which we'll be going on a ride to create an e-commerce solution of our own!

Author

Ayush Kumar Shaw

Collaborator(s)

Mridula Reddy,
Kiran Suresh

Prerequisite(s)

HTML, CSS, JavaScript
100 hours
Difficulty: Advanced

Skills to be Learned

React.js
Stripe
Firebase
Download Project

Online Code Editor (React)

Want to take your frontend development skills to the next level? Build an online code editor in React and start using it to edit your source code. All you enthusiastic frontend developers reading this, make sure to tick this off from your bucket list of react projects for beginners.

Author

Kevin Paulose

Collaborator(s)

Kiran Suresh
,
Mridula Reddy

Prerequisite(s)

HTML, CSS, React (Intermediate level)
35 hours
Difficulty: Intermediate

Skills to be Learned

React
Web development
Website hosting
Download Project

Codechef Notifier

Codechef is a very common platform used by many aspiring coders to improve their coding skills. Often when using codechef, its servers are so overloaded that our submissions take a long time to get verified by the judge and our time is wasted in checking for results again and again. This extension aims to save this time by automating the process of fetching the result and informing you as soon as the result is available so that you can move on to solve the next question and not worry about whether the result has been passed by the judge or not.

Author

Satyam Kumar

Collaborator(s)

Kevin Paulose
,
Kiran Suresh

Prerequisite(s)

Javascript, Chrome Developer Tools
10 hours
Difficulty: Beginner

Skills to be Learned

Chrome extension API
Asynchronous Javascript
Chrome dev tools
Download Project

Sorting Visualizer

If you are searching for a new JavaScript Project idea and want to dive deep into JavaScript or want to take your JavaScript skills to the next level, this is the perfect project for you. At the end of this module you will have a platform where anyone can visualize how sorting algorithms works and you also can showcase your HTML, CSS, Bootstrap, JavaScript Skills.

Author

Swapnoneel Dutta Majumdar

Collaborator(s)

Kiran Suresh
,
Kevin Paulose

Prerequisite(s)

HTML, CSS, JavaScript (introductory level)
20 hours
Difficulty: Intermediate

Skills to be Learned

JavaScript
Sorting Algorithms
Web application development
Web Hosting
Download Project

OurApp - a social media web app in NodeJS

Want to be a full stack developer and take your skills from HTML, CSS and JS to beyond? Build this full stack application where you will get to learn about building modern, fast and scalable server-side web applications with NodeJS, databases like MongoDB and more. If you've been looking to build something interesting and master your NodeJS skills, this is the perfect project for you.

Author

Shubhadarshie Nanda

Collaborator(s)

Kiran Suresh
,
Kevin Paulose

Prerequisite(s)

HTML, CSS, Javascript
90 hours
Difficulty: Advanced

Skills to be Learned

NodeJS
ExpressJS
MongoDB
Template Engine(EJS)
Socket.IO
Heroku
Download Project

YouTube Transcript Summarizer

People are watching YouTube videos daily which can be educational, documentary or of any genre with longer length; think about how much time can be saved by creating summarized content. In this project, you will be a creating a Chrome Extension which will make a request to backend REST API where it will perform NLP and respond with a summarized version of a YouTube transcript.

Author

Yakshit Jain

Collaborator(s)

Kiran Suresh
,
Ayush Kumar Shaw

Prerequisite(s)

HTML, CSS, JavaScript, Python, Flask
30 hours
Difficulty: Intermediate

Skills to be Learned

Natural Language Processing
Download Project

WhatsApp Web Clone

We all have used WhatsApp web on our PCs. Ever thought of making it yourself? The interface that we will be making for our project will look alike. Firebase real time database will give you seamless messaging feature.

Author

Sheetal Singh

Collaborator(s)

Ayush Kumar Shaw
,
Kiran Suresh

Prerequisite(s)

HTML, CSS, JavaScript
60 hours
Difficulty: Advanced

Skills to be Learned

React Basics
React Hooks
Firebase Firestore Integration
React Context API
Download Project

Two truths and a lie game slack bot

Hey automation lover! Slack bot is here to help all the channel members of your workspace to introduce and interact with anyone new joining the workspace with the help of a game, you guessed it right "Two truths and a lie".

Author

Laveesh Gupta

Collaborator(s)

Mridula Reddy,
Ayush Kumar Shaw

Prerequisite(s)

Javascript, Node.JS
20 hours
Difficulty: Intermediate

Skills to be Learned

Slack API
Glitch
Notify when download is available

Online Code Editor (JQuery)

Have you been looking for Javascript project ideas to take your skills to the next level? If yes, complete this project and have your own online code editor to edit your source code. This is the perfect project to test your understanding of HTML, CSS, Javascript.

Author

Kevin Paulose

Collaborator(s)

Kiran Suresh
,
Mridula Reddy

Prerequisite(s)

HTML, CSS, JQuery (Introductory level)
20 hours
Difficulty: Beginner

Skills to be Learned

JQuery
Web application development
Website hosting
Notify when download is available

Authentication in Node.js for a web app

This project is useful for anyone who wants to get started with Node.js; anyone who wants to learn about authentication and build an authentication app from scratch (backend-intensive) from scratch.

Author

Subham Agarwal

Collaborator(s)

Kiran Suresh
,
Kevin Paulose

Prerequisite(s)

JavaScript
25 hours
Difficulty: Beginner

Skills to be Learned

Node.js
Express.js
Authentication
JWT
Middlewares
Notify when download is available

Realtime Video Processing using ChromaKey (GreenScreen) Effect

Hollywood studios use green screens to create all kinds of incredible special effects. Your local weatherperson uses it to look like they’re standing in front of a cool weather map. You can learn the secret behind the effects by building a web application which captures a webcam video with a green screen and replaces it with a background video or an image of your choice.

Author

Yakshit Jain

Collaborator(s)

Kiran Suresh
,
Ayush Kumar Shaw

Prerequisite(s)

HTML, CSS, JavaScript (Intermediate level)
15 hours
Difficulty: Beginner

Skills to be Learned

Video Processing
Notify when download is available

Slack clone using React

If you’ve been looking for challenging react native projects to apply React-Redux concepts along with an opportunity to get acquainted with the fundamentals of Firebase databases, this is the perfect project to include in your resume. By the end of this project, you will be flaunting a web messaging app that provides useful features similar to Slack.

Author

Kevin Paulose

Collaborator(s)

Mridula Reddy,
Kiran Suresh

Prerequisite(s)

React, Redux (Basic Level)
80 hours
Difficulty: Advanced

Skills to be Learned

Advanced React - Redux
Firebase
Web application development
Website hosting
Notify when download is available

Markdown Editor

Though writing is a hobby, it has become vital for people to write blog posts and to express their thoughts. For achieving the same, you have to write markdown to render as in HTML. Markdown is a way to style text on the web. You control the display of the document. Formatting words as bold or italic, adding images, creating lists, etc., are just a few of the things we can do with Markdown.

Author

Sounish Nath

Collaborator(s)

Ayush Kumar Shaw
,
Mridula Reddy

Prerequisite(s)

React
5 hours
Difficulty: Beginner

Skills to be Learned

Custom Hooks
React Markdown
Context API
Notify when download is available

TinyMCE Synonyms Plugin

Get started with building a custom plugin to search and insert synonyms within the popular TinyMCE WYSIWYG rich text editor.

Author

Parthipan Natkunam

Collaborator(s)

Kevin Paulose
,
Mridula Reddy

Prerequisite(s)

HTML, CSS, JavaScript (Intermediate level)
20 hours
Difficulty: Intermediate

Skills to be Learned

JavaScript
Web development
Plugin development
Notify when download is available

ToDo Web App

Since the tech-stacks are growing day by day, the frameworks are constantly evolving. The latest framework that has been the developers' choice for backend is Adonis.js. In the project we will walk through creating CRUD APIs with help of Adonis.js and will also learn HTTP, REST API. Here we will build backend APIs for a todo web app and will test the APIs with help of Postman.

Author

Radib Kar

Collaborator(s)

Kevin Paulose
,
Kiran Suresh

Prerequisite(s)

JavaScript,Web Development
50 hours
Difficulty: Advanced

Skills to be Learned

REST
HTTP
Databases
Adonis.js framework
Notify when download is available

Rat in a Maze

A simple web app made using React that shows all the possible paths a rat can take from top left to bottom right of a square maze with fixed obstacles in between. The app will be a visualisation of the famous Rat in a Maze problem.

Author

Shubham Chhimpa

Collaborator(s)

Kevin Paulose
,
Kiran Suresh

Prerequisite(s)

JavaScript, ReactJs(Beginner), Data Structure and Algorithm
10 hours
Difficulty: Beginner

Skills to be Learned

ReactJs
Backtracking
Recursion
Problem Solving
Web development
Notify when download is available

Explore our Categories

Submit Project

Submit your Projects

Would you like to contribute your own projects to Crio Projects Hub? Share your project with us and we will work with you to feature it here.