Awesome Project Ideas

Do you want to learn web development, but just don't know what to create? This list was designed for you then!

These ideas are great for:

• Displaying in your portfolio!
• Learn a new JS Framework!
• Practicing your Webdev Skills!

Each idea has the following features:

1. Screenshots of the idea.
2. Details that explain what should be implemented.
3. Inspiration resources that can help guide you.
4. Hints that you can use if you're stuck.
5. Tutorials as a last-resort in case you're stuck.

The ideas are split into 3 groups:

Level	Requirements
Beginner	Know the basics of HTML, CSS, and JS.
Intermediate	Proficient in web fundamentals

👶️ Beginner

1. Simple Calculator

What better way to start off this list than the classic example: a calculator!

Details

user can enter decimals.
user can enter operators.
user can see result.
app saves history of math expressions.

Inspiration

Samsung Calculator
Google Calculator
Xiaomi Calculator

Hints for Javascript

use eval() to calculate.

Tutorials for React

Tyler Potts | 21K views | 7 months ago

Web Dev Simplified | 73K views | 3 months ago

Digital Solutions Master | 30K views | 10 months ago

2. Tic Tac Toe

We all know Tic Tac Toe...

Details

user can play offline by switching between 2 players.
user can choose a difficulty level.
user can choose a board size.
user can unlock achievements.

Inspiration

Google's Tic Tac Toe
Classic Tic Tac Toe

Hints for Javascript

efficient algorithm for detecting the winner

Tutorials for React

codeSTACKr | 31K views | 1 year ago

Learn Code By Doing | 4.7K views | 10 months ago

Coding with Basir | 35K views | 2 years ago

3. Countdown Timer

Create an app that counts down the hours, minutes, and seconds.

Details

user can enter an amount of time in hours, minutes, and seconds.
user can visually see how much time is left.
user can pause and reset the timer.

Inspiration

Simple Timer (codepen)
Stopwatch Timer App

Hints for Javascript

Use setInterval and clearInterval to create and reset the timer.

Tutorials for React

Code Boost | 9.8K views | 1 year ago

Coding with Elias | 19K views | 2 years ago

Uzoanya Dominic | 24K views | 1 year ago

4. Notes

Write down what's on your mind!

Details

user can create Markdown notes.
user can star notes.
user can reorder, edit and delete notes.

Inspiration

Markdown Notes with React
Notes App Android

Hints for Javascript

Use Marked to transform Markdown to HTML.
Use localStorage to save notes.

Tutorials for React

Chris Blakely | 22K views | 9 months ago

James Grimshaw | 12K views | 1 year ago

Dennis Ivy | 43K views | 5 months ago

5. Pomodoro Timer

Efficiently manage your time using the Pomodoro!

Details

user can start, pause, and stop work periods (25 minutes)
user can start, pause, and stop short breaks (5-10 minutes)
user can start, pause, and stop long breaks (20-30 minutes)
app keeps history of work, short breaks, and long breaks.

Inspiration

Online Pomodoro Timer
Pomodoro Android App

Hints for Javascript

Learn more about the pomodoro technique
Use localStorage to save notes.
Use setInterval and clearInterval to create and reset the timer.

Tutorials for React

Coding With Dawid | 4.6K views | 6 months ago

Siphiwo Julayi | 7.7K views | 1 year ago

[Siphiwo Julayi