8 Projects to Build to Master Your Front-End Skills 🥇🏆
Tags: showdev, react, nextjs, svelte
Published: 2021-08-05 09:48:07

---
title: 8 Projects to Build to Master Your Front-End Skills 🥇🏆
published: true
description: 
tags: showdev, react, nextjs, svelte
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkyx3gtb40k7zo9snf98.png
canonical_url: https://www.madza.dev/blog/8-projects-to-build-to-master-your-front-end-skills
---
I've always believed that the best way to learn is by doing. Recruiters prefer practical projects over theoretical knowledge, as well.

Over the span of a year, I created 8 web app and game clones. I decided to share them, so community can get some inspiration to build as well. 

In order to explore and compare how various front end solutions work, I tried to use different stacks, varying from Vanilla HTML to React, NextJS and Svelte. 

For each project a link to deployed project as well as the source code will be provided. Give them a 🌟 on my [GitHub](https://github.com/madzadev) if you like.

---

## Calculator 

![enter image description here](https://www.madza.dev/_next/image?url=https://images.ctfassets.net/zlsyc9paq6sa/4qRjISjiWcXbf71Xdjib5N/a8e300ee23fb8dd6a09bc8eef8652400/O3CKScM.gif&w=1080&q=70)

### [💻 Live project](https://calculator-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/calculator)<br/><br/>

First I wanted to create some practical app that each of us use in our daily routines. A calculator seemed to be a nice fit.

It has come in handy from time to time.

Features include:

1.  Add, subtract, multiply, divide
2.  Support decimal values
3.  Calculate percentages
4.  Invert the values
5.  Reset functionality
6.  Format larger numbers
7.  Output resize based on length

The project is written in  [React](https://reactjs.org/).<br/><br/>

## Weather App

![enter link description here](http://images.ctfassets.net/zlsyc9paq6sa/3uBrJ07WSM40FpolgjInHY/7d886cb4187b52194bf9b63c183a1d3a/1627637330_x.gif)

### [💻 Live project](https://weather-app-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/weather-app)<br/><br/>

With this next app my aim was to be able to check the weather conditions across the world. I used Openweather API to fetch data from their site.

To make it a bit appealing to the eye, I decided to combine it with some icon graphics that correspond to the conditions displayed.

Features include:

1. Search functionality
2. Metric vs Imperial system
3. Current local time and date
4. Temperatures and humidity
5. Wind speed and direction
6. Sunrise and sunset times

The project is written in [NextJS](https://nextjs.org/).

Icons are taken from  [Flaticon](https://flaticon.com/).<br/><br/>

## Breakout

![enter image description here](https://www.madza.dev/_next/image?url=https://images.ctfassets.net/zlsyc9paq6sa/29NfY5BfVuO3LpeHwRYV4R/e83a19c8a847e7a5d431c7cc74864a22/c4uaKqL.gif&w=1080&q=70)

### [💻 Live project](https://breakout-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/breakout)<br/><br/>

[Breakout](https://en.wikipedia.org/wiki/Breakout_(video_game))  is an arcade game originally developed and published by  [Atari](https://en.wikipedia.org/wiki/Atari).

In Breakout, the goal is to destroy all the bricks at the top. A ball bounces off the top and two sides of the screen. When a brick is hit, the ball bounces back and the brick is destroyed.

The player loses a turn when the ball touches the bottom of the screen; to prevent this from happening, the player has a horizontally movable paddle to bounce the ball upward, keeping it in play.

Features include:

1.  Moving paddle + ball
2.  Bricks generation
3.  Collision detection
4.  Score keeping
5.  Level system
6.  Lives tracking
7.  Game over / Reset

The project is written in [Svelte](https://svelte.dev/).<br/><br/>

## 2048 
![enter image description here](https://www.madza.dev/_next/image?url=https://images.ctfassets.net/zlsyc9paq6sa/44dvlE4XsjnPYxhYV0BokW/4e59dee4fd0952312a2e4072c61cecee/Tn8VS0npqE.gif&w=1080&q=70)

### [💻 Live project](https://2048-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/2048)<br/><br/>

[2048](https://en.wikipedia.org/wiki/2048_(video_game))  is a single-player sliding tile puzzle game initially written by Italian web developer  [Gabriele Cirulli](https://github.com/gabrielecirulli)  in 2014.

It's played on a plain 4×4 grid, with numbered tiles that slide when a player moves them using the four arrow keys. Every turn, a new tile randomly appears in an empty spot on the board.

The objective of the game is to slide numbered tiles on a grid to combine them to create a tile with the number 2048.

Features include:

1.  Slide tiles on X and Y axis
2.  Sum tile values on collision
3.  Color scheme for specific values
4.  Score keeping
5.  Best score memory
6.  Winner detection
7.  Game over / Reset

The project is written in  [Svelte](https://svelte.dev/).<br/><br/>

## Memory Game

![enter image description here](https://images.ctfassets.net/zlsyc9paq6sa/1vw5KguANULQqNkPDNuAOP/d5e179fafd5f620b0b26a31dfc33cd5a/1627636877_x.gif)

### [💻 Live project](https://memory-game-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/memory-game)<br/><br/>

Memory games comes in different forms and variations.

 I decided to go with traditional approach, where users have to remember the positions of the cards and open two exact images sequentially to score points. Once all the cards are opened user is victorious.

I used Unsplash API to fetch images from their site.

Features include:

1. Moves tracking
2. Match percentage
3. Win state detection
4. Reset functionality

The project is written in [Svelte](https://svelte.dev/).<br/><br/>

## Tic Tac Toe

![enter link description here](https://images.ctfassets.net/zlsyc9paq6sa/3HTYWmjkvJK2Tlgeublqdb/b4068de81576fb6998400d273cd14c47/1627997372_x.gif)

### [💻 Live project](https://tictactoe-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/tic-tac-toe)<br/><br/>

Tic-Tac-Toe is a very popular two-player game, where users take turns marking 'X'es or 'O's in a 3×3 grid. It's been played in different environments starting from classical pen and paper to many UI-different versions online.

The player who succeeds in placing three of their marks in a diagonal, horizontal, or vertical row is the winner.

1. Built-in moves calculation
2. Winner detection
3. Reset functionality

The project is written in [Svelte](https://svelte.dev/).<br/><br/>

## Rock Paper Scissors

![enter image description here](https://images.ctfassets.net/zlsyc9paq6sa/2qyEJJ1co1Aur3T6nq7QDM/3b4953c69237d5270736651087cb89f6/1628153331_x.gif)

### [💻 Live project](https://rockpaperscissors-madza.netlify.app/) / [🔗 Source on GitHub](https://github.com/madzadev/rock-paper-scissors)<br/><br/>

Rock-paper-scissors originated in China and spread with increased contact with East Asia, while developing different variants in signs over time.

A player who decides to play rock will beat another player who has chosen scissors, but will lose to one who has played paper; a play of paper will lose to a play of scissors. If both players choose the same shape, it's a tie. 

Features include:

1.  Round tracking
2.  Score keeping
3.  Choice display
4.  Computer selection
5.  Winner detection
6.  Reset functionality

The project is written in [React](https://reactjs.org/).

Icons are taken from  [Icons8](https://icons8.com/).<br/><br/>

## Landing Page

![enter link description here](https://images.ctfassets.net/zlsyc9paq6sa/5BIbaao5okRUJ5FDw3GuwV/f3474889b7c6ff8eeffec142bf2d342d/1628151891_x.gif)

### [💻 Live project](https://landing-page-madza.vercel.app/) / [🔗 Source on GitHub](https://github.com/madzadev/landing-page)<br/><br/>

This landing page was created as a temporary placeholder for my personal domain while I was working on my portfolio. It's designed keeping simplicity in mind for both setup and UI.

Since I no longer host it on my personal domain, I decided to make a template from it, so other devs looking for a landing site could benefit as well.

I also made a  [tutorial](https://madza.dev/blog/create-a-landing-page-in-less-than-100-lines-incl-css)  on how to create it from a scratch.

Features include:

1.  Info about the dev
2.  Icons linking to social media
3.  Interactive hover effects

The project is written in  [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).

Icons are taken from  [Icons8](https://icons8.com/).<br/><br/>

---

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!
For more projects like these, check out my [portfolio](https://madza.dev/code).