💻 #93: Build a Notion Clone With Next.js 13, React, Convex, and Tailwind 📝
Build your own note keeping app with authentication
Hello, developer 👋🧑💻!
Let’s start with some trivia questions to warm us up this weekend.
Question: What was the name of the world's first computer virus?
Question: Who is known as the father of the World Wide Web?
Question: In what year was the first iPhone released?
Answers are at the bottom of the newsletter.
In this weekend’s tutorial, we’re going to be building a Notion clone. I’m sure by now most of you have heard of Notion, it’s an extremely powerful note-taking and collaboration tool. Personally, I use it often to organize links and resources for the Newsletter. I might make it public, let me know if you’d like to see it!
However, I do still love pen and paper for note-taking and to-do lists.
Tutorial of the week:
Length: 8 hours
Difficulty: Intermediate
This weekend’s tutorial is by Code with Antonio. His channel has been growing a lot recently. The tutorials are often longer than the ones I usually share, but I think the project is well worth the effort.
What you’ll learn this weekend:
Next.js 🌐
TailwindCSS 🎨
3 frontend projects of the week:
Use these projects to inspire future projects of your own.
1. Prime Indies
This project is a collection of indie products and makers, complete with their Monthly Recurring Revenues (MRRs).
Check it out!
2. Gravity In Solar System
HTML, CSS, JavaScript
I love this visualization of gravity in different parts of our solar system. What I like about this project is how it takes a simple demonstration and uses front-end development to make it beautiful and easy to interact with.
3. Chrono Photo
Guess the year of each photo and see how close you can get to the actual year.
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 was the name of the world's first computer virus?
A: Brain
Q: Who is known as the father of the World Wide Web?
A: Tim Berners-Lee
Q: In what year was the first iPhone released?
A: 2007
🫶📝 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.
📣 Shout Outs and Sponsors
Dev Tales is a weekly newsletter where Dimos interviews software developers of all levels, looking for inspiration and practical advice.
Readers of Dev Tales learn how to get their first job, find work as a contractor, get a pay raise, and work remotely while traveling the world.
Check out his latest!
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