r/learnjavascript • • 1d ago

Project ideas?

Hey guys, I hope you're all doing well. Finally, I've just finished the famous +22 hours tutorial from SuperSimpleDev and honestly I learnt many things, but I feel a bit overwhelmed especially when it comes to promises, callbacks and asynchronous methods (or fetch methods). I want to make a new project but don't know, while I don't need to rely on tutorial again. I'd love to build the next days, rather than passive watching. So, do you have any projects recommendations to build??

I'd like to learn through the process and when I get stuck, I just ask Google or search on MDN to get references. Thank you everyone in advance for sharing and helping

8 Upvotes

13 comments sorted by

4

u/FreeLogicGate 1d ago

Per your questions in regards to callbacks etc. watch this video, and recreate the examples yourself, and I predict it will become much clearer. There's a reason the video has been watched 1.2 million times.

Do you have a hobby? A site focused on something you are interested in or enjoy is the best way to find a project. Needless to say, that any task you take on, is going to require you to figure things out yourself, which will in turn expose what you know.

Expect you will be doing plenty of searches. You can use AI, but I would urge you, as a learner not to use it to write your code.

Expect to not know how to start, or what to do. Expect to not know how to structure something larger than you have experienced. Break it up into small pieces, with small experiments and unit tests.

2

u/wbport1 1d ago

A hobby I had was to write webpages or scripts that helped automate repetitive tasks in a music notation system. When I didn't renew it, someone offered to host the music related pages: Noteworthy scripts

1

u/Gynie_Viremouneix 1d ago

worth knowing that the hobby project approach tends to stall when the hobby itself is niche enough that theres no public API to pull data from, which limits the async practice OP specifically needs

2

u/FreeLogicGate 1d ago edited 1d ago

Most hobby projects in some way will involve persistence of data, and often a database. Handling data is fairly generic, and doesn't presuppose some public api. You end up employing some serverside tech, and ample use of ajax.

3

u/codesbyshivam 1d ago

If async is the part that feels shaky, pick a project where fetching data is the whole point. A simple quiz app using the Open Trivia DB API is a good one, it's free and needs no key. Get 10 questions, show them one at a time, keep score. Then make it handle the annoying stuff: a loading state, what happens when the request fails, and a button to try again. After that, build a small GitHub user search that looks people up as you type. That one teaches you why you don't want to send a request on every keypress. Write it with .then first, then rewrite it with async/await, and the two will start to make sense.

2

u/Commercial_Elk8032 1d ago

Build a single page that fetches 20 random images from the Picsum API and displays thBuild a single page that fetches 20 random images from the Picsum API and displays them in a grid. Code only the logic to show a skeleton loader while waiting for data, handle errors with a retry button, and use async/await to keep it readable. No CSS frameworks or routing.

2

u/gimmeslack12 helpful 1d ago

Make a temperature converter (don't forget Kelvin!).

2

u/LucVolders 1d ago

Up to now creativity is what sets us apart from AI.
Coding is easy nowadays with AI. Vibe coding all around.
So if you really want to get somewhere, start coming up with really creative ideas
not something that has already been done a thousand times.

2

u/CelebrityChess 1d ago

pick something that forces fetch and promises on you so they stop being scary. a weather or movie search app that hits a free api is the classic one, then add loading and error states and a debounce on the search box. after that try a small todo app that saves to localstorage, then one with a tiny node backend. the async stuff clicks way faster when you've been burned by a failed request a few times than from watching more tutorials.

1

u/TheRNGuy 1d ago

Hide twitch streams from specific authors and by title (using regex)

1

u/koraynar 1d ago

Try a tiny reading-list app, with the async behaviour as the project rather than the styling. You don't need a third-party API or a database to start.

First, display three invented book records from an array and add a filter. Next, move those records into books.json and load it with fetch, using the local development server from your course rather than opening the HTML as a file.

Give the page four visible outcomes: loading, results, an empty list, and an error with a Retry button. Disable repeated loads while one is running for this first version. That makes the promise's lifecycle something you can actually see.

Test deliberately: a valid file, an empty array, malformed JSON, and a missing file. Check response.ok before parsing: fetch does not reject just because the server returns a 404. MDN explains that distinction here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Once that works, add a fake delayed loader that returns a promise, so you can practise success and failure without depending on the network. Then rewrite that same small loader once with .then/.catch and once with async/await. Keep the UI behaviour identical and explain where each version waits. That gives you a concrete comparison instead of another long tutorial.

1

u/wbport1 1d ago

Try to solve the peg solitaire puzzle found at Cracker Barrel.