Making the most boring website ever with TypeScript, NestJs, React and others. Part 1.

What is this

So I'm making a series of videos on how to build a very basic website for a local business. In my case it's a website for a barbershop with an admin panel and a reservation booking form. And today I released the first part.

This video is a bit different from others, since it's not really a follow along tutorial with explanations for every single line. My goal was more to show how different technologies work together. And I only tried to explain stuff that I find interesting or things that are not usually in the docs or not that easy to google.

The other reason for that is I'm myself is getting a bit tired of those 4000hrs videos of people making typos. So the main goal of this video was to be slightly more fun, even if it was at the cost of being less informative.

Anyway, you can find the video here:

I hope some of you will enjoy it.

Stack

For people that are interested in particular technologies/libraries, here is the tech stack i used so far:

• Typescript
• NodeJs
• NestJs
• Prisma
• PostgreSQL
• React
• Styled-components.
• React-query
• Formik

Promo tips

A couple of tips from the video with a hope of making you curious enough to watch it.

Debugging NestJs app in VS Code

If you try to debug a NestJs app in VS Code just by pressing the Debug button (or F5), you might run into some issues, since it may conflict with how the app is supposed to be built.

There is much easier way. You just need to set the Auto Attach option to Smart (you can do this with the Command Palette), and then run the app with yarn start:debug (npm run start:debug). And that's it, when the application starts, the magic of VS Code will show itself and debugger will run and attach itself to the process.

Thunder Client

If you're a bit tired of how bloated Postman may feel sometimes, there is a VS Code extension called Thunder Client. It supports pretty much all you need for testing your APIs.

Readable class names with styled-components

By default the class names generated by styled-components are gibberish like .frh743-Wrapper. If you want them to be more meaningful, you can update your babel configuration according to the docs.
The problem is, you can't really do this if you use something like create-react-app. Luckily, there is another solution. You just import the library a bit different and it should work.

import styled from 'styled-components/macro'