Name | Progress |
---|---|
Introduction | Not Read |
π° Player | Not Read |
Name | Progress |
---|---|
Software Installation | Not Read |
Project Setup | Not Read |
Running and Testing | Not Read |
React and ReactDOM | Not Read |
π‘ Assignment 1: Welcome Message | Not Attempted |
Submissions | Not Read |
Name | Progress |
---|---|
JSX and Components | Not Read |
Props | Not Read |
πΎ Exercise: Props | Not Attempted |
CSS Styles | Not Read |
useState and Hooks | Not Read |
πΎ Exercise: useState | Not Attempted |
Conditional Rendering | Not Read |
Lists | Not Read |
πΎ Exercise: Lists | Not Attempted |
Forms and Events | Not Read |
πΎ Exercise: Forms | Not Attempted |
π‘ Assignment 2: Front End | Not Attempted |
Name | Progress |
---|---|
Pure Components - memo | Not Read |
Lifecycle - useEffect | Not Read |
Expensive? - useMemo | Not Read |
DOM Interactions - useRef | Not Read |
forwardRef | Not Read |
useImperativeHandle | Not Read |
πΎ useImperativeHandle | Not Attempted |
Context | Not Read |
useCallback | Not Read |
useId | Not Read |
useReducer | Not Read |
Name | Progress |
---|---|
APIs | Not Read |
APIs - Slides | Not Attempted |
Rest APIs | Not Read |
Rest APIs - Express.js | Not Read |
ReastAPIs - Next.js | Not Read |
Securing APIs | Not Read |
Securing APIs - NextAuth | Not Read |
Name | Progress |
---|---|
tRPC | Not Read |
tRPC - Routers | Not Read |
tRPC - Server Rendering | Not Read |
tRPC - Client Rendering | Not Read |
Persisting Data | Not Read |
Assignment 3: APIs | Not Read |
With the connection string handy, we can connect to the database. Again, we have dozens of options for how to connect to manipulate databases. Since PostgreSQL is a SQL-based database, it is handy to have some SQL skills. But, since explaining SQL is out of the scope of this tutorial, we propose to use an ORM-based solution, Prisma, delivering type-safe access to your database. First, please accept the following assignment and set it up on your computer:
Prisma is a modern database toolkit that makes it easier to work with databases in your applications. It acts as a bridge between your Node.js (or TypeScript) code and your database, providing a type-safe way to interact with SQL databases. Prisma is often praised for its ease of use and for helping developers avoid common mistakes that come from writing raw SQL queries directly.
Type-Safe: Prisma generates a type-safe client based on your database schema, which means you get autocompletion and compile-time checks. Thus, when you change your database, it will notify you of all errors that change may raise in your code!
Intuitive: It simplifies data access with a straightforward query builder that's easy to understand and use.
Migrations: Prisma Migrate manages your database schema migrations in a version-controlled and collaborative way.
A Prisma schema defines your app's models and their relationships. Hereβs an example of what a Prisma schema might look like:
model User {
id Int @id @default(autoincrement())
name String
email String @unique
tasks Task[]
}
enum Status {
COMPLETED
ACTIVE
}
model Task {
id String @id @default(cuid())
title String
state Status @default(ACTIVE)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
This schema defines two models: User and Task. A user can have multiple posts, creating a one-to-many relationship between User and Post.
Here's how you might perform some basic operations with traditional SQL compared to the Prisma approach.
Traditional SQL:
INSERT INTO Task (title, userId) VALUES ('New Taks', '1');
Prisma:
await prisma.user.create({
data: {
title: 'New Task',
userId: '1'
}
});
but it also allow you to do even more readable queries doing the same thing as above
await db.user.update({
where: {
id: "1",
},
data: {
Task: {
create: {
title: "1"
}
}
}
});
Traditional SQL:
SELECT * FROM Tasks JOIN User ON Tasks.userId = Uses.id;
Prisma
await prisma.post.findMany({
include: {
author: true
}
});
Similarly, Prisma handles deletions and updates. It has an amazing support from the community and a very thorough documentation. Overall, Prisma simplifies interactions with the database by providing an abstraction layer that helps you write fewer errors, get more done with less code, and enjoy type safety.