I made a Bandersnatch clone. Come interview me!

#watercooler #javascript #devjournal #showdev

It's amazing how complex something can get.
And something like this sure demanded a lot, especially because, many of the APIs I had never used.
And also... all the event listeners and triggers... so many triggers.

My player has a fraction of the functionalities a player like Youtube has, and yet I was already drowning in endless "pages" of events.

The stack

Next.js / React.js
- Mostly because is what I'm used to... and since I'm using React, no reason not to go with Next, even though I'm not actually using anything it offers.
Chakra UI
- I love the developer experience of Chakra UI. I mean... what's more intuitive than fontSize={[1em', '1.2em', '1.5em']} to handle breakpoint values?
AWS S3/Cloudfront
- The videos are hosted there.

Github of the project: https://github.com/Noriller/bander-interview

What I'm not using

The video data should probably be inside a CMS... and if I want to make it a "boilerplate" of sorts for other things, I could probably refactor a lot to make all the configuration taken from a CMS...
If I did that, I could actually put Next to use and have multiple different copies, each one for one occasion.
But that will come another time...

And tests... I chose not to have tests because the components are either too humble or too "godly".
The actual video player has too many triggers going on and I was changing a lot from commit to commit, alongside learning the APIs... so, I'm ashamed to say... it's not tested.

The player

What do you need for a player?

I choose to go vanilla on this one, using the pure <video /> component.

For those who don't know, the most important APIs for the player are the HTMLMediaElement and the Media Source API.

HTMLMediaElement is the one you use for the video components.

Media Source API is the one you use if you want full control of the buffer you're using on your video. (This one, basically gives you player superpowers!)

Things to consider

When making the best video player possible... you probably want to make your own controls, so give a look at my Fullscreen API article.

And, when I think about a video player I think about:

Play/Pause
Volume
Video Quality
Playback Speed
Seek bar
Fullscreen

All with buttons (or clicks) and with listeners for the keyboard.

Of course, you're always free to not implement something, maybe because it's something you think your app shouldn't do... (as I did!)

Interview?

Fine, you want to see the finished product right?

But first...

What's the interview about?

And the interview is actually a job interview... mine!
You can interview me at https://noriller-interview.vercel.app/

I'm currently job hunting for a job opportunity outside Brazil (where I'm currently living).
And since I had little success, I decided to spice my portfolio a bit while making sure I could get interviewed by anyone who wants it.
There are a lot of opportunities out there, but for reasons... even when I got to the interview phase...

If you or your company is hiring... I want to work with you!
I like frontend, but I'm fullstack. And while I do have some years of programming, I'm considering even junior positions (I do still have a lot to learn!).
I would love to work on-site or hybrid... so I would need sponsorship.

If not, you can always help by sharing... maybe someone will want to work with an "outside the box" guy who made a Bandersnatch clone to get interviews.

If you want, you can share this very message:

Check this out: mad lad made a Bandersnatch clone to get interviews!
Watch here: https://noriller-interview.vercel.app/

And regardless of that... feel free to add me on Linkedin.

As a special thanks, I have to acknowledge another "outside the box" person who used a chatbot to get a lot of interviews. I saw in the news somewhere, a few months ago and since I can do frontend... well... there you have it.