Build a Notion Clone with React and TypeScript

Enhance your React and TypeScript technical skills and build a portfolio-worthy application that demonstrates to employers your ability to create complex, full-stack applications. Plus you’ll learn to utilize Vite for efficient project scaffolding and Supabase for database management and authentication.

Learn to use React with TypeScript, enhance your technical skills, and build a portfolio-worthy application that demonstrates to employers your ability to create complex, full-stack applications. Plus you’ll learn to utilize Vite for efficient project scaffolding and Supabase for database management and authentication!

What you’ll learn

• Learn how to create a React app with TypeScript
• Understand the benefits of React TypeScript apps
• Build a comprehensive, standout portfolio project that will wow employers
• How to test React TypeScript applications
• Advanced UI techniques, such as drag and drop, to create engaging interfaces
• Type-safe programming skills for more reliable and maintainable code

Why Is This React TypeScript Project Awesome?

Because it’s the perfect opportunity to learn how to use React with TypeScript while building a portfolio project!

This is your playground to explore, learn, and create something truly impressive. Not only will you boost your technical skills, but you’ll also craft a portfolio-worthy application that shouts, "I can build complex, full-stack applications, no sweat!"

Here’s what you’ll be learning in this React TypeScript Project:

2. Then, there’s DNDKit – because who doesn’t love a bit of drag and drop? We’ll show you how to make elements on your page movable with just a mouse drag. You’ll learn to set up custom drag targets and reorder elements seamlessly. It’s a skill that’ll add that extra polish to your projects.

3. Of course, we can’t forget about TypeScript. It’s all about making your code bulletproof, catching errors early, and making your development process smoother. We’ll dive into how to use TypeScript with React, define new types, and utilize types from libraries to make your code cleaner and more reliable.

4. Vite is your fast-pass ticket to getting projects off the ground quickly. It’s a build tool that’s all about speed, letting you bootstrap, build, and run your projects faster than ever before. You’ll love the efficiency it brings to your workflow.

5. Supabase is where your app’s data lives. From managing your database to storing images and handling user authentication, it’s got you covered. It’s a powerful tool that simplifies backend work, letting you focus more on creating amazing user experiences.

6. Lastly, CSS Modules will be your go-to for styling. Say goodbye to style clashes and hello to modular, reusable CSS that makes your app look stunning.

More Info