💻 #99: Build a Figma Clone with Next.js 14 🧑🎨
Plus a Spotify game, a useless app, and a GameBoy
Hi developer! 👋
🟩 🟨 ⬜️ ⬜️ ⬜️ 1229/5000 subscribers 🥇
Should I share my newsletter stats and growth strategy?
Would you like to follow subscriber count, open rate, & growth hacks?
In this weekend’s tutorial, we’re going to be building a Figma clone. If you’re not familiar with Figma, it’s a collaborative design tool often used by product designers to pass their designs along to developers.
I use it daily at my job, our team’s designer builds a feature in Figma and I implement the designs based on what I can see in Figma. It takes out all the guesswork in what spacing is used, colours hex codes, etc.
I do want to become better at actually building designs in Figma, instead of just how to inspect existing designs. If anyone has a good crash course on how to use Figma, please send it to me by replying to this email.
Tutorial of the week:
Length: 4 hours
This weekend’s tutorial is by JavaScriptMastery, they consistently put our great tutorials on web development.
What you’ll learn this weekend:
Next.js 14 ⚛️
Fabric.js 🎛️
Liveblocks 🧱
3 frontend projects of the week:
Use these projects to inspire future projects of your own.
1. A Musical Planet
MongoDB, Express, React, Node.jsIn this weekend’s travel spirit, this full-stack app is using the Spotify API to have you guess where in the world a song is from! You play by listening to a sample track of a local band and guessing where in the world they are from! 🌎
Very creative and a great use of a free API! Great work @DylanTelson, you absolutely crushed it with this!
2. Useless machine
HTML, CSS, JavaScriptNot every website has to be solve complex problems, sometimes they can be useless!
Check out this project by pakastin.fi!
3. Nintendo GameBoy with CSS & JS
HTML, CSS, JavaScriptI love a CSS version of real-life items. I think it’s the mark of a strong developer to be able to recreate something accurately with CSS and HTML. This project is by Manz.dev. Great job!
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,
🫶📝 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