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'
Top comments (3)
More than anything, I'm interested/excited to see how the stack communicates with each of the services and what roles they play. I've used most of them, but to see Prisma, GraphQL and React Query in action is interesting. Will be following the tutorial intently, thank you for the content!
The most boring website will be the one that has rickrolls on almost every link and mouse-click lol.
That could be an optional feature when we're done ;)