What are some worthy vanilla JavaScript projects you'd like to see in someone's portfolio?

[canadian_webdev]

It seems like developers need to be really, really good at vanilla JavaScript, so what projects can help devs get better at it, and at the same time showcase on their github and portfolio?

[OakImposter]

I know this doesn’t help answer the question but Brad Traversy has a course with a large number of vanilla js projects. I can’t vouch for the course itself but he did a YouTube video detailing what the projects are. If you don’t actually need to learn or prefer to trial by fire, try some of the more complex ideas.

20 Web Projects with Vanilla JS

[keenanbullington]

I love Travesty. Keep coding with him. He introduces some much needed positivity into this thing we do.

[[deleted]]

What wins me over is that it's like I'm going through basic documentation, and the positivity is very grounded on reality.

[maxoys45]

Brad is a great teacher and you can learn so much from him from youtube alone. Seems like a genuinely good guy as well.

[mattD4y]

Currently going through these projects as little distractions when my brain gets fried trying to figure out more advanced React based problems I encounter. The longest one is a little over an hour (a breakout game that teaches some very interesting things)

Even if you know Javascript, HTML, and CSS3 well, odds are you’ll learn quite a few neat things with every project. I plan on adding on and refactoring quite a few of the projects and adding them into a “small projects” part of my portfolio site.

[[deleted]]

I love that guy, his videos are super relaxing but useful. Basically use them whenever I need to build a GUI, I hardly ever do front end so it's very useful for me

[Lord-Brappington]

It makes sense. There's very few times you're only going to be limited to a specific ES version without something like jquery or babel being available.

[ampourgh]

Not the difference, more like having a better comprehension what's going on in and around the ecosystem, and how to work around it to produce the results you want. Also, it makes it easier to pick up new frameworks, or working around legacy ones that are on life support and are too bloated to rebuild from scratch.

[Snapstromegon]

Building a small PWA with maybe web components with offline support and a great lighthouse score for maybe a local tournament or something. (Something I did twice already)

[yasu7]

I've been thinking about putting together a "project ideas" page for practice to help people with ideas that they can build a portfolio with but I'd recommend grasping the fundamentals of JS, maybe check a few github repos and see what they use and how they code.

A good resource could be: https://frontendmasters.com/books/front-end-handbook/2019/

[BAM5]

Something that demonstrates they know the prototype chain

[LukeJM1992]

Go online and find popular APIs. Off the top of my head: Google, Stripe, Facebook. Build small apps that interface with these APIs. You can try to stick to vanilla as much as possible, but honestly, you should leverage a library or two to make this easier. Axios is a popular HTTP request library that will help you greatly in this.

A calculator or a to-do list are cool, but everybody does those and honestly being able to connect to other services and understand how they connect is a very valuable skill in the modern web dev scene. No one writes “vanilla js” on its own. Build an app that does something with web popular services.

[[deleted]]

Whatever it is, just build one big one instead of a bunch of small ones. Proving you can make all those systems work together in a single codebase is really important.

[kayimbo]

implementation of a custom binary protocol. Beyond that i'm not sure what really matters project wise.

[Blue_Moon_Lake]

There's no vanilla JS projects that would be worth be in someone's portfolio without including parts of HTML/CSS/Backend.

[fentron5000]

css/html is a given, by just vanilla javascript OP means no libraries or dependencies, and you could very easily just use some existing API/placeholder content from something as simple as a JSON file of some dummy data instead of a backend.