About this list
I made this list thinking of projects that can be approached in different ways, technologies and features. Because of this, I added a few suggestions of things you can focus on to give you some ideas.
Who is this list for
I have tagged the projects with orientative levels but you can increase or decrease the difficulty very easily.
This list is for you if you are...
...a junior developer trying to practice their skills.
...learning a new technology and you need a simple project to experiment with.
...lost in tutorial hell and you need a break from watching but you want to keep building up your coding skills.
...building a portfolio to start applying to jobs.
...looking for side projects to do for fun.
1- Booking app beginner intermediate
Description: Make an app that displays a calendar with selectable dates. When clicking on a date, a pop up comes up showing available times to make an appointment. The user should be able to add basic information.
Good for: learn how to work with dates, multi step forms, database with users and taken dates/times, testing (react-testing-library, cypress, jest)
2- Browser code editor intermediate advanced
Description: Make a code editor where you can write JS and download the file when you are done.
Good for: Working on your logic mixing html and js, specific css based on conditions, learning how to work with files exports, setting up a project from scratch, testing (react-testing-library, cypress, jest)
Inspiration:
3- Quote Carousel beginner intermediate
Description: Create a responsive component from scratch that accepts an image, quote and an author, create the component so it accepts different themes (styled components).
Good for: Responsiveness, setting up a project from scratch, excersicing logic, reusable component for future projects, create the component so it accepts different themes (styled components), testing (react-testing-library, cypress, jest).
4- Mood app intermediate advanced
Description: Make an app to track your daily mood, the user should be able to choose the mood of the day from different emojis and add a description. The user should be able to see the history, you can also add a graphic representation of the month.
Good for: State management, persistant data, database, data representation
5- Markdown preview intermediate advanced
Description: Make an app where you can input markdown and see the result.
Good for: Exercising logic, setting up a project from scratch, interpretation of characters on context, dynamic styling, unit testing (jest, jasmine, etc).
6- Raffle site beginner intermediate
Description: Make an an app that you can input a product with an image and a title plus a list of participants by email (can be imported through a csv). On a button click, a random winner should be displayed. If you continue clicking the button, another random user should be displayed but not the ones that were already selected.
Good for: CSS practice, setting up a project from scratch, exercising logic, image/file uploading, file handling, testing (react-testing-library, cypress, jest)
Inspiration:
7- Stock market trend advanced
Description: Make an app that crawls and displays the top 5 most mentioned stocks on the subreddit /r/stocks.
Good for: learning about crawlers, data representation, testing (react-testing-library, cypress, jest)
Inspiration: swaggymedia's project
8- Podcast library beginner intermediate advanced
Description: Make an app that works as a personal podcast library. The website should have a way to import podcast through RSS feeds, a player and a list of selectable podcasts. When you select one podcast, it should display a page with all the episodes. When you click an episode it should play it on a audio player.
Good for: Working with third parties apis, database, user log in/sign up, RSS feeds, audio player, testing (react-testing-library, cypress, jest)
Inspiration: Podcast Template
9- Color generator beginner intermediate
Description: Make an app that helps the users get different color palettes for their projects. The user should be able to input a starter HEX color and get matching colors with their HEX codes. The user should be able to save their color palettes and name them.
Good for: logic, setting up a project from scratch, understanding HEX coding, state management, unit testing.
Inspiration: Coolors
10- Spotify music list beginner
Description: Make an app that fetches the top 10 songs of each genre (pop, rock, country, etc) on the user's country.
Good for: Log in implementation, learning how to use .env, state management, responsive ui.
Inspiration: Listen App Template
11- Sign up page beginner
Description: Create a sign up page with a form that has validation, success and error messages.
Good for: learning how to use forms, responsiveness, setting up a project from scratch, event handling.
Design: Free template (https://colorlib.com/wp/template/colorlib-regform-7/)
12- Create a restaurant menu beginner
Description: Create a single page with a restaurant menu that shows the details of each dish on hover.
Good for: exercising css, responsiveness, event handling, html.
Design: Flipsnack free template
13- User dashboard with news and weather intermediate advanced
Description: Make an app where the user can input their name and select five news topics they are interested in. The dashboard should display the weather in their location, news from each topic and an image of the day.
Good for: state management, responsiveness, reusable components, multistep forms, setting a project for scratch, testing.
Design: https://xd.adobe.com/view/19e7e42f-6b0f-46a7-b630-8dd4463e1c4e-4cb4/screen/844a7905-7641-4d31-bcfa-3fe62ae8da2c/specs/
Top comments (1)
This is great, thank you 👌