Remix.js - The Practical Guide from Udemy

What's inside

Learning objectives

Build fullstack react websites and apps with remix
Implement dynamic and nested pages
Construct nested layouts with optimized data fetching

Handle form submissions without client-side javascript logic
Implement user authentication via session cookies

Build fullstack react websites and apps with remix
Implement dynamic and nested pages
Construct nested layouts with optimized data fetching
Handle form submissions without client-side javascript logic
Implement user authentication via session cookies

Syllabus

Get started with this course and Remix (and understand what both are about).

Welcome to the Course!

What Is Remix? And Why Would You Use Remix?

Remix vs NextJS

About The Course

How To Get The Most Out Of This Course

Attachments & Discord Community

Learn about the key Remix concepts you must know in order to build any kind of Remix website or web app.

Module Introduction

MUST READ: Creating a Remix v1 Project

Creating a Remix Project

Adjusting the Created Projects

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

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

Summary

Learn more about file-based routing, page management and how to created (potentially nested) layouts.

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

An Alternative Way Of Setting Up Routes

Module Summary

Learn more about data fetching, data mutations and how to blend backend and frontend code with Remix.

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

Practice Time - Challenge

Practice Time - Solution

Updating the expenses/raw Route

Learn how to add session-based user authentication (login & signup) via cookies.

Project Setup

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

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Builds a solid basis for beginners by introducing key Remix ideas, such as file-based routing, page management, and layout creation

Deepens the understanding of intermediate learners by delving into data fetching, data mutations, and blending backend and frontend code

Provides a hands-on approach through the construction of two significant projects, including an 'Expenses Management Website' with CRUD operations and user authentication

Utilizes a series of modules to structure the learning process, allowing learners to grasp concepts incrementally

Emphasizes real-world applications by demonstrating how to handle form submissions, connect to databases, and implement user authentication with session cookies

Taught by Maximilian Schwarzmüller, an experienced instructor recognized for his work in React and JavaScript

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Remix.js - The Practical Guide with these activities:

Review basic programming concepts

Show steps

Solidify your understanding of core programming principles to enhance your comprehension of Remix concepts.

Browse courses on Programming Concepts

Show steps

Revisit variables, data types, and operators.
Practice control flow statements like if-else and loops.
Review functions and their implementation.

Follow a React.js tutorial

Show steps

Complement your understanding of React.js, a key component used in Remix, by working through a structured tutorial.

Show steps

Find a beginner-friendly React.js tutorial.
Follow the tutorial step-by-step, creating your own React.js project.
Experiment with different React.js components and features.

Complete coding challenges on LeetCode or HackerRank

Show steps

Sharpen your problem-solving skills and reinforce your grasp of core programming concepts through coding challenges.

Show steps

Select a platform like LeetCode or HackerRank.
Choose beginner-level challenges related to JavaScript or React.js.
Attempt to solve the challenges independently.
Review solutions and learn from your mistakes.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a simple CRUD application with Remix

Show steps

Apply your newfound knowledge by creating a practical application, solidifying your understanding of CRUD operations and Remix concepts.

Show steps

Plan your application's data model and user interface.
Set up a new Remix project and define your routes.
Implement CRUD functionality for your data model.
Style and polish your application's user interface.
Test your application thoroughly to ensure its functionality.

Organize and expand on course materials

Show steps

Enhance your understanding by organizing and expanding on the materials provided in the course, ensuring a comprehensive learning experience.

Show steps

Review course notes, assignments, and quizzes.
Create summaries and mind maps to consolidate your knowledge.
Annotate materials with additional insights and examples.

Attend a Remix-focused workshop

Show steps

Expand your knowledge and connect with others in the field by attending a workshop tailored to Remix, gaining practical insights and networking opportunities.

Show steps

Search for upcoming Remix workshops in your area or online.
Register and attend the workshop.
Actively participate in discussions and hands-on exercises.
Connect with fellow participants and industry professionals.

Contribute to an open-source Remix project

Show steps

Deepen your understanding of Remix by contributing to an open-source project, gaining practical experience and collaborating with others in the community.

Show steps

Identify an open-source Remix project that aligns with your interests.
Review the project's codebase and documentation.
Identify an area where you can contribute and propose your changes.
Submit a pull request with your proposed changes.
Collaborate with the project maintainers to refine your contributions.

Career center

Learners who complete Remix.js - The Practical Guide will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers build, maintain, and manage websites and web applications. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course can help you build a strong foundation for a career as a Web Developer. The course covers key concepts like file-based routing, nested routes, layouts, data fetching, form handling, user authentication, and deployment. These concepts are essential for building modern, interactive web applications and websites.

See salaries and explore the career path for Web Developer

Frontend Developer

Frontend Developers are responsible for the user interface and user experience of websites and web applications. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course can help you build a strong foundation for a career as a Frontend Developer. The course covers key concepts like file-based routing, nested routes, layouts, data fetching, form handling, and styling. These concepts are essential for building modern, interactive web applications and websites.

See salaries and explore the career path for Frontend Developer

Fullstack Developer

Fullstack Developers are responsible for both the frontend and backend of websites and web applications. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course can help you build a strong foundation for a career as a Fullstack Developer. The course covers key concepts like file-based routing, nested routes, layouts, data fetching, form handling, user authentication, and deployment. These concepts are essential for building modern, interactive web applications and websites.

See salaries and explore the career path for Fullstack Developer

React Developer

React Developers are responsible for building and maintaining user interfaces for websites and web applications using the React JavaScript library. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course can help you build a strong foundation for a career as a React Developer. The course covers key concepts like file-based routing, nested routes, layouts, data fetching, form handling, and user authentication. These concepts are essential for building modern, interactive web applications and websites.

See salaries and explore the career path for React Developer

Software Engineer

Software Engineers design, develop, and maintain software systems. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course can help you build a strong foundation for a career as a Software Engineer. The course covers key concepts like file-based routing, nested routes, layouts, data fetching, form handling, user authentication, and deployment. These concepts are essential for building modern, interactive web applications and websites.

See salaries and explore the career path for Software Engineer

Data Engineer

Data Engineers design, build, and maintain data pipelines and data warehouses. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Data Engineer. The course covers key concepts like data fetching, data handling, and database integration. These concepts are essential for building data pipelines and data warehouses.

See salaries and explore the career path for Data Engineer

Database Administrator

Database Administrators are responsible for the installation, maintenance, and performance of databases. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Database Administrator. The course covers key concepts like database integration, data handling, and data security. These concepts are essential for managing and maintaining databases.

See salaries and explore the career path for Database Administrator

Project Manager

Project Managers plan, execute, and close projects. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Project Manager. The course covers key concepts like project planning, resource management, and risk management. These concepts are essential for managing and completing projects.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts identify and document the needs of a business and develop solutions to meet those needs. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Business Analyst. The course covers key concepts like requirements gathering, process analysis, and solution design. These concepts are essential for identifying and documenting the needs of a business.

See salaries and explore the career path for Business Analyst

Product Manager

Product Managers are responsible for the planning, development, and launch of products. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Product Manager. The course covers key concepts like product planning, market research, and user experience design. These concepts are essential for planning and developing products.

See salaries and explore the career path for Product Manager

Technical Writer

Technical Writers create and maintain documentation for technical products and services. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Technical Writer. The course covers key concepts like documentation planning, content creation, and technical editing. These concepts are essential for creating and maintaining technical documentation.

See salaries and explore the career path for Technical Writer

UX Designer

UX Designers research, design, and evaluate the user experience of products and services. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a UX Designer. The course covers key concepts like user research, prototyping, and usability testing. These concepts are essential for researching, designing, and evaluating the user experience.

See salaries and explore the career path for UX Designer

UI Designer

UI Designers create and maintain the visual appearance of products and services. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a UI Designer. The course covers key concepts like visual design, typography, and color theory.

See salaries and explore the career path for UI Designer

Quality Assurance Analyst

Quality Assurance Analysts test and evaluate software products and services to ensure they meet quality standards. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as a Quality Assurance Analyst. The course covers key concepts like software testing, bug tracking, and quality assurance.

See salaries and explore the career path for Quality Assurance Analyst

Information Technology Support Specialist

Information Technology Support Specialists provide technical support to users of computers and software. Remix is a React framework for building fullstack web applications and websites. The course is a practical guide to building such applications and websites. Taking this course may be helpful for a career as an Information Technology Support Specialist. The course covers key concepts like troubleshooting, hardware and software support, and customer service.

See salaries and explore the career path for Information Technology Support Specialist

Remix.js - The Practical Guide

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses