shadcn-ui/ui codebase analysis: Tasks example explained.
Tags: javascript, opensource, react, nextjs
Published: 2024-06-14 21:07:12

In this article, we will learn about [Tasks](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks) example in shadcn-ui/ui. This article consists of the following sections:

![](https://media.licdn.com/dms/image/D4E12AQHYDefNT6XRFQ/article-inline_image-shrink_1000_1488/0/1718398649517?e=1723680000&v=beta&t=u4_70Q5-5fU01bpQm-refO6JdI2aGVXKlDv_8HhCxJg)

1.  Where is tasks folder located?
2.  What is in tasks folder?
3.  Components used in tasks example.

Where is tasks folder located?
------------------------------

Shadcn-ui/ui uses app router and [tasks folder](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks) is located in [examples](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples) folder, which is located in [(app)](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)), [a route group in Next.js](https://medium.com/@ramu.narasinga_61050/app-app-route-group-in-shadcn-ui-ui-098a5a594e0c).

![](https://media.licdn.com/dms/image/D4E12AQEsgep0F8a3-Q/article-inline_image-shrink_1500_2232/0/1718398648077?e=1723680000&v=beta&t=6GLcRPKOYFknxnZM_detLhAI411culCU7e-FP7XyF7Q)

What is in tasks folder?
------------------------

As you can see from the above image, we have components folder, data, page.tsx.

[page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/tasks/page.tsx) is loaded in place of [{children} in examples/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/layout.tsx#L55).

Below is the code picked from tasks/page.tsx

```js
import { promises as fs } from "fs"
import path from "path"
import { Metadata } from "next"
import Image from "next/image"
import { z } from "zod"

import { columns } from "./components/columns"
import { DataTable } from "./components/data-table"
import { UserNav } from "./components/user-nav"
import { taskSchema } from "./data/schema"

export const metadata: Metadata = {
  title: "Tasks",
  description: "A task and issue tracker build using Tanstack Table.",
}

// Simulate a database read for tasks.
async function getTasks() {
  const data = await fs.readFile(
    path.join(process.cwd(), "app/(app)/examples/tasks/data/tasks.json")
  )

  const tasks = JSON.parse(data.toString())

  return z.array(taskSchema).parse(tasks)
}

export default async function TaskPage() {
  const tasks = await getTasks()

  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/tasks-light.png"
          width={1280}
          height={998}
          alt="Playground"
          className="block dark:hidden"
        />
        <Image
          src="/examples/tasks-dark.png"
          width={1280}
          height={998}
          alt="Playground"
          className="hidden dark:block"
        />
      </div>
      <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
        <div className="flex items-center justify-between space-y-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
            <p className="text-muted-foreground">
              Here&apos;s a list of your tasks for this month!
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <UserNav />
          </div>
        </div>
        <DataTable data={tasks} columns={columns} />
      </div>
    </>
  )
}
```

Components used in tasks example.
---------------------------------

To find out the components used in this cards example, we can simply look at the imports used at the top of page.

```
import { columns } from "./components/columns"
import { DataTable } from "./components/data-table"
import { UserNav } from "./components/user-nav"
import { taskSchema } from "./data/schema"
```

Do not forget the [modular components](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks/components) inside cards folder.

![](https://media.licdn.com/dms/image/D4E12AQGBA9SshUsSmA/article-inline_image-shrink_1000_1488/0/1718398649435?e=1723680000&v=beta&t=89278ZYDrj0JMsjiLb1vgfTP4uSxgi-Y2bRxsbIA15w)

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://github.com/Ramu-Narasinga/build-from-scratch) _and give it a star if you like it. Sovle challenges to build shadcn-ui/ui from scratch. If you are stuck or need help?_ [_solution is available_](https://tthroo.com/build-from-scratch)_._

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards)