How do you build a fullstack app from scratch? I see this question here all the time.
The answer is something like:
- next.js
- python
- sagemaker
- tailwindcss
- C++
- typescript
- java
- sql
Makes 0 sense.
Here's a guide on building a fullstack JavaScript app in 15 mins 🧵
The answer is something like:
- next.js
- python
- sagemaker
- tailwindcss
- C++
- typescript
- java
- sql
Makes 0 sense.
Here's a guide on building a fullstack JavaScript app in 15 mins 🧵
We're going to use Remix for this project.
Get started with:
❯ npx create-remix@latest
This will set up a directory with code and run npm install for you.
Start the site to see it:
❯ npm run dev
Get started with:
❯ npx create-remix@latest
This will set up a directory with code and run npm install for you.
Start the site to see it:
❯ npm run dev
Idea: We're going to track our water and coffee drunk in a database.
Set up Prisma so we can talk to the db. Prisma is a database client for TypeScript and Node.
I install it, then add a new model. Now I can push my new table to SQLite. We can switch to something else later.
Set up Prisma so we can talk to the db. Prisma is a database client for TypeScript and Node.
I install it, then add a new model. Now I can push my new table to SQLite. We can switch to something else later.
Before we can access our database from code, we also need to create a file that helps us make a connection to Prisma.
Add a file named app/lib/db.server.ts.
The .server.ts part of the filename is pretty cool. It ensures that Remix will never bundle it and send it to clients.
Add a file named app/lib/db.server.ts.
The .server.ts part of the filename is pretty cool. It ensures that Remix will never bundle it and send it to clients.
Another note here about Prisma. It comes with an inbuilt visual data browser for you to look at your database.
Try it out:
❯ npx prisma studio
I used the studio to manually add a few records of the liquids I've drunk today. 1 x ☕️, 2 x 💧
Try it out:
❯ npx prisma studio
I used the studio to manually add a few records of the liquids I've drunk today. 1 x ☕️, 2 x 💧
Now we are finally going to connect our app to the database! Drumroll 🥁 please.
Open up app/routes/index.tsx that the Remix create made for you and delete everything in it. Let's replace it with this instead.
Reload your site and behold, your beverage consumption ala Wordle.
Open up app/routes/index.tsx that the Remix create made for you and delete everything in it. Let's replace it with this instead.
Reload your site and behold, your beverage consumption ala Wordle.
We need to enter data into the database somehow, so next let's work on a form to submit what we are currently drinking.
Forms in Remix are super simple. No need to build an API or anything.
First we create a form, and then we create the form handler.
Forms in Remix are super simple. No need to build an API or anything.
First we create a form, and then we create the form handler.
Let's try it out! And there we go. 🎇💥
Okay Twitter video upload is broken so I have to do a screenshot. I promise it works.
Okay Twitter video upload is broken so I have to do a screenshot. I promise it works.
Twitter issue is killing me 😂 I'll convert this tutorial to a detailed post with code samples on my blog soon, along with how to deploy it to production. If that is something you're interested in, follow me and I'll post about it when it's ready.
Stay hydrated, my friends! 🌊
Stay hydrated, my friends! 🌊
I haven't written the article yet but here's the code if that's helpful to someone. github.com/needcaffeine/f…
• • •
Missing some Tweet in this thread? You can try to
force a refresh
