18. Projects

If you've made it this far, you're ready to build your first pet projects, projects that aren't aimed at a real client but instead give you value and experience. An excellent way to professionally demonstrate your skills as a developer. So I'm going to list, ordered by difficulty, challenges that will simulate future assignments as well as others that will push you to explore other areas of knowledge not covered by the course.

One last piece of advice: "Done is better than perfect."

Tip calculator

Use plain JavaScript.

Enter the price and the percentage of the tip you want to give. The fields will be the following.

• Amount.
• Tip percentage to give.

An example:

• Amount: 23 euros
• Tip percentage: 10%

Result: The tip will be 2.3 euros (23 / 10), so I'll need to pay 25.3 euros (23 + 2.3).

Clock

Use plain JavaScript.

Show the time, date, and day of the week with a nice design.

Shopping cart

Create a shopping cart as complete as you think it needs to be. Some features could be:

• Add products.
• Select quantity.
• Calculate final price.
• Count units.
• Calculate shipping costs.
• Add discounts.

You can see an example of an already built cart.

Task manager: To-do

Use plain JavaScript.

You must be able to build a full CRUD flow.

Timeline

Use a framework, such as VueJS.

Starting from a JSON with the following fields:

• Company.
• Position.
• Date.
• Description.

Generate a timeline in HTML.

Trivia

Use a framework, such as VueJS.

Build a game to ask questions and add up points for each correct answer.

• The questions, their corresponding answers, and solutions must come from a JSON.
• Include a scoreboard with points and maybe a chart.

Card matching pairs

Use a framework, such as VueJS.

Build a game to find matching pairs of cards.

Weekly weather

Use AJAX and connect to an appropriate API.

Show the weather forecast for the week in the area where you live.

Blog

Use AJAX and connect to an appropriate API. You can use Airtable, Supabase, or the WordPress API.

Create your own blog with features such as:

• Create.
• Search.
• List.
• Paginate.
• Leave a comment.

Receipt generator

Use AJAX and connect to an appropriate API. You can use Airtable, Supabase, or the WordPress API.

Create a receipt from information stored in a database.

Hotel booking system

Use AJAX and connect to an appropriate API. You can use Airtable, Supabase, or the WordPress API.

List a series of rooms with their corresponding features.

• Is it available?
• Room number.
• Number of beds.
• Does it have a bathroom?
• Extra bed?
• Price

Each room should be bookable individually, with the restriction of booking for the same day (you can't book for a specific date in the future). To do this, include a form for the customer to enter their details and a fake payment gateway.

Geiger counter

Create a Geiger counter, with random data, featuring different dynamic parts.

• Number of particles per second.
• Chart with its history.
• Characteristic sound for each particle.
• Ability to mute.
• Controls to increase or decrease the number of particles per second.

Bingo

Use WebSockets and connect to an appropriate API. You can use Supabase.

1. Randomly generate a card with 15 numbers between 1 and 100 when a visitor enters the site.
2. Create a button that, when pressed, generates a number and notifies all connected users.
3. Automatically cross out the numbers.

Real-time chat

Use WebSockets and connect to an appropriate API. You can use Supabase.

Create a simple chat, like Signal or similar, for talking in private or group rooms.

Pong

Using the canvas tag, draw simple shapes to recreate the game of Pong.

• Move each paddle up and down using the keyboard.
• Move the ball.
• Determine whether the ball is colliding or not.
• Automate the ball's movement so it travels until it changes direction upon colliding with a paddle or boundary.
• Create a scoreboard. If the ball reaches the left or right boundary, a point is added to the corresponding player.

Tetris

Recreate the game of Tetris using canvas or a 10x40 grid.