💻 #94: Build a Movie Rating App with React.js 🎬
Build a movie rating app to rank your favourite holiday movies this year!
Happy Holidays and Merry Christmas to all 🎄🎅🏻
Let’s start with some trivia questions to warm us up this weekend.
Question: What does the acronym "URL" stand for in the context of web development?
Question: What was the name of the first computer programmer in history?
Question: Which company developed the first commercially successful personal computer?
Answers are at the bottom of the newsletter.
In this weekend’s tutorial, we’re going to be building a movie rating application. This project is going to use a free movie API to fetch data and we’re going to build a frontend application around this data.
📣 Shout Outs and Sponsors
Do you want to impress your engineering manager? You can have them think you spend hours each night reading about what’s new in the world of React but instead you just read This Week In React.
I’ve been subscribed to This Week In React for about a year now and I’m amazed by how quickly things change with regards to React.js. I really enjoy reading this newsletter because I can actually keep up to date on the new features of React. Things move so quickly in front-end development that you need newsletters like this one to stay on top of things.
You can click here to subscribe (it’s only once a week like this one)
Tutorial of the week:
Length: 2.5 hours
Difficulty: Intermediate
This weekend’s tutorial is by PedroTech. I don’t think I’ve shared any of his tutorials before but I really liked the style of this one. It’s also a shorter tutorial which is a bonus.
What you’ll learn this weekend:
React.js ⚛️
3 frontend projects of the week:
Use these projects to inspire future projects of your own.
1. Pokémon Palette
Turn any Pokémon into a color palette. What a cool idea.
Link to Github Page. Here’s the Pokémon API used in this project. It’s free to use!
Check it out!
2. Bubble Screener
This site displays the stock market’s performance in bubbles 🫧
To change the size of bubbles - Click the settings icon on top right corner. There you can select different options - performance, day's volume, market cap, price.
3. Fluid Simulation
Drag your mouse around and watch as colorful waves appear on screen.
That’s all folks!
I hope you enjoyed this weekend’s edition of Weekend Web Dev!
Was it useful? Help us to improve!
With your feedback, I can find better tutorials and project ideas. Click on a link to vote:
To keep the tutorials flowing and support my newsletter, consider fueling my creativity with a coffee ☕️ - every cup makes a difference!
Your fellow weekend developer,
🧠💡 Trivia Answers
Q: What does the acronym "URL" stand for in the context of web development?
A: Uniform Resource Locator
Q: What was the name the first computer programmer in history?
A: Ada Lovelace
Q: Which company developed the first commercially successful personal computer?
A: IBM
🫶📝 Are you looking for personalized feedback?
Do you have a portfolio, website, CV, or code snippet you would like some feedback on? I’d be happy to review and provide my input. It’s free for feedback, but if you’d like to support me and the newsletter you can buy me a coffee. Then just reply to this email with whatever you’d like to review.
Useful (free) resources
Here are some excellent beginner resources for learning JavaScript
Mozilla Developer Network - the leading resource on JS
FreeCodeCamp - free course
CodeAcademy - intro to javascript - free course
Odin Project - full stack javascript - free course
Eloquent Javascript - book (many people struggle with this book)
javascript.info - reference resource
Traversy Crash Course in Javascript - video series
Intermediate/advanced material
JavaScript Design Patterns - free book
Professor Frisby's Mostly Adequate Guide to Functional Programming - free book
What the heck is the event loop anyway? - JSConf talk about the event loop
Understanding the Weird Parts - paid course covering more advanced topics
Deep JavaScript: Theory & Techniques - free book
Software
Code Sandboxes
Other handy sites