10 project ideas to help escape tutorial hell

ยท

5 min read

10 project ideas to help escape tutorial hell

I found myself completing a course then instantly jumping into another one. It felt amazing to get to the end of a course and to a completed project, it felt like progression. I was proud of what I had made and achieved. However, I did not quite feel ready to go out and start a project of my own ideas, so I would jump straight onto the next course. "After this next one, I will be ready..." I told myself, but deep down I knew this was not true. Unfortunately my progress was spoon-fed to me by the instructor as I coded along to the courses. The moment I went to create my own project I instantly hit a brick wall, I had no clue where to start or what my next step was.

My initial thought was, "oh I can just go and re-watch the courses to remind myself". That is when I realized I had hit tutorial hell. I had not been taking any real notes as I went through the tutorials, just simply coding along, not thinking about what I was doing or why. I had nothing to look back on, no reference for what I had learnt. This is where I needed to ask myself "how do I escape this?". The answer was to just build something, anything at all. It does not matter how big or small, as long as you build and learn from it. Start small and add new features to it. Do not over complicate things at the start and overwhelm yourself. Keep it simple.

What did I do next? I wrote down some project ideas and broke down all the moving parts for each idea into simpler components. I then assembled the simplified components into a new project and started coding away. After my first small project, I had learnt more than what I had in the last 20+ hours of courses. I hit many road blocks along the way and most of the time, google was my best friend to find the solution. Do not be afraid to google a problem if you're stuck, it is a part of the learning process. We cannot be expected to memorize everything.

Coming up with project idea's is no easy task within itself. Think about problems you face in your day-to-day activities and come up with a idea to solve them. Browse the internet and recreate features from websites you found interesting. There are also sites like dribble and product hunt that are great resources of inspiration.

Below is a list of 10 starter project ideas, some I have completed myself, others I am planning to do:

1.Minesweeper game

A childhood memory of mine. A single player game, the objective is to clear a rectangular board containing hidden bombs without detonating any of them. Revealing cells that provide clues about the number of neighbouring bombs.

Here is an example of the app i created while learning VueJs Minesweeper

2.Todo list

I know I know, everyone does this. But having recently done this myself I now understand why this is suggested so much. Start with basic functionality, add a new item to the list, view all items, delete an item and complete an item.

From here you can start to add more advanced features:

  • Store the list on page refresh
  • Drag and drop List sorting
  • Categories
  • Search
  • List Filtering
  • Notifications

Demo project: Todo Demo Code: Github

3. A minigame

Be it top trumps, battle ships, solitaire, a memory game or and childhood memory. Go out and re-create it. I am personally planning to create a memory game based on champions from one of my past favourite games

4. Basic Calculator

I Created this calculator while doing the FreeCodeCamp course, this was one of my personal favourites to make. You can easily add some additional more advanced functionally to it

FCC Calculator

5. Progress percent component

A progress bar and circular progress bar. When first creating this I thought it would be super simple and a 20 min coding session. Oh boy was I mistaken, after a couple of hours I had learnt plenty of new things.

React progress bars

6. Random quote generator

Using your own list of quotes, or a third party API. Press a button to return a random quote. Each time populating a new random quote from the list.

Bonus feature:

  • Add the option to tweet the random quote

7. User Authentication API

This is my current project. Starting small, create a API for user authentication. I personally chose to use JWT cookie based authentication. Firstly create a simple system with a Register, login and logout endpoint. With basic validation for email and password.

Moving forward you can add the following:

  • Verify email process
  • Forgot/ Reset password
  • A route that requires the user to be authenticated
  • Tests
  • Create a frontend for the Api

You can follow my progress for this project here:

Boilerplate-auth

8.Random string generator

Return a random string by a given length, like a password generator. From here you can give the option to what characters are returned in the string.

9. Bot

You have most likely used apps like discord, slack or websites like twitch with a live chat feed. Create a bot to interact with them. From commands or mini games for the users.

10. Web Scraper

Pick your favourite website and create a web scraper to collect data from it. Or have it automate some tasks you do there on a daily basis and return the results

Thank you!

If you got this far, thank you for taking the time out to read my post. I hope this helps anyone facing the same issues I had. Also feel free to also share your experiences, you never know who it may help.

ย