MNSH

Project Ideas for beginners

Feb 28, 2023

I used to struggle to come up with project ideas.

I knew I wanted to improve my coding and design skills, but I didn't know what kind of project to build. Most of the ideas I had were either too complex or too easy to be challenging.

My focus was all over the place, and I wasn't sure where to begin or what to build. Watching tutorials and reading articles wasn't helping either.

What changed?

My approach towards building projects.

After building several projects, getting over This is too complex for my brain to handle phase, I can now confidently say that no project is too complex. It all depends on your willingness to put in the effort required to build the project and how you decide to scope it.

While I'm still learning, I've come a long way. I've built several projects, participated in hackathons, and even won a few.

My devpost hackathon projects

My hackathon projects on Devpost

If you're just starting out or struggling to come up with project ideas, you're not alone. While the internet has all the information you could ever need, actually deciding what to build, sifting through documentation, and finally building it is a different thing.

This post is a summary of what I've learned over the past few months, plus some project ideas at the end to get you started.

Building a project

If you're looking to become a better developer, simply watching tutorials won't cut it. You need to get your hands dirty and build things.

But what kind of projects should you build? and how should you approach it. That's what this post is all about.

Building projects is a great way to break out of tutorial purgatory. However, I'm not talking about building a project along with a 10-hour YouTube video. While that can be helpful(only if you can add additional feature in the complete project by yourself) , you won't truly learn until you can build a project on your own.

You can't expect to have a walkthrough video for every project you'll work on in the future. Instead, you'll need to identify problems, break down big problems into manageable chunks, and come up with their solutions.

When you build projects on your own, you'll not only need to identify problems, but also come up with the solutions. This will help you develop a deeper understanding of coding and problem-solving, making you a better developer in the long run.

When it comes to selecting project ideas, there are two main parts to consider:

Having an idea: What, Why, and how?

When I say "having an idea," I don't just mean one-sentence description like "I'll build an Airbnb clone" You also need to consider the project's scope, such as what features you want to build and what technologies you'll use.

Do you want to practice CSS? Or you want to learn how to build a REST API? Or maybe you want to build a full-stack app with React and Express. Clearly defining your goals will help you narrow down your project ideas and make it easier to build.

If you have never worked with these technologies before, this big of a project can be overwhelming. You will loose motivation, fear complexity and end up not building anything.

What you need to do is, break it down into smaller projects. For example, if you want to make full-stack app with React and Express (Considering you have strong HTML/CSS/JS fundamentals) that has basic CRUD operations, here's how I would start:

  • Build the frontend with hardcoded data, don't worry about CSS or how it looks, just use basic HTML elements. Use React beta docs.
  • Build the CRUD REST API in a single file, don't worry about folder structure just yet. Make it work first
  • Consume those APIs in React.
  • And voila, it's done!

Obviously, you are not done here. There is no limit to how much you can polish an app. You can make this app now your playground for learning all kinds of different things.

Here are some ideas:

  • Make it accessible and responsive.
  • Use CSS library.
  • Convert REST to GraphQL.
  • Want to study design? make differnt themes for it. Don't limit yourself to dark mode. How about building a full blown design system.
  • Add authentication. You can do it yourself or use a library like Auth0.

Even if you've never worked with React or Express before, with this approach and tons of resources available online, you can learn a lot. Once you feel comfortable, you can gradually increase the complexity.

You are free to choose the same app or a different one. The point is to break down the project into smaller chunks and build it one step at a time.

Of course, this all requires strong HTML/CSS/JS fundamentals. Check out resources like the Fireship YouTube channel, The Odin Project, Full Stack Open and frontend/backend roadmaps

Actually building it: Getting your hands dirty.

In the past, I used to learn the technology before building an actual project with tutorials, but that's the wrong approach. The right way is to build then learn along.

It's important to set clear goals for what you want to learn. Don't go about creating a clone of a large website without a clear goal, as that can be overwhelming. Once you've decided on your goal, don't focus on other parts of the project.

For example, if you're building a REST API with a frontend, don't worry about how ugly your site looks. Instead, read everything you can about REST APIs and build it. Raise the complexity with every new project you build. You can reference the frontend/backend roadmaps for ideas.

After doing several of these mini-goals, you can mix and match and create a full-stack website.

Some clear goals could include learning to build an accessible website, making it responsive, making a CRUD app, making a REST API, learning CSS (which can be further broken down into sub-goals like learning about positioning, flexbox, and grid).

Different ideas for project

  • Clone open source apps

  • Build a startpage

  • Use this list of Public APIs to get started

  • Build your favourite feature from the website. Like the unique animation from a website.

  • Rebuild your favourite website or app

  • Build something missing

    • Thats how I built feedwise recently - Reddit's saved page is messy and ugly, with no ways of filtering. So I used reddit's API and built a nice dashboard.
    • Hate having to refresh a ecom site for discounts, build a telegram/discord bot to check for price drops
  • Mix and match diferent site/apps

    • How about pokemon tinder but for choosing battles?
    • Cyberpunk themed coinmarketcap.com?
  • Use constraints: Many people use constraints to experiment with learning. Websites under x mb size. Rebuilding sites with same HTML but different css(see CSS zen garden).

  • If you want to learn design, rebuild your favourite things.

    image
  • Participate in hackathons!

    • I was in a phase where I had no ideas or motivation, I was fearing complexity. Thats where hackathons came in. I just participated in hackathons for straight 6 months. I was living and breathing hackathons. Not for the prize money, but to be able to create something. Looks like My brain works well with deadlines.
    • These are the sites I use to participate in hackathons
      • Devpost : I have participated in a lot of hackathons here. They have a lot of hackathons. Truly a digital hackathon club.
      • Devfolio: havent participated here yet, but have heard good things
      • LabLabAI : AI hackathons :p
      • MLH: Major League Hacking :Oh boy, had a lot of fun participating in 48 hour hackathons on weekends here. Also have a very active discord server.
      • Codepen challenges : Not hackathon per se, but good CSS challenges nonetheless
  • Build a site showcasing your hobby

    • Read a lot of books? make your digital library
    • Love photography? how about making your personal instagram
    • Cant plan your day? Just build a digital planner for yourself
  • Build your personal site!

    • Thats how I learned the most. I had a strange obsession in making a personal site that stands out from the crowd. Its the longest project I have worked on. Not only this embarked me on a journey to learn about UI/UX design but also about writing and becoming a creator. I keep tweaking things till this day.
  • Build something for your friend

    • Make something informal. An entire birthday site just for your friend? A sketchy url which redirects to rick roll :)
  • Join a community of builders!

    • There are lot of people on twitter to follow, But I am yet to see a builder community for beginners. Reddit is helpful including r/webdev and r/web_design.
    • Pioneer : Like competing? You will love this. But its more of compete with your product than a beginner friendly hackathon.
    • Buildspace : Currently exploring this one. Looks promising.

Recommended reading

Nowadays I also use chatGPT as my intelligent rubber duck. Explain everything you know, and let the bot fill in new information and make the decision based on that.

PS: I have already written a guide on mastering CSS

Good luck! Happy hacking :)