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
    • Group
    • Blog
    • Author
  • Community
    • Discord
    • Telegram
  • Open Source
    • Point0
    • Route0
    • Error0
    • Flat
    • Agents Party
  • 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 😎
You have unsaved changes

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

The goal is to build a project from scratch by learning and applying the technologies and architecture that give your code quality and scalability, fast development, and genuine enjoyment of the process.

Relevance

The course was made over 2023–2024, and the versions of the libraries it uses are out of date by now. The approaches themselves will hold for years yet — the course is still a good guide to the principles of fullstack development.

Meanwhile I am working on a new fullstack course that starts roughly where this one ends. Its lessons come with a boilerplate that already has the whole project configured, and the task is to build a SaaS product of your own: An anti-course on building a SaaS with TypeScript, React, Bun, Point0.

Tech stack

React, TypeScript, Vite, Node.js, pnpm, Express, tRPC, PostgreSQL, Prisma, Formik, Zod, Jest, Prettier, ESLint, Stylelint, SCSS, Husky, Passport, React Router, Cloudinary, AWS S3, MJML, Brevo, CRON, Winston, Balsamiq, Sentry, Mixpanel, Cloudflare, Docker, DataDog, Heroku.

Who this course is for

Those who can tell null from an object

I'll teach you a huge number of technologies and how to wire them together. But you need to already know at least something about programming and markup, because I won't spell out the basics — I teach the advanced parts.

Those who want to enjoy the process of development

The stack and architecture I offer are a real pleasure to work with. Your code will be clear, concise, and easy to maintain. You'll enjoy building your product.

Those who want to build products end to end

Many developers end up joining products that someone else started long ago and sloppily, and are forced to adapt to an existing, awkward architecture and stack. You, instead, want to build products entirely on your own, from start to finish.

Project source code

All the code of the educational project is available on GitHub. Get access, download it, and use it as the foundation for building your own project.

github.com/1gr14/fullstack2023

Sign in to read this lesson

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

141 lessons

  1. 1How the course works
  2. 2Creating a graphical prototype
  3. 3Building and estimating the project backlog
  4. 4Installing the development software
  5. 5VSCode masterclass
  6. 6Creating a React app with Vite
  7. 7Getting to know Git and GitHub
  8. 8HTML tags
  9. 9React and JavaScript
  10. 10Automatic code formatting with Prettier
  11. 11Creating a Node.js app in TypeScript
  12. 12Creating an Express app
  13. 13Creating an endpoint that returns JSON
  14. 14Adding tRPC to the backend
  15. 15Adding tRPC to the frontend
  16. 16Type checking
  17. 17Creating scripts for the monorepo
  18. 18Standardizing TypeScript code style with ESLint
  19. 19Running Prettier, ESLint, and type checking automatically on commit
  20. 20Standardizing the style of Git commit messages
  21. 21Adding React Router
  22. 22Improving React Router's typing
  23. 23Getting to know Lodash, generating fake content
  24. 24Getting to know Zod, creating a tRPC procedure with input parameters
  25. 25Creating a Layout component shared across all pages
  26. 26Adding CSS styles using SCSS
  27. 27Creating another web app page
  28. 28Creating reusable components
  29. 29Standardizing SCSS file style with Stylelint
  30. 30Checking SCSS file validity
  31. 31Form: the basics
  32. 32Form: input components
  33. 33Form: Formik
  34. 34Form: validation
  35. 35Form: caring about UX
  36. 36Form: Zod validation
  37. 37Splitting the tRPC backend into separate files
  38. 38Automatically generating an index file
  39. 39Adding a tRPC mutation
  40. 40Reusing the backend validation logic on the frontend
  41. 41Restricting imports of backend code into the frontend
  42. 42Form: loading
  43. 43Form: success
  44. 44Form: error
  45. 45Styles: Input
  46. 46Styles: Textarea
  47. 47Components: Alert
  48. 48Components: Button
  49. 49Components: FormItems
  50. 50Spinning up a PostgreSQL database
  51. 51Prisma: connecting to the database (DB)
  52. 52Passing the Prisma client into the tRPC context
  53. 53Prisma: searching database records with the Prisma client
  54. 54Prisma: creating database records
  55. 55Prisma: adding new fields to an existing table
  56. 56Using superjson to receive dates from the backend
  57. 57Auth: user model + sign-up endpoint
  58. 58Using a tool for manually calling tRPC endpoints
  59. 59PostgreSQL: a GUI for working with the database
  60. 60Auth: sign-up page
  61. 61Auth: sign-in endpoint
  62. 62Auth: sign-in page
  63. 63Authentication proper
  64. 64Environment Variables: backend
  65. 65Environment Variables: webapp
  66. 66Auth: salt
  67. 67Auth: token validation
  68. 68Prisma: related entities
  69. 69CRUD: Editing entities
  70. 70Form: creating your own wrapper
  71. 71Creating the client app context
  72. 72Creating a wrapper for repeated web app page logic
  73. 73Improving the page wrapper's typing
  74. 74Adding a 404 page
  75. 75Organizing files into folders as the codebase grows
  76. 76Editing the user profile
  77. 77Another improvement to the page wrapper's typing
  78. 78Changing the password
  79. 79Infinite data loading on button click
  80. 80Infinite data loading on scroll
  81. 81Making loading look nice
  82. 82More complex entity relations in the database, optimistic responses on the client
  83. 83Database search functionality, automatic form submission
  84. 84User permissions
  85. 85Setting the HTML title on web app pages
  86. 86Adding a favicon
  87. 87Adding icons
  88. 88Adding loaded images
  89. 89Adding inline images
  90. 90Prisma: custom migrations
  91. 91Email: creating templates with MJML
  92. 92Email: creating and adding functions where sending is needed
  93. 93Email: processing templates with Handlebars
  94. 94Registering a domain
  95. 95Email: Connecting the domain to Brevo
  96. 96Email: actually sending emails with Brevo
  97. 97Creating optional env variables
  98. 98Importing frontend routes into the backend
  99. 99Building a wrapper for creating routes
  100. 100Extracting shared env variables for the frontend and backend
  101. 101CRON: running scheduled tasks
  102. 102PostgreSQL: writing complex queries
  103. 103MJML + Handlebars: loops and other helpers
  104. 104Monorepo: shared workspace
  105. 105State management for the web app
  106. 106Logging: adding a logger
  107. 107Logging: standardizing input parameters + serializing errors
  108. 108Logging: pretty log output during development
  109. 109Logging: tRPC backend
  110. 110Logging: Prisma
  111. 111Logging: filtering logs
  112. 112Logging: sensitive data
  113. 113Logging: Express
  114. 114Logging: tRPC client
  115. 115Sentry: catching web app errors
  116. 116Creating a new error type, ExpectedError
  117. 117Sentry: web app source maps
  118. 118Sentry: catching backend errors
  119. 119Sentry: backend source maps
  120. 120Tests: unit tests
  121. 121Tests: integration tests
  122. 122Tests: forbidding imports of tests into the main code
  123. 123Tests: environment variables
  124. 124Tests: mocking modules
  125. 125Improving the typing of the pick & omit functions
  126. 126Uploading an image to Cloudinary
  127. 127Uploading multiple images to Cloudinary
  128. 128Uploading a file to AWS S3
  129. 129Uploading multiple files to AWS S3
  130. 130Standardizing shared env variables for the frontend and backend
  131. 131Product analytics with Mixpanel
  132. 132Serving the web app through the backend
  133. 133Getting the frontend's environment variables from the backend
  134. 134DevOps: Creating a Dockerfile, building the image, running the container
  135. 135DevOps: Deploying to Heroku
  136. 136DevOps: Automatic deployment to Heroku with GitHub Actions
  137. 137Sending logs to Datadog
  138. 138Analyzing the frontend bundle
  139. 139Supporting old browsers
  140. 140Automatically adding CSS prefixes
  141. 141The end

Extra

Community

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

Social

Videos and posts from around the web
YouTubeTwitter

Private group

A paid community with mentorship, where everyone builds their own IT product
About the group

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.