Introduction
As a web developer, personal projects are extremely important. They showcase your skills and prove your understanding of programming. If you're a beginner then this post should guide you through projects focused on increasing your skills and understanding. If you're an advanced programmer then this should give you some inspiration on what to build for your next project.
If you're a beginner, I recommend you go through a course first. It helps to have some existing knowledge before attempting to create your projects. I personally used courses from Scrimba and SoloLearn to build my initial understanding.
Beginner
These are some pretty basic projects meant to be easy but still require some problem-solving. One of the major things to focus on is connecting your websites to external data sources. APIs are a good introduction to creating dynamic websites using data.
Project One: Weather Web App
This one is a simple introduction to connecting websites to APIs. You can use any weather API but the most common two are OpenWeatherMap and WeatherAPI. The goal here is to fetch data from an API and display it to the user. You can use the fetch method and convert the data into JSON to interpret it and then update the HTML to display the information. It shouldn't be too complicated and it'll help create even more applications by using a variety of APIs.
I built this project myself, AstroWeather, so you can take this as an example. Note, this is using more complex methods, animations and technologies. Your one would likely be simpler.
Project Two: Google Search Clone
This doesn't include making a whole search engine yourself, but rather just recreating the main search page. It also doesn't have to be an exact clone, feel free to add your own touch. You can make the search into an input element and when the user submits the form either by clicking a button or pressing enter, you route the page to www.google.com/?q=query.
The main goal is to work on creating layouts, working with multiple elements and taking inputs from the user.
I have also built this project myself. My one is not an exact clone and it's more of a new tab page but it showcases the goals for this project really well.
Intermediate
So you understand the foundation of coding. You've written some code yourself, made some projects, researched technologies and are ready to take your programming to the next level. So there are two goals now, learning how to output data and playing around with animations. Understanding how to output data is extremely important because many of the websites you will come across take input from the user and add it to a database. Animations are also important especially nowadays when there is more competition and you'd want your websites to stand out.
Also, you should just be looking into JavaScript frameworks like React, Angular, Vue and Svelte. They make web development far easier, are more scalable and
Project Three: Journal Web Application
This is a project where you take multiple inputs from the user and add them to a database of some sort. Daybook is a good example of what you're going to build. Now you can build this in many different ways. I'm going to outline the path I would personally take. As for the database, there are many options, personally, I'd go with Supabase but feel free to use whatever you are comfortable with.
You'd want 3 different pages: a login page, a home/dashboard page and the editor page. For logging in, Supabase offers authentication which is pretty easy to implement but if you find dealing with authentication difficult then you could just go with saving the data to local storage. Next, you'd build the home page which would display all the user's journals. You'd want to map over the data and create the elements rather than having predefined elements and changing their HTML. React is very good for creating repeatable components. For the editing page, you could go for a simple input element or you could go for a rich text editor. Then the user can save those inputs in either the database or local storage depending on your choice.
I have created this project but it hasn't been updated to use Supabase yet. It should still give you a good example of what this project is meant to achieve.
Project Four: Portfolio Website
Now that you've created some projects, you can create your own portfolio. You can showcase who you are, what you do, your experience, your skills and how people can reach you. Your portfolio website is a portrayal of who you are and it is likely the first thing people see so you should really go all out here. This is also where animations come in. Animations can help you stand out and also make your portfolio website look and feel amazing. If you are using vanilla JavaScript then you could look into GSAP, Animate-On-Scroll, AnimateCSS and AnimeJS. For React, I would highly recommend Framer-Motion but AnimateCSS works in React pretty good as well.
For some inspiration here are some amazing portfolios: Tanvir Bhachu, Richard Mattka, Alex Coven, Robb Owen and Brittany Chiang. These are just some examples of portfolios I really love.
Advanced
Now you can pretty much go above and beyond. Anything is possible and you're simply limited by your time and creativity. At this stage, you probably want to create websites that are either providing a service or showcase high technical skills. Now you have a lot of choices here but if you're reading this then you probably want some ideas. So here are some advanced projects you could work on.
Project Five: Social Media App
Why not make your own Instagram? It's a cool project where you can work with authentication, handling user profile updates, posts, messaging etc. You can integrate a lot of technologies and I built my own social media app in about 1-2 weeks. I used my own login system, forgot password system, SanityCMS for posts and MongoDB for any database-related tasks.
Check out my social media app project, Veritas.
Project Six: Management System
You might make a CMS (Content Management System), CRM (Customer Relationship Management), or a management system for students to track assignments, tasks, grades etc. You have a lot of options with this one but it's something that could be useful for you and others. It's also a project that could showcase your skills.
Project Seven: A Game
Building games on websites is a bit difficult. For 3D, you need a lot of math and a high level of understanding of physics and animations etc. However, 2D games are much easier to build and might be a pretty fun project. You might create your own clicker game, maybe a platformer or a story-driven game. You could go insane with the animations and art to create something beautiful. This project is very different to the other projects since those are more professional whereas this would be more fun.
Project Eight: Clones
You could create your own clone of pretty much anything on the web. Maybe you don't like discord, so you could create your own discord just for you and your friends. Maybe you think Amazon could look a lot nicer with a minimalistic theme instead. This is a project which keeps on giving. You clone as many websites as you want and add your own twists to them.
Conclusion
Your personal projects should focus on either improving your skills or showcasing your skills. At the beginner to intermediate level, the main focus is guiding you through learning different technologies and solving a variety of problems. At the advanced level, you should be at the point where you can create pretty much anything you want. Well, that's all for today.
Top comments (0)