Share Description
In this course, you will :
- Create a full stack With Remix, you can create React websites and apps.
- Use dynamic and nested pages.
- Create nested layouts with optimised data retrieval.
- Form submissions must be handled without the use of client-side JavaScript logic.
- Use session cookies to authenticate users.
Syllabus :
1. Remix Essentials - Core Concepts
- Creating a Remix Project
- Analyzing the Created Project
- Solving Issues with Starting the Development Server
- Getting Started with File-based Routing
- Adding Links & Building a SPA (Single-Page Application)
- Onwards to a Better Project
- Styling Pages & Understanding the Root Route
- Surfacing Component Styles
- Styling Active Links via NavLink
- How Form Submissions Work
- Server-side Form Handling via action()
- Adding Backend Code & Redirecting
- Fetching Page Data via loader()
- Returning & Using Fetched Data
- From <form> to <Form>
- Providing User Feedback via useNavigation
- Validating Input & Returning Data in action()
- Error Handling via ErrorBoundary
- Handling Error Responses via CatchBoundary
- Adding Dynamic Routes & Dot-delimited Routes
- Fetching Data for Dynamic Routes
- Another CatchBoundary Example
- Setting Page Metadata
2. Routing & Layouts - Deep Dive
- What We'll Build - A Demo
- Project Planning & Creation
- Creating Project Routes - A Refresher
- Nested Paths - An Alternative Approach
- Layout Routes
- Adding Components & Styling
- Using Custom Fonts
- Working on More Routes
- Marketing Pages & Static Images
- Leveraging Layouts
- Rendering a Modal Page (Overlay Page)
- Adding Links
- Paths: Absolute vs Relative
- Navigating Programmatically
- Adding NavLinks
- Introducing Pathless Layout Routes
- Doing More with Pathless Layout Routes
- Introducing Resource Routes
- Understanding Splat Routes
- Working with URL Search Parameters (Query Parameters)
- Adding More Expense-related Links
3. Data Fetching & Mutations - Deep Dive
- Project & Database (MongoDB) Setup
- Adding Prisma (A Package For Querying the Database)
- Adding an Expense Data Model
- Preparing the Code for Form Submissions
- Adding a Server-side "addExpense" Function
- Adding Expenses to the Database (via action())
- Adding Server-side Validation
- Submitting Forms Programmatically
- Adding Visual Submission Feedback
- Fetching Expenses (via loader())
- Loaders - A Closer Look
- Loading a Single Expense (via Dynamic Route Parameters)
- How Nested Loaders Are Executed
- Using Parent Loader Data via useMatches()
- Updating Data
- Deleting Data
- One Action - Multiple Forms
- Programmatic "Behind-the-Scenes" Submission via useFetcher()
- Extracting Search Parameters
- Adding Visual Feedback to the Authentication Form
- Adding a Shared Root Document
- Adding Default Error Handling Logic
- Handling Errors Without ErrorBoundary or CatchBoundary
- Managing Errors Inside Components
- Updating the expenses/raw Route
4. Adding User Authentication
- How Does User Authentication Work?
- Preparing the Database
- Adding Server-side Credentials Validation
- Check for Existing Users & Emails
- User Signup & Password Hashing
- Getting Started with User Login
- Sessions & Cookies - Preparation
- Creating Session Cookies
- Extracting Session Data & Rendering Conditional User Interfaces
- Adding Logout
- Protecting Routes
- More Route Protection
- Connecting Expenses & Users
5. Optimizing & Deploying Remix Applications
- Adding Metadata To Routes
- Why You Might Need Custom Page Response Headers
- Setting Page Response Headers
- Working with Nested Headers
- Using Action & Loader Headers
- Disabling JavaScript For Some Pages
- A Brief Look at the Remix Config File
- Deployment Options
- Deploying a Remix Website - An Example (Netlify)
