8 project ideas for Front-end developers
Tags: softwareengineering, developer, webdev, frontend
Published: 2023-05-30 13:42:48

As a **software developer**, you want to showcase your skills and knowledge in a practical way that everyone can understand. To do that, it’s crucial to have a **portfolio** with your personal projects, even if they’re just for learning purposes.

A well-constructed portfolio can greatly assist in the hiring process, as it demonstrates your ability to **solve problems and deliver functionalities** that meet project requirements. 

If you’re lacking ideas or inspiration, you can use Dribbble to gather some product design references. It’s particularly helpful for those who are not familiar with UX design. I’ve listed 8 project ideas that I came across while browsing Dribbble to help you develop and expand your skills.

### 1 — Shopping Cart

An e-commerce project is quite comprehensive and packed with cool functionalities, but you don’t have to develop them all. One of these functionalities is the **shopping cart**, where you can add products to a shopping list, calculate the total number of items, and the price for completing the purchase. It’s a basic feature, but leaves room for adding other ideas that may arise. If you have the knowledge, you can also create an **API** to facilitate integration with the front-end.

### 2 — Bookshelf

Create a **book manager**. You can start by building a CRUD system where you add books from your personal library. Then, you can mark the ones you’ve already read, the ones you’re currently reading, and even the ones you’ve borrowed. You can manage the reading progress of each book as well. You can use localStorage to store the information, utilize **Firebase**, or even create your own **API**.

### 3 — Album of the Day

Having trouble deciding which song to listen to? Create a page that connects to your **Spotify** library and includes a button that randomly selects an album from your collection or plays a random song. Use the [Spotify API](https://developer.spotify.com/documentation/web-api) to integrate it with your account.

### 4 — Breakout

Surely you’ve played or seen someone play this classic game. It involves destroying a layer of blocks using a ball and paddle while trying to prevent the ball from touching the bottom of the screen. The game was inspired by Pong and served as the foundation for other games and the Apple II computer. To take it further, add scoring and increase the level as the player advances.

### 5 — Product Landing Page

Develop a landing page for an upcoming fictional product. You can create a basic form to collect data from visitors browsing the page. Pay attention to **responsive design**, ensuring that the site can be accessed on any device, regardless of screen resolution. If you’re lacking inspiration, you can take inspiration from various landing page layouts on [Theme Forest](https://themeforest.net/) or [Dribbble](https://dribbble.com/).

### 6 — Component Library

In some projects, we often use the same components and end up copying and pasting them from one project to another, which can be tedious. To solve this issue, you can create your own **component library**, keeping them all in one place to easily access whenever starting a new project. While there are already many libraries available for this purpose, this is your chance to gain knowledge and understand how to create reusable components. Use [Storybook](https://storybook.js.org/) for developing these components; it’s a valuable tool that greatly aids in maintenance and testing.

### 7 — Link Shortener

Another cool idea is to create a link shortener. By using the [relink URL API](https://pipedream.com/apps/relink-url-shortener), you have access to various functionalities to explore, such as social media links, QR codes, affiliate links, video links with the ability to preview the video, and more. There are plenty of possibilities to play around with.

### 8 — Live Sports Scoreboard

If you’re a sports fan, this is a great idea for an app. Create a live scoreboard for football or any other sport. There are several APIs available that deliver real-time sports information. You can create a filter for users to choose which sport they want to follow.

### Conclusion
Here are some app ideas that you can create. The most important thing is to start as soon as possible because it’s through practice that we truly understand those programming concepts that might not be so clear at first. If you didn’t like any of these ideas, you can take a look at the frontendBR repository on Github, where several technical challenges are submitted by different companies for job candidates. It’s a great way to test your skills. Thank you, and see you in the next post!