💻 #1: Build a task tracker with React
Build a task tracker with React from Traversy Media + creative projects for more project inspiration
Happy Friday, developers!
Welcome to the first Weekend Web Dev (WWD) newsletter! So happy you’ve come to learn frontend development with me.
Tutorial of the week:
This weekend’s tutorial is by one of my favourite tutorial maker’s Traversy Media. He consistently puts out fantastic content, teaching your web development in a clear and concise way.
In this tutorial we’ll be making a Task Tracker. What you’ll learn:
Setting up a React App with `create-react-app`
React best practices in 2021
State & useState Hook
Passing Props
JSON servers
3 creative projects of the week:
1. Pokémon or Big Data?
Built with React, Bootstrap, Live-ServerDo you know the difference between Horsea and Seahorse? What about Flink and Spoink?
Everyday new technologies are created and need creative names to stand out, a maker named Pixelastic shows off how hilarious these tech names have become by comparing them to Pokémon.
https://pixelastic.github.io/pokemonorbigdata/ by @pixelastic
FYI: Spoink is also a Pokémon and Flink is a batch and stream processing system. Very confusing, I know.
Check out the Github repository here. Follow Pixelastic on Twitter.
2. The Deep Sea
A beautifully smooth visualization of what’s lurking below by maker @nealagarwal. I don’t recommend holding your breath while trying to scroll to the bottom, it’s a lot deeper than you’d expect!
3. Quiz App + React + GSAP
Built with React and GSAP (GSAP is a javascript animation library)A beautifully animated 10 question quiz to really test your frontend knowledge! Made by @knyttneve
I got 7/10, the questions will really test your knowledge. Tweet at me and tell me what you got!
That’s all folks!
Well, I hope this week’s tutorial helps you get an idea of what’s possible with React.js!
I hope you found this useful and inspiring. If you want to follow the build in public journey of this newsletter you can follow me on twitter @devanpellow!
Remember, if you need help React.js the documentation is fantastic or send me a tweet and I’ll try to help with any frontend related!
Your fellow weekend warrior,
Devan