It's one of the questions I received the most : which project could I start to get better at web development? I have to admit, I don't always know what to say. So, I always answer the same thing : a to-do list?

⚠️ Read more of my blog posts about tech and business on my personal blog! ⚠️

This time, I took some time to think about it. Here are 9 project ideas that you can use to get better at coding or to have something to show to recruiters this summer.

To start : beginner level project

Tic-Tac-Toe

I used to play this game in elementary school. It's simple, but it has challenging aspects that will make your brain work.

With this project, you'll work on frontend development notions and on JavaScript and CSS languages.

Functionalities ideas to learn more

• make the number of columns and lines variable
• add an AI to play against a solo user
• make the player's pawn variable (different from “x” or “o”)
• keep a history of previous scores
• give the possibility to export the final state of the game in JPG

A whiteboard

The idea of this project is to allow the user to draw on a whiteboard with several brushes, several brushes' sizes, several colors… etc.

A full frontend project where you'll learn to handle the mouse and its events, as well as some notions of image creation in HTML and JS that are less known of.

Functionalities ideas to learn more

• add real-time communication management, so users can log in and watch others' drawings. Make it possible for several users to draw on the same board.
• handle several boards, so several groups of people can draw together
• add roles to the app to choose who can draw or not
• add possibility to export your drawings as pictures (PNG, JPEG) to save them
• allow creation of password-protected boards

A calculator

A calculator is a very basic project that allows to work on logic and graphic design.

You can make this project step by step : start by making the calculator in the browser's console, then build the web interface that will use the logic you've already written.

Functionalities ideas to learn more

• add complementary buttons (“AC”, “%”, “+/-”, etc…)
• add scientific functions (sin, cos, etc…)
• handle complex calculations (operation precedence or parenthesis, etc…)

Intermediate level projects

Some of the above projects suggestions were already sort of okay for intermediate, but in this part, the projects are fully thought for intermediate developers.

Don't underestimate them and have fun making them!

Instant messaging app

Everyone knows what a chat app is, it allows you to communicate instantly with anyone anywhere on Earth. This is the project you're gonna do.

Start simple : a page with a message form and a bloc allowing to see the sent/received messages in a conversation.

This project can be made entirely with frontend development, but the more you'll work on it, the more you'll need a backend too.

Functionalities ideas to learn more

• allow users to log in
• allow saving the account's settings
• allow creating private chat rooms
• add the functionalities from the “whiteboard” project to allow users to play games such as Pictionnary

A currency converter

The currency converter is an updated version of the “calculator” project.

You will learn to handle APIs, Restful or not. There's nothing complicated to do. However, to get accurate conversion rate, you'll have to use an API.

Functionalities ideas to learn more

• make the converter more interactive (converting values instantly when you type them, etc…)
• allow user to convert in several currencies at the same time
• if you're not using your “calculator” project code for this one, implement a calculator functionality
• allow calculations between different currencies
• make the converter capable of recognizing currencies based on the symbols typed by the user

A quiz app

A simple quiz app that allows to create personalized questions on an admin interface and run the full quiz from a simple user interface.

The user's answers to questions should be visible from the admin interface.

Functionalities ideas to learn more

• upgrade the admin interface to handle several quizzes at once
• add a stats view based on the answers and the quizzes use
• add more question type (date, number, multiple choice question, scale question, audio, video, etc.)
• allow filtering (to ask or not to ask) the questions from the answers to the previous questions

Confirmed level projects

If you're confirmed, you know how to code. You can make a simple app from start to finish. And now you're ready for some more challenging apps.

Don't forget : the key to make complex apps is to fraction them in smaller independent functionality blocs.

A billing app

A simple billing app. Almost all developers have worked on that type of software at one point in their career.

The idea is to add products or services with a unit price, a quantity, and the possibility to add a coupon, the software must calculate the total with or without VAT on its own.

To simplify the user's life, most of the options must be automatized (emission date, bills numbering, taxes applications, etc…).

Functionalities ideas to learn more

• allow user to choose its exportation format (excel, PDF, etc.)
• add a CRM part to the app to save the client's info and simplify editing bills
• allow different types of factures : sales, disbursement, credit note, etc…

An e-commerce website

Selling on the internet is so mainstream now that some developers work on e-commerce websites full time.

The concept is simple. You can code a website with products that users can add to their carts and buy by paying with a credit card.

Of course, you'll need an admin interface where you can change the products and handle the orders your customers made.

Functionalities ideas to learn more

• add a plugin for the payment system to make changing it easy
• handle products category management
• allow shipping management (different costs of shipping depending on where the customer lives)
• handle taxes depending on the type of product and buyer's address

A personal blog

It's also a very well-known project. Blogs were all the rage a few years ago.

To make a blog, you'll have to divide your functionalities in two parts :

• the public part of the blog where readers can read the content
• the private part of the blog where contributors can write content and publish it

Functionalities ideas to learn more

• handle comments on posts (and their moderation in the admin interface)
• allow the addition of info for SEO purpose (title, meta, description… etc.)
• add social media sharing options
• allow readers to vote for their favorite posts
• you can even imagine allowing readers to write posts ideas that will only be published if moderated and validated

Here are a few ideas that should keep you busy this summer. If you try, message me on social media. I'll be thrilled to see and test your versions!