fix: Create you first CRUD Step 1

Author: yoannfleurydev

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - sharp

src/assets/tutorials/create-your-first-crud/db-seed-result.png

@@ -2,7 +2,7 @@
 title: Create your first CRUD 🚧
 ---
 
-import WorkInProgress from "../../../components/WorkInProgress.astro";
+import WorkInProgress from "@/components/WorkInProgress.astro";
 import { Aside, Steps, FileTree } from "@astrojs/starlight/components";
 
 <WorkInProgress />
@@ -12,104 +12,110 @@ Make sure you followed the [Getting Started](/getting-started) before starting t
 Let's dive into creating a full new entity with database, backend and ui.<br />
 We will create a **"Project"** entity with the full CRUD (Create Read Update Delete) screens.
 
-## Step 1: Create the Project database schema
+## Step 1: Create the _Project_ model in the schema
 
 <Steps>
 
 1. Update the Prisma Database Schema
 
-    We will use [Prisma](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model) to add the project entity to our database schema.<br />
-
-    Because we are creating a new entity, we need to create a new file to store all details related to the new `Project` model.
+    We will use [Prisma](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model) to add the _Project_ model to our database schema.
 
     Update the `prisma/schema.prisma` file and add a new model called `Project` with the following fields.
 
     ```prisma filename="prisma/schema.prisma"
     model Project {
-    id          String   @id @default(cuid())
-    createdAt   DateTime @default(now())
-    updatedAt   DateTime @updatedAt
-    name        String   @unique
-    description String?
+      id          String   @id @default(cuid())
+      createdAt   DateTime @default(now())
+      updatedAt   DateTime @updatedAt
+      name        String   @unique
+      description String?
     }
     ```
 
-    Cut the running `pnpm dev{:bash}` if needed, and then run the `pnpm db:push{:bash}` command to update your database.
-
-    You can run `pnpm dev{:bash}` again.
+    Run `pnpm db:push` command to update your database.
 
 2. Create you first project
 
-    We can see what is inside of our database with the `pnpm db:ui{:bash}` command.<br />
+    We can see what is inside of our database with the `pnpm db:ui` command (accessible on <a href="http://localhost:5555" target="_blank">localhost:5555</a>)
     You should see your `Project` model and be able to create a new project like the following.
 
-    ![Step 01](/images/tutorials/new/db-ui-01.png)<br />
-    ![Step 02](/images/tutorials/new/db-ui-02.png)<br />
-    ![Step 03](/images/tutorials/new/db-ui-03.png)<br />
+    ![Prisma UI, select Project modal](@/assets/tutorials/create-your-first-crud/db-ui-1.png)
+    ![Prisma UI, select Add Record](@/assets/tutorials/create-your-first-crud/db-ui-2.png)
+    ![Prisma UI, create Record with name Start UI [web]](@/assets/tutorials/create-your-first-crud/db-ui-3.png)
 
-3. Create database seeds
+3. Create fake data using database seeds
 
-    For easy development and better Developer eXperience (DX), we will create a new seed for our new `Project` model.<br />
+    For a better Developer eXperience (DX), we will create a new seed for our new `Project` model.
     This will allow every new developer to start with some projects instead of an empty database.
 
     Create an new file `project.ts` in the `prisma/seed` folder with a `createProjects` function.
 
+    <FileTree>
+
+    - prisma
+        - seed
+            - _utils.ts
+            - index.ts
+            - **project.ts**
+            - ...
+    - src/
+    - package.json
+
+    </FileTree>
+
     ```ts filename="prisma/seed/project.ts" showLineNumbers
     export async function createProjects() {
-    // ...
+
     }
     ```
 
     Add a console.log for better DX.
 
     ```ts {2} filename="prisma/seed/project.ts" showLineNumbers
     export async function createProjects() {
-    console.log(`⏳ Seeding projects`);
-    // ...
+      console.log(`⏳ Seeding projects`);
     }
     ```
 
     Get existing projects. It will help us to make the seed idempotent.
 
     ```ts {1, 5-6} filename="prisma/seed/project.ts" showLineNumbers
-    import { prisma } from "prisma/seed/utils";
+    import { db } from '@/server/db';
 
     export async function createProjects() {
-    console.log(`⏳ Seeding projects`);
+      console.log(`⏳ Seeding projects`);
 
-    const existingProjects = await db.project.findMany();
+      const existingProjects = await db.project.findMany();
     }
     ```
 
     Create the projects with prisma.
 
-    ```ts {7-26} filename="prisma/seed/project.ts" showLineNumbers
-    import { db } from "@/server/db";
-
+    ```ts {6-25} filename="prisma/seed/project.ts" showLineNumbers
     export async function createProjects() {
-    console.log(`⏳ Seeding projects`);
-
-    const existingProjects = await db.project.findMany();
-
-    const projects = [
-        { name: "Project 1" },
-        { name: "Project 2" },
-        { name: "Project 3" },
-    ] as const;
-
-    const result = await db.project.createMany({
-        data: projects
-        .filter(
-            (project) =>
-            !existingProjects
-                .map((existingProject) => existingProject.name)
-                .includes(project.name)
-        )
-        .map(({ name }) => ({ name })),
-    });
-    console.log(
-        `✅ ${existingProjects.length} existing projects 👉 ${result.count} projects created`
-    );
+      console.log(`⏳ Seeding projects`);
+
+      const existingProjects = await db.project.findMany();
+
+      const projects = [
+          { name: 'Project 1' },
+          { name: 'Project 2' },
+          { name: 'Project 3' },
+      ] as const;
+
+      const result = await db.project.createMany({
+          data: projects
+          .filter(
+              (project) =>
+              !existingProjects
+                  .map((existingProject) => existingProject.name)
+                  .includes(project.name)
+          )
+          .map(({ name }) => ({ name })),
+      });
+      console.log(
+          `✅ ${existingProjects.length} existing projects 👉 ${result.count} projects created`
+      );
     }
     ```
 
@@ -123,31 +129,25 @@ We will create a **"Project"** entity with the full CRUD (Create Read Update Del
     import { createUsers } from "./user";
 
     async function main() {
-    await createBooks();
-    await createProjects();
-    await createUsers();
+      await createBooks();
+      await createProjects();
+      await createUsers();
     }
 
     main()
-    .catch((e) => {
+      .catch((e) => {
         console.error(e);
         process.exit(1);
-    })
-    .finally(() => {
+      })
+      .finally(() => {
         db.$disconnect();
-    });
+      });
     ```
 
-    Finally, run the seed command.
-
-    ```bash
-    pnpm db:seed
-    ```
-
-    You can check that the project is created by running the `pnpm db:ui{:bash}` command again.
-
-    ![Seed result](/images/tutorials/new/db-seed-result.png)<br />
+    Finally, run `pnpm db:seed` to populate the database.
+    Remember that you can check your database through the Prisma UI (`pnpm db:ui`).
 
+    ![Seed result](@/assets/tutorials/create-your-first-crud/db-seed-result.png)<br />
 </Steps>
 
 ---

src/assets/tutorials/create-your-first-crud/db-ui-1.png

@@ -1,3 +1,5 @@
+import type { StarlightUserConfig } from "@astrojs/starlight/types";
+
 export const socials = [
   {
     icon: "github",
@@ -9,7 +11,7 @@ export const socials = [
     label: "Discord",
     href: "https://go.bearstudio.fr/discord",
   },
-] as const;
+] satisfies StarlightUserConfig["social"];
 
 export const extraLinks = [
   {

src/assets/tutorials/create-your-first-crud/db-ui-2.png

@@ -1,6 +1,12 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],
-  "compilerOptions": {},
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["src/components/*"],
+      "@/assets/*": ["src/assets/*"]
+    }
+  },
   "exclude": ["dist"]
 }