Learn TypeScript + ReactBuild and Deploy a Full-Stack Applicationwith Payments and Admin Panel
A five week course that will teach you build full-stack React + TypeScript applications.
Learn how to accept payments with Stripe and build an admin panel to manage your customers.
Reminder system to make sure you complete the course.
Who is this course for?
This course is for web developers who want to learn React and TypeScript while building a real-world application.
Do I need to know React or TypeScript for this course?
You don't have to know any React or TypeScript to take this course. I explain everything along the way.
What do I need to know?
If you are familiar with the basics of JavaScript and HTML then you are ready to go.
What will I get from the course?
You will make and deploy a real store app with the payment system and admin panel.
You will practice connecting a real payment gateway to your app. You can use this knowledge to make your own startup or for freelance projects.
What will I learn?
After the course you will be able to:
- structure your project so that it is easy to maintain and scale
- write optimized React code and avoid common performance pitfalls
- write type-safe code with TypeScript
- write tests for your React components
What will we build?
We’ll build an online store.
The app will have a catalog of parts, a shopping cart, and a checkout page.
What technologies will we use?
We'll use the following stack:
React
To define the UI
NextJS
For routing and server-side rendering
TypeScript
To make the code type-safe
Supabase
To store the data
Stripe
To process payments
Tailwind
To style the UI
What if one of the libraries will get an update with breaking changes?
This is quite likely to happen, this is why I keep track of the new versions and update the course accordingly.
You can find the latest versions of the libraries used in the course below.
Here are the libraries versions currently used in the course:
React: 18.2.0
TypeScript: 5.2.2
Tailwind: 3.3.5
Next.js: 14.0.1
Supabase: 2.38.4
Will this course help me pass job interviews?
Want to be confident in a React interview?
Practice in an interview simulation with 50+ questions and detailed explanations. (comes with Complete Package)
I want to practice with a real person,can I do a mock interview?
Yes, you can get a one hour consultation + interview with the premium package.
Course Contents
For each week, we'll have specific, actionable objectives that align with the course's goal of creating a full-stack application.
Introduction
- Set up the development environment.
- Configure the code editor.
- Install essential plugins for the editor and browser.
- Create a simple React + TypeScript application to ensure that all tools are working.
Week 1
Diving into TypeScript with React
Learning Objectives:
- Understand the core concepts of TypeScript.
- Learn to apply TypeScript types in a React application.
Practical Outcomes:
- Configure TypeScript in a React project.
- Create a series of simple React components with TypeScript types.
Week 2
React and component based architecture.
Learning Objectives:
- Grasp the principles of component-based architecture in React.
- Learn specifics of using hooks in React.
- Learn to write tests for React components and hooks.
Practical Outcomes:
- Create a series of React components with hooks.
- Write tests for React components and hooks.
Week 3
Using NextJS and server-side rendering
Learning Objectives:
- Learn to use folder-based routing in NextJS
- Understand the difference between server and client components.
- Explore different caching mechanisms available in Next
Practical Outcomes:
- Create a NextJS application with TypeScript support.
- Define application routes and create pages for the spaceship store.
- Define the admin panel routes and create pages for the admin panel.
Week 4
Integrating Supabase for data storage.
Learning Objectives:
- Understand how to use Supabase for data persistence in a NextJS application.
- Learn to perform CRUD operations with Supabase.
Practical Outcomes:
- Set up Supabase project and connect it with the Next.js application.
- Design and implement the database schema for the online store (e.g., products, users, orders).
- Develop the functionality to add, view, edit, and delete products from the store's inventory.
Week 5
Payment Processing and Deployment
Learning Objectives:
- Understand the fundamentals of integrating a payment system using Stripe.
- Learn the best practices for handling payments securely.
- Learn the steps for deploying a full-stack NextJS application.
Practical Outcomes:
- Integrate Stripe to handle payments.
- Test the payment workflow thoroughly to ensure reliability.
- Deploy the application to Vercel.
Starter Package
$199
Extras:
- Reminder systemto help complete the course.
Modules:
- Introduction
- Diving into TypeScript with React
- React and component based architecture
- Using NextJS and server-side rendering
- Integrating Supabase for data storage
- Payment processing and deployment
Complete Package
$399
Extras:
- Reminder systemto help complete the course.
- Three groupQ&A sessionsto help you with any questions.
- Automaticinterview trainerto help you prepare for the interviews.
Modules:
- Introduction
- Diving into TypeScript with React
- React and component based architecture
- Using NextJS and server-side rendering
- Integrating Supabase for data storage
- Payment processing and deployment
Premium
$899
Extras:
- Reminder systemto help complete the course.
- Three groupQ&A sessionsto help you with any questions.
- Automaticinterview trainerto help you prepare for the interviews.
- Resume, LinkedIn andCover Letter review.
- Onemock interviewwith feedback.
Modules:
- Introduction
- Diving into TypeScript with React
- React and component based architecture
- Using NextJS and server-side rendering
- Integrating Supabase for data storage
- Payment processing and deployment