1gr14/igrich/
  • Fullstack web development on TypeScript, Reaсt, Node.js (2023)
    • How the course works
    • Creating a graphical prototype
    • Building and estimating the project backlog
    • Installing the development software
    • VSCode masterclass
    • Creating a React app with Vite
    • Getting to know Git and GitHub
    • HTML tags
    • React and JavaScript
    • Automatic code formatting with Prettier
    • Creating a Node.js app in TypeScript
    • Creating an Express app
    • Creating an endpoint that returns JSON
    • Adding tRPC to the backend
    • Adding tRPC to the frontend
    • Type checking
    • Creating scripts for the monorepo
    • Standardizing TypeScript code style with ESLint
    • Running Prettier, ESLint, and type checking automatically on commit
    • Standardizing the style of Git commit messages
    • Adding React Router
    • Improving React Router's typing
    • Getting to know Lodash, generating fake content
    • Getting to know Zod, creating a tRPC procedure with input parameters
    • Creating a Layout component shared across all pages
    • Adding CSS styles using SCSS
    • Creating another web app page
    • Creating reusable components
    • Standardizing SCSS file style with Stylelint
    • Checking SCSS file validity
    • Form: the basics
    • Form: input components
    • Form: Formik
    • Form: validation
    • Form: caring about UX
    • Form: Zod validation
    • Splitting the tRPC backend into separate files
    • Automatically generating an index file
    • Adding a tRPC mutation
    • Reusing the backend validation logic on the frontend
    • Restricting imports of backend code into the frontend
    • Form: loading
    • Form: success
    • Form: error
    • Styles: Input
    • Styles: Textarea
    • Components: Alert
    • Components: Button
    • Components: FormItems
    • Spinning up a PostgreSQL database
    • Prisma: connecting to the database (DB)
    • Passing the Prisma client into the tRPC context
    • Prisma: searching database records with the Prisma client
    • Prisma: creating database records
    • Prisma: adding new fields to an existing table
    • Using superjson to receive dates from the backend
    • Auth: user model + sign-up endpoint
    • Using a tool for manually calling tRPC endpoints
    • PostgreSQL: a GUI for working with the database
    • Auth: sign-up page
    • Auth: sign-in endpoint
    • Auth: sign-in page
    • Authentication proper
    • Environment Variables: backend
    • Environment Variables: webapp
    • Auth: salt
    • Auth: token validation
    • Prisma: related entities
    • CRUD: Editing entities
    • Form: creating your own wrapper
    • Creating the client app context
    • Creating a wrapper for repeated web app page logic
    • Improving the page wrapper's typing
    • Adding a 404 page
    • Organizing files into folders as the codebase grows
    • Editing the user profile
    • Another improvement to the page wrapper's typing
    • Changing the password
    • Infinite data loading on button click
    • Infinite data loading on scroll
    • Making loading look nice
    • More complex entity relations in the database, optimistic responses on the client
    • Database search functionality, automatic form submission
    • User permissions
    • Setting the HTML title on web app pages
    • Adding a favicon
    • Adding icons
    • Adding loaded images
    • Adding inline images
    • Prisma: custom migrations
    • Email: creating templates with MJML
    • Email: creating and adding functions where sending is needed
    • Email: processing templates with Handlebars
    • Registering a domain
    • Email: Connecting the domain to Brevo
    • Email: actually sending emails with Brevo
    • Creating optional env variables
    • Importing frontend routes into the backend
    • Building a wrapper for creating routes
    • Extracting shared env variables for the frontend and backend
    • CRON: running scheduled tasks
    • PostgreSQL: writing complex queries
    • MJML + Handlebars: loops and other helpers
    • Monorepo: shared workspace
    • State management for the web app
    • Logging: adding a logger
    • Logging: standardizing input parameters + serializing errors
    • Logging: pretty log output during development
    • Logging: tRPC backend
    • Logging: Prisma
    • Logging: filtering logs
    • Logging: sensitive data
    • Logging: Express
    • Logging: tRPC client
    • Sentry: catching web app errors
    • Creating a new error type, ExpectedError
    • Sentry: web app source maps
    • Sentry: catching backend errors
    • Sentry: backend source maps
    • Tests: unit tests
    • Tests: integration tests
    • Tests: forbidding imports of tests into the main code
    • Tests: environment variables
    • Tests: mocking modules
    • Improving the typing of the pick & omit functions
    • Uploading an image to Cloudinary
    • Uploading multiple images to Cloudinary
    • Uploading a file to AWS S3
    • Uploading multiple files to AWS S3
    • Standardizing shared env variables for the frontend and backend
    • Product analytics with Mixpanel
    • Serving the web app through the backend
    • Getting the frontend's environment variables from the backend
    • DevOps: Creating a Dockerfile, building the image, running the container
    • DevOps: Deploying to Heroku
    • DevOps: Automatic deployment to Heroku with GitHub Actions
    • Sending logs to Datadog
    • Analyzing the frontend bundle
    • Supporting old browsers
    • Automatically adding CSS prefixes
    • The end
  • Menu
    • Home
    • Start0
    • Support
    • Education
    • Blog
    • Author
  • Community
    • Discord
    • Telegram
  • Open Source
    • Point0
    • Route0
    • Error0
    • Flat
  • Account
    • Sign In
    • Sign Up
1gr14/igrich/
Building open-source software for the glory of the Lord Jesus Christ ☦️
With love for developers of all backgrounds around the world ❤️
Terms of ServicePrivacy PolicySergei Dmitriev 2026 😎

Adding React Router

Fullstack web development on TypeScript, Reaсt, Node.js (2023)

Sign in to read this lesson

This course is open to anyone with an account. It is free.

Extra

Community

Questions and chat — English on Discord, Russian on Telegram
DiscordTelegram

Social

Videos and posts from around the web
YouTubeTwitter

Start0

The SaaS boilerplate on Point0 — the fastest way to start your own product
Explore Start0

Comments

to leave a comment
No comments yet. Be the first.
PreviousStandardizing the style of Git commit messagesNextImproving React Router's typing