React Next JS Practical Application ShadCN UI 2025

A practical GUIDE to Web development with Next JS

Created byMatthew Msingathi Hlazo

Last updated 2/2025

English

English [Auto],

What you'll learn

By the end of this course, learners will have a deep understanding of software architecture and design patterns used in modern web applications, enabling them t
Learners will gain expertise in React and Next.js, understanding how these technologies work together to create performant, server-side rendered applications. T
This course will provide learners with a solid grasp of state management and data fetching strategies using TanStack Query and Jotai to handle complex applicati
Students will develop a strong foundation in TypeScript and database management with Prisma, learning how to create type-safe, scalable applications. They will

Course content

1 section • 28 lectures • 7h 55m total length

Introduction3:01
App Demonstration40:08
If you want to test the APP with me, please visit https://www.finenks.co.za/signin
Tech Stack17:12
The App Idea9:01
Explore how a resilient, highly contagious idea for a fintech accounting system evolved from a YouTube project into an MVP startup, fueled by domain passion and investor interest.
VS Code - Git Hub & Vercel31:20
Learn how the pieces connect—from Visual Studio Code to GitHub to Vercel—to deploy a React Next.js app on your domain, including live production deployment and currency display debugging.
10 This I learnt from this Project - Part 19:26
10 Things I learnt from this Project - Part 215:38
Explore how the API functions as a secure backend layer, not a database, and how authentication and authorization with tokens protect frontend apps while guiding technology choices.
My own UI Library14:23
My own Form Component - Mtt Form9:11
Mtt Form Code - Line By Line11:55
Explore the met form in React with a compound component pattern, using a context provider and container presenter to manage subcomponents, react hook forms, types, and loading states in TypeScript.
Sign Up / Login Form - Line By Line18:31
JWT - Json Web Token Explained in Details7:47
Learn how JSON web tokens (JWT) are issued at login, stored in cookies, and decoded to verify identity and enforce expiration-based access.
Sign up / Login API ROUTE - Line By Line9:44
Follow a line-by-line walkthrough of a Next.js sign in API route, covering post handling, request parsing, error codes, Prisma access, bcrypt validation, and cookie-based JWT authentication.
Sign Up / Register UI - Line By Line7:21
Sign Up API ROUTE - Line By Line11:19
Explore the sign up api route in Next.js, handling form data with an image, validating input, checking user existence with Prisma, hashing passwords with bcrypt, and issuing a token cookie.
Matt Laws -Part 114:01
Apply the ten laws of routing to a React and Next.js project: use flat routes, map pages to routes, respect first-visit gifts, and avoid modals and improper tab routing.
Matt Laws - Part 27:46
Prisma Detailed Explanation29:46
Explore how Prisma acts as a middleman between your code and databases, letting you switch between MySQL, SQLite, and MongoDB without changing your schemas, and work with models and relationships.
Global State Management - Jotai9:15
Mtt Navigation - Routing32:45
Learn how routing is built with the met navigation component, where URL changes update screens. Discover how Jyoti atoms coordinate global navigation state across desktop and mobile.
Dashboard Board Introduction7:15
Dashboard Page Code - Line By Line37:10
Explore the dashboard page line by line, analyzing loading spinners and data queries with ten step React query, dynamic routes, and server driven totals for invoices, items, and users.
Create Client Code - Line By Line18:30
Practice building a client creation flow in React and Next.js, including form handling, active user usage, server actions, form data conversion, and error handling to add clients via an API.
Create Item Come - Line By Line16:54
Create Quotation Code - Line By Line31:03
Quotations Table Code - Line By Line22:55
Examine line-by-line quotations table code, leveraging a custom component library with Qazi and UI and ten stack table to fetch, display, relate clients, users, and details, and calculate totals.
Quotation CHATS - Tanstack Query19:32
Learn how a chat system uses TanStack Query to fetch and update messages with useQuery and useMutation, using refetch intervals, query keys, and optimistic updates for instant messaging.
Conclusion - Mtt Fetch12:49
Discover the met fetch hook for streamlined CRUD operations in React and Next.js, using generic types, axios or fetch, and a customizable interface for handling fetching.

Requirements

This is course is not different from a roadmap or a guide, but a Technical Guide with practical code being shown. There are no prerequisites

Description

Course Description:

Welcome to my new Line-By-Line Code analysis Corse. In this course, we take a deep dive into the accounting application Finenks, focusing on its architecture, design patterns, and best coding practices. Instead of writing code from scratch, we analyze the existing codebase line by line, explaining the reasoning behind every decision. This approach ensures you gain practical insights into structuring modern web applications effectively.

We explore a cutting-edge tech stack, including:

React & Next.js – Building scalable frontends with server-side rendering and static site generation.
TanStack Query – Managing API calls and caching efficiently.
React Hook Form – Handling complex form interactions with ease.
TypeScript – Writing type-safe, maintainable code.
Prisma – Simplifying database interactions with an ORM.
Jotai – Managing state in a scalable, composable way.

By the end of this course, you'll have a clear understanding of software architecture, industry best practices, and how to make informed technical decisions when working on real-world projects. Whether you're a developer looking to level up or a tech lead refining your expertise, this course will provide the knowledge you need to build scalable, maintainable, and high-performing applications.

This is something that has never been done before and might give you a clear picture of how complex applications are developed

Are you ready to think like a software architect? Let's dive in!

Who this course is for:

This course is for developers of all levels who want to deepen their understanding of software architecture, best practices, and modern web development. If you’re a beginner exploring React and wondering if it’s the right framework for you, this course will give you a high-level view of how complex applications are structured, helping you make an informed decision. For intermediate and advanced developers, this course provides real-world code analysis, teaching you how experienced developers build scalable, maintainable applications using React, Next.js, TanStack Query, React Hook Form, TypeScript, Prisma, and Jotai. Whether you're a backend developer looking to understand frontend architecture, a self-taught coder refining your skills, or a tech lead wanting to improve code reviews and decision-making, this course will give you valuable insights into building professional-grade applications.