In this lecture, Harkirat covers adding new pages to apps/web, exploring turbo.json and caching in Turborepo, integrating a Node.js app, and creating a shared common module for frontend and backend apps within the monorepo.

Exploring apps/web

Sure, let's explore the apps/web directory and understand how it utilizes components from the packages/ui module.

1] Dependencies

As mentioned, apps/web is a simple Next.js application. However, it leverages UI components from the packages/ui module, which is a shared UI library within the monorepo.

2] Exploring package.json

In the package.json file of the apps/web directory, you'll notice that @repo/ui is listed as a dependency:

{
  "dependencies": {
    "@repo/ui": "*",
    "next": "^14.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

The "@repo/ui": "workspace:*" entry indicates that the apps/web application depends on the packages/ui package within the same monorepo workspace. This allows the apps/web application to import and use the UI components defined in the packages/ui module.

3] Exploring page.tsx

The page.tsx file is a Next.js page component that demonstrates the usage of the Button component from the packages/ui module.

Here's an example of how the Button component might be imported and used in the page.tsx file: