diff --git a/README.md b/README.md
index ee074eff..bcd8e3a8 100644
--- a/README.md
+++ b/README.md
@@ -1,43 +1,5934 @@
-# Quick Setup Locally
+# daily-code Documentation
-## Option 1: Using Docker
+## Overview
+
+This documentation covers 150 files from the daily-code codebase.
+
+## Table of Contents
+
+### Root
+
+- [.eslintrc.js](#-eslintrc-js)
+
+### apps/web
+
+- [.eslintrc.js](#apps-web--eslintrc-js)
+- [next-env.d.ts](#apps-web-next-env-d-ts)
+- [next.config.js](#apps-web-next-config-js)
+- [postcss.config.js](#apps-web-postcss-config-js)
+- [tailwind.config.js](#apps-web-tailwind-config-js)
+
+### apps/web/app
+
+- [globals.css](#apps-web-app-globals-css)
+- [layout.tsx](#apps-web-app-layout-tsx)
+- [page.module.css](#apps-web-app-page-module-css)
+- [page.tsx](#apps-web-app-page-tsx)
+
+### apps/web/app/(marketing)
+
+- [layout.tsx](#apps-web-app-(marketing)-layout-tsx)
+
+### apps/web/app/(marketing)/(policy)/privacy-policy
+
+- [page.tsx](#apps-web-app-(marketing)-(policy)-privacy-policy-page-tsx)
+
+### apps/web/app/(marketing)/tnc
+
+- [page.tsx](#apps-web-app-(marketing)-tnc-page-tsx)
+
+### apps/web/app/admin
+
+- [layout.tsx](#apps-web-app-admin-layout-tsx)
+- [page.tsx](#apps-web-app-admin-page-tsx)
+
+### apps/web/app/api/AddTracks
+
+- [route.ts](#apps-web-app-api-addtracks-route-ts)
+
+### apps/web/app/api/auth/[...nextauth]
+
+- [route.ts](#apps-web-app-api-auth-[---nextauth]-route-ts)
+
+### apps/web/app/api/revalidate
+
+- [route.ts](#apps-web-app-api-revalidate-route-ts)
+
+### apps/web/app/auth
+
+- [page.tsx](#apps-web-app-auth-page-tsx)
+
+### apps/web/app/canva-track/[...trackIds]
+
+- [page.tsx](#apps-web-app-canva-track-[---trackids]-page-tsx)
+
+### apps/web/app/pdf/[...pdfId]
+
+- [page.tsx](#apps-web-app-pdf-[---pdfid]-page-tsx)
+
+### apps/web/app/profile
+
+- [layout.tsx](#apps-web-app-profile-layout-tsx)
+- [page.tsx](#apps-web-app-profile-page-tsx)
+
+### apps/web/app/tracks/[...trackIds]
+
+- [page.tsx](#apps-web-app-tracks-[---trackids]-page-tsx)
+
+### apps/web/components
+
+- [Appbar.tsx](#apps-web-components-appbar-tsx)
+- [AppbarClient.tsx](#apps-web-components-appbarclient-tsx)
+- [Blog.tsx](#apps-web-components-blog-tsx)
+- [BlogAppbar.tsx](#apps-web-components-blogappbar-tsx)
+- [Categories.tsx](#apps-web-components-categories-tsx)
+- [CodeBlock.tsx](#apps-web-components-codeblock-tsx)
+- [ContentSearch.tsx](#apps-web-components-contentsearch-tsx)
+- [CustomPagination.tsx](#apps-web-components-custompagination-tsx)
+- [EditProblem.tsx](#apps-web-components-editproblem-tsx)
+- [ErrorBoundary.tsx](#apps-web-components-errorboundary-tsx)
+- [Hero.tsx](#apps-web-components-hero-tsx)
+- [LessonView.tsx](#apps-web-components-lessonview-tsx)
+- [Loader.tsx](#apps-web-components-loader-tsx)
+- [ModeToggle.tsx](#apps-web-components-modetoggle-tsx)
+- [MultipleOptionChip.tsx](#apps-web-components-multipleoptionchip-tsx)
+- [NotionRenderer.tsx](#apps-web-components-notionrenderer-tsx)
+- [PageToggle.tsx](#apps-web-components-pagetoggle-tsx)
+- [Print.tsx](#apps-web-components-print-tsx)
+- [ProfileChildren.tsx](#apps-web-components-profilechildren-tsx)
+- [ProfileSidebar.tsx](#apps-web-components-profilesidebar-tsx)
+- [Providers.tsx](#apps-web-components-providers-tsx)
+- [RedirectToLastSolved.tsx](#apps-web-components-redirecttolastsolved-tsx)
+- [RedirectToLoginCard.tsx](#apps-web-components-redirecttologincard-tsx)
+- [ScrollToTopWrapper.tsx](#apps-web-components-scrolltotopwrapper-tsx)
+- [SearchDialog.tsx](#apps-web-components-searchdialog-tsx)
+- [Signin.tsx](#apps-web-components-signin-tsx)
+- [TrackCard-2.tsx](#apps-web-components-trackcard-2-tsx)
+- [TrackList.tsx](#apps-web-components-tracklist-tsx)
+- [TrackPreview.tsx](#apps-web-components-trackpreview-tsx)
+- [TrackTools.tsx](#apps-web-components-tracktools-tsx)
+- [Tracks.tsx](#apps-web-components-tracks-tsx)
+- [UserAccountDropDown.tsx](#apps-web-components-useraccountdropdown-tsx)
+- [UserDetailForm.tsx](#apps-web-components-userdetailform-tsx)
+- [UserImage.tsx](#apps-web-components-userimage-tsx)
+- [card.tsx](#apps-web-components-card-tsx)
+- [use-follow-pointer.ts](#apps-web-components-use-follow-pointer-ts)
+- [utils.tsx](#apps-web-components-utils-tsx)
+
+### apps/web/components/admin
+
+- [AddProblemCard.tsx](#apps-web-components-admin-addproblemcard-tsx)
+- [AddTrackCard.tsx](#apps-web-components-admin-addtrackcard-tsx)
+- [AdminAddMCQ.tsx](#apps-web-components-admin-adminaddmcq-tsx)
+- [AdminMCQ.tsx](#apps-web-components-admin-adminmcq-tsx)
+- [AdminSearch.tsx](#apps-web-components-admin-adminsearch-tsx)
+- [CompleteAddTracks.tsx](#apps-web-components-admin-completeaddtracks-tsx)
+- [CompleteTrackCard.tsx](#apps-web-components-admin-completetrackcard-tsx)
+- [EditCategories.tsx](#apps-web-components-admin-editcategories-tsx)
+- [EditTrackCard.tsx](#apps-web-components-admin-edittrackcard-tsx)
+- [LinkCard.tsx](#apps-web-components-admin-linkcard-tsx)
+- [LinkProblems.tsx](#apps-web-components-admin-linkproblems-tsx)
+- [ProblemCard.tsx](#apps-web-components-admin-problemcard-tsx)
+- [ProblemEditor.tsx](#apps-web-components-admin-problemeditor-tsx)
+- [TracksEditor.tsx](#apps-web-components-admin-trackseditor-tsx)
+
+### apps/web/components/mcq
+
+- [EditMCQ.tsx](#apps-web-components-mcq-editmcq-tsx)
+- [MCQCard.tsx](#apps-web-components-mcq-mcqcard-tsx)
+- [MCQPanel.tsx](#apps-web-components-mcq-mcqpanel-tsx)
+- [MCQQuestion.tsx](#apps-web-components-mcq-mcqquestion-tsx)
+- [MCQRenderer.tsx](#apps-web-components-mcq-mcqrenderer-tsx)
+- [SubmissionMCQ.tsx](#apps-web-components-mcq-submissionmcq-tsx)
+
+### apps/web/components/privacy-policy
+
+- [privacy-policy.ts](#apps-web-components-privacy-policy-privacy-policy-ts)
+
+### apps/web/components/profile
+
+- [ProfileOptions.tsx](#apps-web-components-profile-profileoptions-tsx)
+
+### apps/web/components/tnc
+
+- [tnc-content.ts](#apps-web-components-tnc-tnc-content-ts)
+
+### apps/web/hooks
+
+- [useMountStatus.ts](#apps-web-hooks-usemountstatus-ts)
+
+### apps/web/lib
+
+- [auth.ts](#apps-web-lib-auth-ts)
+- [search.ts](#apps-web-lib-search-ts)
+- [utils.ts](#apps-web-lib-utils-ts)
+
+### apps/web/lib/cache
+
+- [cache.ts](#apps-web-lib-cache-cache-ts)
+- [in-memory-cache.ts](#apps-web-lib-cache-in-memory-cache-ts)
+- [redis-cache.ts](#apps-web-lib-cache-redis-cache-ts)
+
+### apps/web/screens
+
+- [Admin.tsx](#apps-web-screens-admin-tsx)
+- [Landing.tsx](#apps-web-screens-landing-tsx)
+- [footer-cta.tsx](#apps-web-screens-footer-cta-tsx)
+- [footer.tsx](#apps-web-screens-footer-tsx)
+
+### packages/db
+
+- [Cache.ts](#packages-db-cache-ts)
+- [setupDB.sh](#packages-db-setupdb-sh)
+
+### packages/db/prisma
+
+- [seed.ts](#packages-db-prisma-seed-ts)
+
+### packages/db/prisma/migrations/20240402204828_init
+
+- [migration.sql](#packages-db-prisma-migrations-20240402204828_init-migration-sql)
+
+### packages/db/prisma/migrations/20240403204246_added_mcq
+
+- [migration.sql](#packages-db-prisma-migrations-20240403204246_added_mcq-migration-sql)
+
+### packages/db/prisma/migrations/20240404031649_nextauth
+
+- [migration.sql](#packages-db-prisma-migrations-20240404031649_nextauth-migration-sql)
+
+### packages/db/prisma/migrations/20240407230643_adds
+
+- [migration.sql](#packages-db-prisma-migrations-20240407230643_adds-migration-sql)
+
+### packages/db/prisma/migrations/20240408080322_added_categories
+
+- [migration.sql](#packages-db-prisma-migrations-20240408080322_added_categories-migration-sql)
+
+### packages/db/prisma/migrations/20240411143941_added_admin
+
+- [migration.sql](#packages-db-prisma-migrations-20240411143941_added_admin-migration-sql)
+
+### packages/db/prisma/migrations/20240412144918_
+
+- [migration.sql](#packages-db-prisma-migrations-20240412144918_-migration-sql)
+
+### packages/db/prisma/migrations/20240412224746_code_exec
+
+- [migration.sql](#packages-db-prisma-migrations-20240412224746_code_exec-migration-sql)
+
+### packages/db/prisma/migrations/20240416173507_added_search
+
+- [migration.sql](#packages-db-prisma-migrations-20240416173507_added_search-migration-sql)
+
+### packages/db/prisma/migrations/20240427131506_add_index
+
+- [migration.sql](#packages-db-prisma-migrations-20240427131506_add_index-migration-sql)
+
+### packages/db/prisma/migrations/20240430194543_added_mcq_submission
+
+- [migration.sql](#packages-db-prisma-migrations-20240430194543_added_mcq_submission-migration-sql)
+
+### packages/db/prisma/migrations/20240803144221_added_cohort
+
+- [migration.sql](#packages-db-prisma-migrations-20240803144221_added_cohort-migration-sql)
+
+### packages/db/prisma/migrations/20240809135031_removed_code
+
+- [migration.sql](#packages-db-prisma-migrations-20240809135031_removed_code-migration-sql)
+
+### packages/db/prisma/migrations/20241101231656_add_canva
+
+- [migration.sql](#packages-db-prisma-migrations-20241101231656_add_canva-migration-sql)
+
+### packages/db/src
+
+- [index.ts](#packages-db-src-index-ts)
+
+### packages/eslint-config
+
+- [library.js](#packages-eslint-config-library-js)
+- [next.js](#packages-eslint-config-next-js)
+- [react-internal.js](#packages-eslint-config-react-internal-js)
+
+### packages/store/src
+
+- [index.ts](#packages-store-src-index-ts)
+
+### packages/store/src/atoms
+
+- [filter.ts](#packages-store-src-atoms-filter-ts)
+- [index.ts](#packages-store-src-atoms-index-ts)
+- [profileSidebar.ts](#packages-store-src-atoms-profilesidebar-ts)
+- [quiz.ts](#packages-store-src-atoms-quiz-ts)
+- [view.ts](#packages-store-src-atoms-view-ts)
+
+### packages/ui
+
+- [.eslintrc.js](#packages-ui--eslintrc-js)
+- [tailwind.config.js](#packages-ui-tailwind-config-js)
+
+### packages/ui/src
+
+- [index.ts](#packages-ui-src-index-ts)
+
+### packages/ui/src/lib
+
+- [utils.ts](#packages-ui-src-lib-utils-ts)
+
+### packages/ui/src/shad/ui
+
+- [badge.tsx](#packages-ui-src-shad-ui-badge-tsx)
+- [button.tsx](#packages-ui-src-shad-ui-button-tsx)
+- [card.tsx](#packages-ui-src-shad-ui-card-tsx)
+- [checkbox.tsx](#packages-ui-src-shad-ui-checkbox-tsx)
+- [dailog.tsx](#packages-ui-src-shad-ui-dailog-tsx)
+- [dropdown-menu.tsx](#packages-ui-src-shad-ui-dropdown-menu-tsx)
+- [input.tsx](#packages-ui-src-shad-ui-input-tsx)
+- [label.tsx](#packages-ui-src-shad-ui-label-tsx)
+- [pagination.tsx](#packages-ui-src-shad-ui-pagination-tsx)
+- [resizable.tsx](#packages-ui-src-shad-ui-resizable-tsx)
+- [scroll-area.tsx](#packages-ui-src-shad-ui-scroll-area-tsx)
+- [select.tsx](#packages-ui-src-shad-ui-select-tsx)
+- [separator.tsx](#packages-ui-src-shad-ui-separator-tsx)
+- [sheet.tsx](#packages-ui-src-shad-ui-sheet-tsx)
+- [skeleton.tsx](#packages-ui-src-shad-ui-skeleton-tsx)
+- [spotlight.tsx](#packages-ui-src-shad-ui-spotlight-tsx)
+- [switch.tsx](#packages-ui-src-shad-ui-switch-tsx)
+- [table.tsx](#packages-ui-src-shad-ui-table-tsx)
+- [tabs.tsx](#packages-ui-src-shad-ui-tabs-tsx)
+- [textarea.tsx](#packages-ui-src-shad-ui-textarea-tsx)
+- [toast.tsx](#packages-ui-src-shad-ui-toast-tsx)
+- [toaster.tsx](#packages-ui-src-shad-ui-toaster-tsx)
+- [tooltip.tsx](#packages-ui-src-shad-ui-tooltip-tsx)
+- [use-toast.tsx](#packages-ui-src-shad-ui-use-toast-tsx)
+
+## File Documentation
+
+### Root
+
+
+
+#### .eslintrc.js
+
+*Path: .eslintrc.js*
+
+1. **Purpose:** This file defines the ESLint configuration for the root of the repository, specifically targeting the package manager's execution context. It sets up linting rules and configurations that apply only to files within the root, excluding subdirectories like "apps" and "packages."
+
+2. **Key Functionality:**
+
+- **`ignorePatterns: ["apps/**", "packages/**"]`**: This configuration instructs ESLint to ignore all files and subdirectories within the "apps" and "packages" directories. This is crucial for applying different linting rules to different parts of the project, allowing for more specific configurations within those subdirectories.
+
+- **`extends: ["@repo/eslint-config/library.js"]`**: This line extends the base ESLint configuration defined in the "@repo/eslint-config/library.js" file. This promotes consistency across the project by inheriting a shared set of rules and configurations. This indicates a dependency on an internal package or shared configuration file.
+
+- **`parser: "@typescript-eslint/parser"`**: Specifies the parser to be used by ESLint. "@typescript-eslint/parser" allows ESLint to understand TypeScript syntax. This implies the project uses TypeScript.
+
+- **`parserOptions: { project: true }`**: This option tells the TypeScript parser to look for a `tsconfig.json` file in the current directory or any parent directory. This allows ESLint to leverage TypeScript's type checking capabilities for more accurate linting.
+
+- **`rules: { ... }`**: This object allows overriding or extending specific rules inherited from the extended configuration.
+
+ - **`"no-unused-vars": "off"`**: Disables the rule that warns about unused variables. This might be necessary due to specific coding patterns or tooling used in the root directory.
+
+ - **`"no-redeclare": "off"`**: Disables the rule that prevents variable redeclaration. Similar to the above, this might be disabled for specific reasons within the root's context.
+
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:** This file implicitly depends on ESLint and the "@typescript-eslint/parser" package. It also depends on an internal ESLint configuration file located at "@repo/eslint-config/library.js".
+- **Code Relationships:** This file serves as the base ESLint configuration for the root of the repository. It's likely that other ESLint configuration files within "apps" and "packages" will extend or modify this base configuration, creating a hierarchical structure of linting rules.
+
+4. **Usage Example:** N/A (Configuration file, not directly executed)
+
+5. **Technical Notes:**
+
+- The decision to ignore "apps" and "packages" suggests a multi-package or monorepo structure where different parts of the project have distinct linting needs.
+- Disabling "no-unused-vars" and "no-redeclare" at the root level might indicate a need for more granular control over these rules within subdirectories. It's important to understand the rationale behind disabling these rules to avoid potential code quality issues.
+- The use of a shared ESLint configuration ("@repo/eslint-config/library.js") promotes consistency and maintainability across the project. This shared configuration likely contains the core linting rules for the project.
+
+---
+
+### apps/web
+
+
+
+#### .eslintrc.js
+
+*Path: apps/web/.eslintrc.js*
+
+1. **Purpose:** This file configures ESLint for the web application, ensuring code style and quality consistency. It extends a shared ESLint configuration and sets up TypeScript parsing.
+
+2. **Key Functionality:**
+
+ - `root: true`: Prevents ESLint from searching up the directory tree for other configuration files. This ensures that the project's ESLint configuration is self-contained.
+ - `extends: ["@repo/eslint-config/next.js"]`: Extends a predefined ESLint configuration specifically designed for Next.js projects within the repository. This promotes consistency across different Next.js applications in the monorepo.
+ - `parser: "@typescript-eslint/parser"`: Specifies the parser to use for TypeScript files. This allows ESLint to understand TypeScript syntax and apply relevant linting rules.
+ - `parserOptions: { project: true }`: Tells the TypeScript parser to infer project settings from the `tsconfig.json` file. This enables type-aware linting and autocompletion.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:** Depends on `eslint` and `@typescript-eslint/parser`. It leverages the shared ESLint config `@repo/eslint-config/next.js`.
+ - **Code Relationships:** This file is essential for the development workflow, ensuring code quality and consistency across the web application. It's used by ESLint during code linting.
+
+4. **Usage Example:** ESLint automatically uses this configuration file when linting files within the `apps/web` directory. Developers can run ESLint manually using commands like `npx eslint .` or integrate it into their IDE for real-time linting.
+
+5. **Technical Notes:** Using a shared ESLint configuration (`@repo/eslint-config/next.js`) promotes maintainability and consistency across multiple projects within the repository.
+
+---
+
+
+
+#### next-env.d.ts
+
+*Path: apps/web/next-env.d.ts*
+
+1. **Purpose:** This file provides TypeScript type definitions for Next.js and related libraries, allowing TypeScript to understand Next.js-specific APIs and components.
+
+2. **Key Functionality:**
+
+ - `/// `: Includes type definitions for the core Next.js library. This provides type information for Next.js components, functions, and objects.
+ - `/// `: Includes type definitions for the Next.js Image component. This ensures type safety when using the Image component and its properties.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:** Depends on the `@types/next` package, which provides TypeScript definitions for Next.js.
+ - **Code Relationships:** This file is crucial for TypeScript integration with Next.js. It ensures that TypeScript can correctly type-check code that uses Next.js APIs.
+
+4. **Usage Example:** This file is automatically used by TypeScript when compiling the Next.js application. It doesn't require explicit usage in the codebase.
+
+5. **Technical Notes:** This file is automatically generated by Next.js and should not be manually edited.
+
+---
+
+
+
+#### next.config.js
+
+*Path: apps/web/next.config.js*
+
+1. **Purpose:** This file configures the Next.js application, including webpack settings, transpiled packages, and image optimization domains.
+
+2. **Key Functionality:**
+
+ - `webpack`: Customizes the webpack configuration. It adds path aliases for easier imports and resolves a potential issue with the `keyv` package.
+ - `resolve.alias`: Creates aliases for paths like `@components` and `@styles`.
+ - `plugins`: Adds a `ContextReplacementPlugin` to handle the `keyv` package dependency.
+ - `transpilePackages`: Specifies packages that should be transpiled by Next.js. This is useful for packages that are not written in ES5 and need to be transpiled for browser compatibility.
+ - `images.domains`: Whitelists domains for image optimization. This allows Next.js to optimize images from these domains.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:** Depends on `next`, `path`, and `webpack`.
+ - **Code Relationships:** This file is crucial for configuring the build process of the Next.js application. It affects how webpack bundles the code, handles dependencies, and optimizes images.
+
+4. **Usage Example:** This file is automatically used by Next.js during the build process.
+
+5. **Technical Notes:** The `webpack` configuration modifications improve developer experience by simplifying imports and resolving potential dependency issues. The `transpilePackages` setting ensures compatibility with specific packages.
+
+---
+
+
+
+#### postcss.config.js
+
+*Path: apps/web/postcss.config.js*
+
+1. **Purpose:** This file configures PostCSS plugins for the project, specifically Tailwind CSS and Autoprefixer.
+
+2. **Key Functionality:**
+
+ - `plugins`: Defines the PostCSS plugins to use.
+ - `tailwindcss`: Enables Tailwind CSS for utility-first styling.
+ - `autoprefixer`: Automatically adds vendor prefixes to CSS rules, ensuring cross-browser compatibility.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:** Depends on `tailwindcss` and `autoprefixer`.
+ - **Code Relationships:** This file is essential for styling the application using Tailwind CSS and ensuring cross-browser compatibility.
+
+4. **Usage Example:** This configuration is automatically used by PostCSS during the build process.
+
+5. **Technical Notes:** Using Tailwind CSS and Autoprefixer simplifies styling and improves cross-browser compatibility.
+
+---
+
+
+
+#### tailwind.config.js
+
+*Path: apps/web/tailwind.config.js*
+
+1. **Purpose:** This file configures Tailwind CSS for the project, defining design tokens, styles, and customizations.
+
+2. **Key Functionality:**
+
+ - `darkMode`: Enables dark mode support.
+ - `content`: Specifies the files to scan for Tailwind CSS class usage.
+ - `theme`: Customizes the default Tailwind CSS theme, including fonts, colors, and breakpoints.
+ - `plugins`: Adds Tailwind CSS plugins, such as `tailwindcss-animate`.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:** Depends on `tailwindcss` and `tailwindcss-animate`.
+ - **Code Relationships:** This file is crucial for styling the application using Tailwind CSS. It defines the design system and custom styles. It uses the `@repo/ui` package, indicating a dependency on a shared UI component library.
+
+4. **Usage Example:** This configuration is automatically used by Tailwind CSS during the build process.
+
+5. **Technical Notes:** The `content` array ensures that Tailwind CSS only generates styles for classes used in the specified files, optimizing the final CSS size. The inclusion of `../../packages/ui/src/**/*.{ts,tsx}` suggests a monorepo structure where the UI components are shared across different applications.
+
+---
+
+### apps/web/app
+
+
+
+#### globals.css
+
+*Path: apps/web/app/globals.css*
+
+1. **Purpose:** This file defines the global styles for the web application, including font imports, Tailwind CSS configuration, and custom styling rules. It sets up the base styles, dark mode variations, and utility classes.
+
+2. **Key Functionality:**
+
+- **Font Imports:** Imports the "Open Sans", "Poppins", and "Montserrat Alternates" fonts from Google Fonts.
+- **Tailwind CSS Integration:**
+ - `@tailwind base;`: Includes Tailwind's base styles.
+ - `@tailwind components;`: Includes Tailwind's component styles.
+ - `@tailwind utilities;`: Includes Tailwind's utility classes.
+- **Custom Styles:**
+ - Defines CSS variables for colors and border radius within the `:root` element.
+ - Implements dark mode styles within the `.dark` class, toggling color variables.
+ - Sets default styles for elements like `body` and `*` within the `@layer base` directive.
+ - Creates utility classes like `wrapper`, `flex-center`, and `flex-between` within the `@layer utilities` directive.
+ - Enforces "Poppins" as the default font family for all elements.
+ - Implements a `.no-scrollbar` class to hide scrollbars.
+
+3. **Dependencies and Relationships:**
+
+- **Dependencies:** Depends on Tailwind CSS for utility classes and base styles. Relies on Google Fonts for the specified fonts.
+- **Relationships:** This file is imported into `layout.tsx` to apply the styles globally to the application.
+
+4. **Usage Example:** N/A (CSS file)
+
+5. **Technical Notes:**
+
+- The use of CSS variables allows for easy theming and switching between light and dark modes.
+- Tailwind CSS provides a utility-first approach for styling, promoting consistency and reducing custom CSS.
+- The `@layer` directive helps organize styles and ensures proper precedence.
+
+---
+
+
+
+#### layout.tsx
+
+*Path: apps/web/app/layout.tsx*
+
+1. **Purpose:** This file defines the main layout of the web application. It sets up the global font, theme provider, top loader, and wraps the application content with necessary providers.
+
+2. **Key Functionality:**
+
+- **Font Integration:** Uses the `Poppins` font from `next/font/google`.
+- **Theme Provider:** Wraps the application with `ThemeProvider` from `../components/Providers` to manage theme switching (light/dark mode). Uses the `attribute="class"` prop, indicating theme changes are handled by CSS classes (like the `.dark` class in `globals.css`). Sets the default theme to "system" and enables system theme preference detection. Disables transitions on theme change.
+- **Top Loader:** Implements `NextTopLoader` for a visual loading indicator at the top of the page.
+- **Providers:** Wraps the application content with `Providers` (likely for context and state management).
+- **Toaster:** Includes a `Toaster` component from `@repo/ui` for displaying notifications.
+- **Metadata:** Defines metadata like `title` and `description` for the application.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:** Imports `globals.css` for styling, `Poppins` font, `cn` utility, `Providers` and `ThemeProvider` components, `NextTopLoader`, React Notion X styles, PrismJS styles, KaTeX styles, and `Toaster`.
+- **Code Relationships:** This layout file wraps all other page content, making it the entry point for styling and provider setup. It uses the styles defined in `globals.css`.
+
+4. **Usage Example:** N/A (Layout file)
+
+5. **Technical Notes:**
+
+- `suppressHydrationWarning` is used on the `html` element. This might be necessary if there are known hydration mismatches between server and client rendering. Investigate if this is truly necessary and address the underlying hydration issues if possible.
+- The use of a theme provider allows for dynamic theme switching.
+- Importing CSS libraries directly into the layout ensures they are applied globally.
+
+---
+
+
+
+#### page.module.css
+
+*Path: apps/web/app/page.module.css*
+
+1. **Purpose:** This file is intended for module-specific styles for the main application page. However, it's currently empty.
+
+2. **Key Functionality:** None. The file is empty.
+
+3. **Dependencies and Relationships:** Potentially used by `page.tsx` if it contained styles.
+
+4. **Usage Example:** N/A (Empty CSS file)
+
+5. **Technical Notes:** This file can be removed if not needed.
+
+---
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/page.tsx*
+
+1. **Purpose:** This file defines the main page content of the application, rendering the `Landing` component.
+
+2. **Key Functionality:** Renders the `Landing` component.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:** Imports the `Landing` component from `../screens/Landing`.
+- **Code Relationships:** This file is the entry point for the main page content and determines what is displayed on the root route.
+
+4. **Usage Example:** This file represents the root route of the application. When a user visits the base URL, this component is rendered.
+
+5. **Technical Notes:** The simplicity suggests the `Landing` component holds the primary logic and content for the main page.
+
+
+**Overall System Architecture and Relationships:**
+
+- `globals.css` provides the global styles for the application.
+- `layout.tsx` sets up the layout, including the theme provider, font, and global providers, and imports the styles from `globals.css`.
+- `page.tsx` defines the content of the main application page, rendering the `Landing` component.
+- `page.module.css` is currently unused but is intended for page-specific styles.
+
+The files work together to create a styled and structured web application. `layout.tsx` acts as a container for all page content, applying global styles and providing necessary context. `page.tsx` determines the specific content displayed on the root route. The system is designed with a clear separation of concerns: layout, styling, and page content.
+
+---
+
+### apps/web/app/(marketing)
+
+
+
+#### layout.tsx
+
+*Path: apps/web/app/(marketing)/layout.tsx*
+
+1. **Purpose:** This file defines the `MarketingLayout` component, which provides a consistent layout structure for marketing pages within the web application. It wraps child components with a header (AppbarClient) and footer.
+
+2. **Key Functionality:**
+
+- **`MarketingLayout` Component:**
+ - **Parameters:**
+ - `children`: `React.ReactNode` - The content to be rendered within the layout. This allows any valid React component or JSX to be passed as children to the layout.
+ - **Return Type:** `JSX.Element` - Renders the layout structure containing the header, children, and footer.
+ - **Implementation:** The component uses a `main` element with styling for background and minimum height. It renders the `AppbarClient` component at the top, followed by the provided `children`, and finally the `Footer` component.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `React`: Used for JSX and component creation.
+ - `Footer`: Imports the `Footer` component, presumably from `../../screens/footer`. This suggests a directory structure where shared UI components are located in a `screens` or `components` directory.
+ - `AppbarClient`: Imports the `AppbarClient` component, likely a customized app bar for client-facing marketing pages, from `../../components/AppbarClient`.
+- **Code Relationships:** This layout component is likely used within the marketing section of the web application, wrapping specific marketing pages to provide a consistent look and feel. It depends on the `Footer` and `AppbarClient` components.
+
+4. **Usage Example:**
+
+```tsx
+// Inside a marketing page component, e.g., /pages/marketing/pricing.tsx
+import MarketingLayout from "../(marketing)/layout";
+
+const PricingPage = () => {
+ return (
+
+ {/* Pricing page content */}
+
Pricing
+
Our pricing plans...
+
+ );
+};
+
+export default PricingPage;
+
+```
+
+This example demonstrates how a marketing page (`PricingPage`) uses the `MarketingLayout` to wrap its content. The `PricingPage` component's JSX is passed as the `children` prop to `MarketingLayout`, resulting in a consistent layout across marketing pages.
+
+5. **Technical Notes:**
+
+- The use of a dedicated layout component promotes reusability and maintainability by centralizing the layout structure.
+- The relative import paths (`../../screens/footer`, `../../components/AppbarClient`) suggest a well-organized project structure. This structure likely uses a shared components directory and separates components by their function (e.g., client-facing vs. internal).
+- The `className` attribute uses tailwind CSS classes (`min-h-screen`, `bg-background`, `antialiased`) for styling. This indicates the project likely uses Tailwind CSS for styling.
+
+
+---
+
+
+There were no other files provided. If you provide more files, I can generate documentation for them.
+
+---
+
+### apps/web/app/(marketing)/(policy)/privacy-policy
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/(marketing)/(policy)/privacy-policy/page.tsx*
+
+1. **Purpose:** This file defines the `PrivacyPolicyPage` component, responsible for rendering the privacy policy content on the website's marketing section. It displays the privacy policy information fetched from a shared component.
+
+2. **Key Functionality:**
+
+- **`PrivacyPolicyPage` Component:** This functional component renders the privacy policy content.
+ - **Parameters:** None
+ - **Return Type:** `JSX.Element`
+ - **Implementation:** It iterates through the `privacyPolicyContent` array (imported from `../../../../components/privacy-policy/privacy-policy`) and renders each item's description within a `
` tag. The content is structured within a main container with styling for responsiveness.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:** Imports `privacyPolicyContent` from `../../../../components/privacy-policy/privacy-policy`. This indicates a dependency on a shared component for the actual policy content. This structure suggests a separation of concerns, with the content managed centrally and reused across different parts of the application.
+- **Code Relationships:** This component is likely routed within the application's routing configuration (e.g., using Next.js's file-based routing) to be accessible at the `/privacy-policy` route under the marketing section.
+
+4. **Usage Example:**
+
+This component would be rendered when a user navigates to the privacy policy page within the marketing section of the website. For example, in a Next.js application, the file's location in the `app` directory automatically handles routing.
+
+5. **Technical Notes:**
+
+- The component uses a simple mapping function to render the policy content. This assumes that `privacyPolicyContent` is an array of objects, each with an `id` and `description` property.
+- The styling uses Tailwind CSS classes for layout and responsiveness.
+
+---
+
+### apps/web/app/(marketing)/tnc
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/(marketing)/tnc/page.tsx*
+
+1. **Purpose:** This file defines the `TermsAndConditionsPage` component, responsible for rendering the terms and conditions content on a web page. It dynamically displays the content from a data source.
+
+2. **Key Functionality:**
+
+- **`TermsAndConditionsPage` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** `JSX.Element` (React component)
+ - **Implementation:** This component iterates through the `tncContent` array (imported from `../../../components/tnc/tnc-content`). It renders an `h1` element for the title and then maps over the `tncContent` array. For each item in the array, it renders a `div` containing a description paragraph and a nested loop to render a list of points associated with that item. Each point is rendered as a paragraph with an ID and description.
+ - **Error Handling/Fallback:** No explicit error handling is present. If `tncContent` is empty or undefined, the rendered output will simply contain the title and no content below it.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `tncContent` from `../../../components/tnc/tnc-content`: This import provides the data for the terms and conditions. The file structure suggests this is a relative import within the same project, indicating a close relationship between the components.
+- **Code Relationships:** This component likely fits within a larger web application structure, potentially routed using a framework like Next.js. It depends on the `tncContent` data, suggesting a separation of content and presentation.
+
+4. **Usage Example:**
+
+This component would be used as a route within a web application. In a Next.js application, for example, it might be placed in the `pages` directory to be directly accessible via a URL.
+
+```javascript
+// Example in a Next.js routes directory
+// pages/terms.tsx
+import TermsAndConditionsPage from './(marketing)/tnc/page';
+
+export default TermsAndConditionsPage;
+```
+
+5. **Technical Notes:**
+
+- The component uses a simple mapping approach to render the content. For more complex terms and conditions with dynamic sections or interactive elements, a more structured approach with reusable sub-components might be beneficial for maintainability.
+- The key prop is used correctly within the mapping functions, which is crucial for React's reconciliation process and performance. However, if the `item.id` and `point.id` are not guaranteed to be unique, this could lead to issues. A more robust approach might involve generating unique keys if they are not readily available.
+- The relative import path `../../../components/tnc/tnc-content` suggests a specific project structure. While relative imports are common, deeply nested paths can sometimes indicate a need for refactoring to improve code organization. Consider evaluating if the project structure could be optimized for simpler import paths.
+
+---
+
+### apps/web/app/admin
+
+
+
+#### layout.tsx
+
+*Path: apps/web/app/admin/layout.tsx*
+
+1. **Purpose:** This file defines the layout for the admin section of the web application. It primarily handles authentication and authorization, ensuring only authorized users can access admin pages.
+
+2. **Key Functionality:**
+
+- **`AdminLayout` (functional component):**
+ - **Parameters:**
+ - `children`: `ReactNode` - The content to be rendered within the layout.
+ - **Return Type:** `JSX.Element` or `null`
+ - **Implementation:**
+ - Uses `getServerSession(authOptions)` to retrieve the user's session from NextAuth.js.
+ - Checks `session?.user?.admin`. If false (user not logged in or not an admin), renders an "Access Denied" page with a link to the homepage.
+ - If true (user is an admin), renders the provided `children` within the layout.
+ - **Fallback Mechanism:** If the user is not authorized, a specific access denied page is displayed, guiding the user back to the homepage.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `getServerSession` from `next-auth`: Used for server-side authentication.
+ - `authOptions` from `../../lib/auth`: Configuration options for NextAuth.js.
+ - `Link` from `next/link`: Used for client-side navigation.
+ - `LockClosedIcon` from `@radix-ui/react-icons`: Used for the visual lock icon.
+ - `ReactNode` from `react`: Defines the type for React children.
+- **Code Relationships:** This layout component is used to wrap any page within the admin section (e.g., `/admin`). It depends on the authentication logic defined in `../../lib/auth`.
+
+4. **Usage Example:**
+
+```tsx
+// In a page within the admin section (e.g., /admin/dashboard)
+import AdminLayout from './layout';
+
+export default function DashboardPage() {
+ return (
+
+ {/* Admin-specific content */}
+
+ );
+}
+```
+
+5. **Technical Notes:**
+
+- Server-side rendering with `getServerSession` ensures that authentication is handled before the page is sent to the client, improving security.
+- The `authOptions` likely contain the configuration for connecting to the authentication provider.
+
+---
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/admin/page.tsx*
+
+1. **Purpose:** This file defines the main entry point for the admin section of the application. It renders the admin layout and the core admin content.
+
+2. **Key Functionality:**
+
+- **`AdminPage` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** `JSX.Element`
+ - **Implementation:** Renders the `AppbarClient` component and the `Admin` component within the layout structure.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `AppbarClient` from `../../components/AppbarClient`: The application's app bar component, likely providing navigation and other UI elements.
+ - `Admin` from `../../screens/Admin`: The main content component for the admin section.
+- **Code Relationships:** This page component uses the `AppbarClient` for consistent UI and the `Admin` component to display the admin-specific content. It is likely routed to the `/admin` path. It is wrapped by `layout.tsx`, which provides the authentication layer.
+
+4. **Usage Example:** This component is typically accessed by navigating to the `/admin` route.
+
+5. **Technical Notes:**
+
+- This file demonstrates a clear separation of concerns: `AdminPage` handles the page structure, `AppbarClient` handles the app bar, and `Admin` handles the specific admin content.
+- This structure makes the code more modular and maintainable. The relationship between `page.tsx` and `layout.tsx` is crucial for securing the admin section of the application. `layout.tsx` acts as a gatekeeper, ensuring only authorized users can access the content rendered by `page.tsx`.
+
+---
+
+### apps/web/app/api/AddTracks
+
+
+
+#### route.ts
+
+*Path: apps/web/app/api/AddTracks/route.ts*
+
+1. **Purpose:** This file defines the API endpoint `/api/AddTracks` which fetches track data from a Notion page given its ID. It's used to populate track information within the application.
+
+2. **Key Functionality:**
+
+- **`POST` handler:**
+ - **Parameters:** `req` (NextRequest) - The incoming request object.
+ - **Return Type:** `NextResponse` - The API response containing track data or an error.
+ - **Implementation:**
+ 1. Retrieves the user's session using `getServerSession(authOptions)`.
+ 2. Authorizes the request, allowing access only to admin users. Returns a 401 Unauthorized response if the user is not an admin.
+ 3. Parses the Notion page ID (`notionId`) from the request body.
+ 4. Initializes a `NotionAPI` client.
+ 5. Fetches the Notion page data using `notion.getPage(notionId)`.
+ 6. Processes the `recordMap` from the Notion API response, filtering out blocks with `role: "none"`.
+ 7. Transforms the remaining blocks into an array of objects, each containing the `notionDocId` and `title`.
+ 8. Removes the first and last elements of the array (assumed to be extraneous based on the provided code).
+ 9. Returns the processed track data as a JSON response.
+ 10. Handles potential errors during the Notion API call and returns the error as a JSON response.
+ - **Error Handling:** Uses a `try-catch` block to handle errors during the Notion API call.
+ - **Optimizations:** Filters and maps the Notion data directly to minimize unnecessary processing.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `getServerSession` from `next-auth`: Used for server-side authentication.
+ - `NextRequest`, `NextResponse` from `next/server`: Next.js API route handlers.
+ - `NotionAPI` from `notion-client`: Used to interact with the Notion API.
+ - `authOptions` from `../../../lib/auth`: Authentication configuration.
+- **Code Relationships:** This file depends on the Notion API and the application's authentication mechanism. It likely interacts with other parts of the application that consume the returned track data.
+
+4. **Usage Example:**
+
+```javascript
+// Frontend code
+const response = await fetch('/api/AddTracks', {
+ method: 'POST',
+ body: JSON.stringify({ notionId: 'YOUR_NOTION_PAGE_ID' }),
+});
+const tracks = await response.json();
+// Use the 'tracks' data
+```
+
+5. **Technical Notes:**
+
+- The code assumes a specific structure for the Notion page and removes the first and last elements of the processed data. This suggests a convention or template used for storing track information in Notion.
+- The error handling could be more robust, providing specific error messages and status codes based on the type of error encountered.
+- The authorization mechanism relies on the `admin` flag in the user's session. This implies a role-based access control system within the application. The `authOptions` from `../../../lib/auth` likely defines the authentication strategy and session management. The dependency on `next-auth` suggests a server-side authentication approach. This API endpoint interacts with the Notion API externally and internally with other modules that consume the track data it retrieves and processes. This file is crucial for populating track information within the application, bridging the gap between the Notion data source and the application's internal data structures.
+
+---
+
+### apps/web/app/api/auth/[...nextauth]
+
+
+
+#### route.ts
+
+*Path: apps/web/app/api/auth/[...nextauth]/route.ts*
+
+1. **Purpose:** This file sets up the NextAuth.js authentication middleware for the web application. It handles authentication routes and integrates with the authentication options defined in `authOptions`.
+
+2. **Key Functionality:**
+
+- **`handler`:** This constant is an instance of the NextAuth middleware initialized with `authOptions`.
+ - **Parameters:** `authOptions` (object) - Configuration options for NextAuth.js, including providers, callbacks, and database adapter.
+ - **Return Type:** `NextAuth` instance - A middleware function that handles authentication requests.
+ - **Implementation:** It uses the `NextAuth` function from the `next-auth` library, passing in the `authOptions` object. This sets up the authentication routes and logic based on the provided configuration.
+- **`GET` and `POST` handler exports:** These lines expose the `handler` function for both GET and POST requests to the `/api/auth/*` routes. This allows NextAuth.js to handle various authentication actions like sign-in, sign-out, and callbacks.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `next-auth`: Provides the core NextAuth.js functionality.
+ - `../../../../lib/auth`: Imports the `authOptions` object, which likely contains provider configurations (e.g., Google, GitHub), database adapter settings, and custom callbacks.
+- **Code Relationships:** This file is the entry point for all authentication requests. It relies on the `authOptions` from the `lib/auth` module to configure the authentication behavior. It interacts with external authentication providers based on the `authOptions` configuration.
+
+4. **Usage Example:**
+
+A user navigating to `/api/auth/signin` will trigger this route. The `handler` will process the request based on the configured providers in `authOptions`. For example, if Google is configured as a provider, the user will be redirected to Google for authentication. Upon successful authentication, the callback defined in `authOptions` will be executed.
+
+5. **Technical Notes:**
+
+- The `[...nextauth]` dynamic route syntax is a Next.js feature that allows NextAuth.js to handle all sub-paths under `/api/auth/`. This simplifies the routing configuration for authentication.
+- The location of `authOptions` in `lib/auth` suggests a centralized configuration approach, promoting maintainability and code reusability. This separation also keeps sensitive configuration details away from the route handler itself.
+- The use of both `GET` and `POST` exports ensures that the handler can handle various authentication requests, including OAuth callbacks which might use POST.
+
+
+---
+
+
+There are no other files provided, so no further file documentation can be generated. If you provide additional files, I can create documentation for them following the same structure. Remember to provide context about how the files relate to each other.
+
+---
+
+### apps/web/app/api/revalidate
+
+
+
+#### route.ts
+
+*Path: apps/web/app/api/revalidate/route.ts*
+
+1. **Purpose:** This file defines an API endpoint for on-demand revalidation of Next.js cached pages. It allows external triggers to refresh specific page content, ensuring data consistency.
+
+2. **Key Functionality:**
+
+- **`GET(req: NextRequest)`:**
+ - **Parameters:** `req` (NextRequest) - The incoming request object containing query parameters.
+ - **Return Type:** `NextResponse` - The response object containing revalidation status or error information.
+ - **Implementation:**
+ - Retrieves the `secret` and `path` from the request query parameters.
+ - Validates the `secret` against the environment variable `MY_SECRET_TOKEN`.
+ - If the secret is valid and a `path` is provided, it calls `revalidatePath(path)` to trigger revalidation of the specified path.
+ - Returns a JSON response indicating success or failure.
+ - **Error Handling:** Returns a 401 error for invalid tokens and a 500 error for revalidation failures.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `next/cache`: Imports `revalidatePath` for interacting with Next.js's caching mechanism.
+ - `next/server`: Imports `NextRequest` and `NextResponse` for handling requests and responses in a Next.js API route.
+- **Code Relationships:** This API endpoint is likely triggered by external systems (e.g., CMS webhooks) or internal processes that need to refresh specific pages after data updates. It directly interacts with the Next.js runtime to invalidate the cache.
+
+4. **Usage Example:**
+
+```bash
+# Trigger revalidation of the '/products' page
+curl -X GET "https://your-domain/api/revalidate?secret=YOUR_SECRET_TOKEN&path=/products"
+```
+
+5. **Technical Notes:**
+
+- **Security:** The `MY_SECRET_TOKEN` environment variable is crucial for securing this endpoint. Without proper validation, anyone could trigger revalidation, potentially leading to performance issues or unintended cache invalidation.
+- **Performance:** On-demand revalidation offers granular control over cache refresh, improving performance compared to time-based invalidation, especially for infrequently updated content. However, excessive revalidation calls can negatively impact performance.
+- **Edge Cases:** The code handles missing `path` parameters gracefully, but it might be beneficial to log invalid revalidation requests for debugging and security analysis. Consider adding rate limiting to prevent abuse.
+
+---
+
+### apps/web/app/auth
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/auth/page.tsx*
+
+1. **Purpose:** This file defines the `SigninPage` component, which renders the sign-in form for the web application. It serves as the entry point for user authentication.
+
+2. **Key Functionality:**
+
+- **`SigninPage` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** `JSX.Element` (React component)
+ - **Implementation:** This component uses React's `Suspense` component to handle the asynchronous loading of the `Signin` component. This improves the perceived performance by displaying a fallback UI while the `Signin` component is being loaded.
+- **`Signin` (imported component):** This component is assumed to contain the actual sign-in form logic and UI elements. Its specific implementation details are not available in this file.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `react`: Uses `Suspense` for asynchronous component loading.
+ - `../../components/Signin`: Imports the `Signin` component, which encapsulates the sign-in form.
+- **Code Relationships:** This file is the entry point for the `/auth` route (implied). It depends on the `Signin` component for the actual sign-in functionality.
+
+4. **Usage Example:**
+
+This component would be rendered when a user navigates to the `/auth` route of the application. The Next.js router (implied) would match this route to this file and render the `SigninPage` component.
+
+5. **Technical Notes:**
+
+- The use of `Suspense` suggests that the `Signin` component might involve dynamic imports or other asynchronous operations, potentially for code splitting or lazy loading. This optimization can improve initial page load performance.
+
+---
+
+### apps/web/app/canva-track/[...trackIds]
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/canva-track/[...trackIds]/page.tsx*
+
+1. **Purpose:** This file renders a Canva presentation embedded within an iframe. It retrieves the Canva link and title from URL parameters and displays the presentation in a full-screen view.
+
+2. **Key Functionality:**
+
+- **`Header` Component:**
+ - Parameters: `title` (string) - The title of the Canva presentation.
+ - Return Type: `React.ReactElement` - Renders the header section of the page.
+ - Implementation: Displays the provided title and a link back to the home page with an image. Uses `motion.div` from `framer-motion` for animation effects.
+
+- **`CanvaTrack` Component (default export):**
+ - Parameters: None
+ - Return Type: `React.ReactElement` - Renders the entire page containing the embedded Canva presentation.
+ - Implementation:
+ - Uses `useSearchParams` from `next/navigation` to retrieve URL parameters (`canvaLink`, `title`).
+ - Constructs the `embedUrl` by appending `?embed` to the `canvaLink` if it's not already present.
+ - Renders a full-screen iframe with the `embedUrl` as its source, allowing fullscreen viewing.
+ - Includes error handling: If `embedUrl` is missing, it displays a "No Canva presentation link provided" message.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `React`: Core React library.
+ - `useSearchParams` (from `next/navigation`): For accessing URL query parameters.
+ - `motion` (from `framer-motion`): For animation effects.
+ - `Link` (from `next/link`): For client-side navigation.
+ - `Image` (from `next/image`): For optimized image rendering.
+
+- **Code Relationships:** This file is a standalone page component within a Next.js application. It likely interacts with other parts of the application through routing and potentially shared context or data fetching mechanisms (not shown in this file).
+
+4. **Usage Example:**
+
+Navigating to a URL like `/canva-track/123?canvaLink=https://www.canva.com/design/DAFadsf/view&title=My%20Presentation` would render this page with the specified Canva presentation embedded. The `[...trackIds]` dynamic route segment suggests that this page might handle multiple Canva presentations based on IDs, although this specific implementation only uses the query parameters.
+
+5. **Technical Notes:**
+
+- The use of `?embed` ensures that the Canva presentation is displayed in embed mode within the iframe.
+- The `allowFullScreen` and `allow="fullscreen"` attributes enable fullscreen viewing of the embedded presentation.
+- The conditional rendering based on `embedUrl` provides a basic error handling mechanism.
+- The use of `framer-motion` adds subtle animations to the header, enhancing the user experience. The specific animation configuration (duration, ease, type, damping) could be adjusted for different effects.
+- The `Image` component from `next/image` is used for optimized image loading and responsiveness. It's important to provide appropriate `width` and `height` props for optimal performance.
+
+
+This documentation provides a comprehensive overview of the file's purpose, functionality, dependencies, and usage. It highlights key implementation details, error handling, and technical considerations, offering valuable insights into how this component integrates within a larger Next.js application.
+
+---
+
+### apps/web/app/pdf/[...pdfId]
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/pdf/[...pdfId]/page.tsx*
+
+1. **Purpose:** This file defines a dynamic route handler for rendering a printable lesson view based on a track ID and problem ID. It fetches data from a Notion API and renders the content using Next.js components.
+
+2. **Key Functionality:**
+
+- **`TrackComponent({ params })`:**
+ - **Parameters:** `params`: An object containing the dynamic route parameters. `params.pdfId` is an array where `pdfId[0]` is the `trackId` and `pdfId[1]` is the `problemId`.
+ - **Return Type:** JSX.Element (React component)
+ - **Implementation:**
+ - Extracts `trackId` and `problemId` from `params`.
+ - Redirects to a specific track if `trackId` matches a hardcoded value.
+ - Fetches problem and track details using `getProblem` and `getTrack`.
+ - If no `problemId` is provided, redirects to the last solved problem using `RedirectToLastSolved`.
+ - Fetches Notion page data for the problem and all problems in the track using `notion.getPage`. This fetches data for all problems in the track to allow printing of the entire track.
+ - Redirects to the login page if the user is not authenticated, preserving the intended download URL.
+ - Renders `LessonView` components for each problem in the track, passing the fetched data.
+ - Includes a `Print` component for printing functionality.
+ - **Fallback Mechanisms:** Redirects to login if no session exists. Handles missing `problemId` by redirecting to the last solved problem.
+
+- **Dependencies:**
+ - `RedirectToLastSolved`: Internal component for redirecting to the last solved problem.
+ - `NotionAPI`: External library for interacting with the Notion API.
+ - `redirect`: Next.js function for redirecting navigation.
+ - `Print`: Internal component for printing functionality.
+ - `getProblem`, `getTrack`: Internal utility functions for fetching problem and track details.
+ - `LessonView`: Internal component for displaying lesson content.
+ - `getServerSession`: NextAuth function for retrieving the server-side session.
+ - `authOptions`: NextAuth configuration options.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:** Imports components, utility functions, and external libraries as described above.
+- **Code Relationships:** This file depends on the `getProblem` and `getTrack` functions to fetch data. It uses the `LessonView` component to display the lesson content and the `Print` component for printing. It interacts with the authentication system through `getServerSession` and `authOptions`.
+
+4. **Usage Example:** Accessing the URL `/pdf/some-track-id/some-problem-id` will trigger this route handler.
+
+5. **Technical Notes:**
+
+- The code fetches Notion data for all problems in the track, even though only one problem is initially displayed. This is likely done to enable printing of the entire track at once. This could be optimized to fetch data on demand if performance becomes an issue.
+- The hardcoded redirect for a specific `trackId` suggests a potential temporary workaround or a special case that needs to be addressed more systematically.
+- The use of `Promise.all` for fetching Notion pages optimizes performance by fetching data concurrently.
+
+
+---
+
+
+No other files were provided, so only File 1 is documented. If you provide additional files, I can generate documentation for them as well. Remember to provide context about how the files relate to each other. For example, if a file imports a function from another file, mention this relationship explicitly. This will help create a comprehensive and interconnected documentation set.
+
+---
+
+### apps/web/app/profile
+
+
+
+#### layout.tsx
+
+*Path: apps/web/app/profile/layout.tsx*
+
+1. **Purpose:** This file defines the layout for the user profile page in a Next.js web application. It structures the profile section with a sidebar and content area.
+
+2. **Key Functionality:**
+
+- **`ProfileLayout` Function:**
+ - **Parameters:** `children: React.ReactNode` (The content to be rendered within the layout)
+ - **Return Type:** `JSX.Element` (The rendered layout component)
+ - **Implementation:** This function uses a grid layout to arrange the `ProfileSidebar` and `ProfileChilldren` components. It wraps the provided `children` within the `ProfileChilldren` component, placing it in the main content area. The `AppbarClient` component is rendered at the top.
+ - **Fallback Mechanisms:** No specific fallback mechanisms are implemented within this layout component. Error handling would be handled by parent components or error boundaries higher up in the component tree.
+
+- **`metadata` Constant:**
+ - **Type:** `Metadata` (Next.js metadata object)
+ - **Implementation:** Defines metadata for the page, including the title and description for SEO purposes.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `Metadata` from `next`: Used for defining page metadata.
+ - `AppbarClient` from `../../components/AppbarClient`: The application's app bar component.
+ - `ProfileSidebar` from `../../components/ProfileSidebar`: The sidebar component for the profile page.
+ - `ProfileChilldren` from `../../components/ProfileChildren`: A wrapper component for the dynamic content within the profile section.
+
+- **Code Relationships:** This layout is used by the `page.tsx` file within the same directory to structure the profile page content. It relies on the `AppbarClient`, `ProfileSidebar`, and `ProfileChildren` components.
+
+4. **Usage Example:**
+
+```tsx
+// In page.tsx
+import ProfileLayout from './layout';
+
+export default function ProfilePage() {
+ return (
+
+ {/* Content specific to the profile page */}
+
Profile content here
+
+ );
+}
+```
+
+5. **Technical Notes:**
+
+- The use of a grid layout (`grid grid-cols-8`) provides a responsive structure for the profile page.
+- The `ProfileChildren` component acts as a container for the dynamic content passed as children, ensuring consistent styling and positioning within the layout.
+
+---
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/profile/page.tsx*
+
+1. **Purpose:** This file defines the main content and logic for the user profile page. It handles authentication and renders the user's profile details.
+
+2. **Key Functionality:**
+
+- **`Profile` Function:**
+ - **Return Type:** `JSX.Element` (The rendered profile page component)
+ - **Implementation:** This function first checks for an active user session using `getServerSession`. If no session exists, it redirects the user to the authentication page (`/auth`). If a session exists, it renders the profile page content, including a header and the `UserDetailForm` component.
+ - **Fallback Mechanisms:** Redirects to `/auth` if no user session is found.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `getServerSession` from `next-auth`: Used for server-side authentication.
+ - `authOptions` from `../../lib/auth`: Authentication configuration.
+ - `redirect` from `next/navigation`: Used for client-side navigation.
+ - `UserRound` from `lucide-react`: Icon component.
+ - `UserDetailForm` from `../../components/UserDetailForm`: Component for displaying and editing user details.
+
+- **Code Relationships:** This page uses the `ProfileLayout` component from `layout.tsx` to structure its content. It depends on the `next-auth` library for authentication and utilizes the `UserDetailForm` component to display user details.
+
+4. **Usage Example:** This file represents a page route in the Next.js application and is accessed via the `/profile` URL.
+
+5. **Technical Notes:**
+
+- Server-side authentication ensures that sensitive user data is not exposed on the client-side.
+- The use of `redirect` provides a seamless client-side transition to the login page if the user is not authenticated.
+- This file depends on the `layout.tsx` file for its overall structure and layout. The `UserDetailForm` component, used within this page, likely receives the user data from the `session.user` object to pre-fill the form fields. This demonstrates a clear flow of data and dependencies between the files within the profile section of the application.
+
+---
+
+### apps/web/app/tracks/[...trackIds]
+
+
+
+#### page.tsx
+
+*Path: apps/web/app/tracks/[...trackIds]/page.tsx*
+
+1. **Purpose:** This file defines a dynamic Next.js page component responsible for rendering individual lesson pages within a learning track. It fetches track and problem details and displays them using a `LessonView` component.
+
+2. **Key Functionality:**
+
+- **`generateMetadata({ params })`**: This asynchronous function generates dynamic metadata for the page based on the track ID. It fetches track details using `getTrack(trackId)` and returns an object containing the title, description, and open graph metadata. If the track is not found, it returns default metadata indicating a 404.
+ - **Parameters:** `params`: An object containing the route parameters, including `trackIds`.
+ - **Return Type:** An object containing metadata for the page.
+- **`generateStaticParams()`**: This asynchronous function generates static parameters for pre-rendering. It fetches all tracks and their associated problems using `getAllTracks()` and `cache` (for memoization). It returns an array of objects, each representing a page to be pre-rendered. Error handling is included with a console log and an empty array return.
+ - **Return Type:** An array of objects representing static paths.
+- **`TrackComponent({ params })`**: This is the main page component. It retrieves the `trackId` and `problemId` from the route parameters. It handles redirection for a specific track ID. It fetches problem and track details using `getProblem()` and `getTrack()`. If no `problemId` is provided, it redirects to the last solved problem in the track using `RedirectToLastSolved`. If a `notionDocId` exists for the problem, it fetches the Notion page content using `notion.getPage()`. Finally, it renders the `LessonView` component with the fetched data or returns a 404 if the data is not found.
+ - **Parameters:** `params`: An object containing the route parameters.
+ - **Return Type:** JSX to be rendered.
+
+3. **Dependencies and Relationships:**
+
+- **Imports & Usage:**
+ - `RedirectToLastSolved`: Internal component for redirecting to the last solved problem.
+ - `NotionAPI` from `notion-client`: Used for fetching data from Notion.
+ - `redirect`, `notFound` from `next/navigation`: Next.js routing functions.
+ - `getAllTracks`, `getProblem`, `getTrack`: Internal utility functions for data fetching.
+ - `cache` from `react`: For memoizing the `getAllTracks` function.
+ - `LessonView`: Internal component for rendering the lesson content.
+- **Code Relationships:**
+ - This file depends on the `components/utils.ts` file for data fetching functions (`getAllTracks`, `getProblem`, `getTrack`).
+ - It uses the `components/RedirectToLastSolved` component for handling redirection logic.
+ - It uses the `components/LessonView` component to display the lesson content.
+
+4. **Usage Example:**
+
+Navigating to `/tracks/some-track-id/some-problem-id` will render this page component. Next.js will use the `generateStaticParams` and `generateMetadata` functions at build time for pre-rendering and SEO.
+
+5. **Technical Notes:**
+
+- The use of `cache` around `getAllTracks` improves performance by memoizing the results.
+- The fallback to a default thumbnail image in `generateMetadata` enhances robustness.
+- The redirection logic for a specific track ID (`43XrfL4n0LgSnTkSB4rO`) suggests a potential migration or alias.
+- The dynamic route `[...trackIds]` allows for flexible handling of both track and problem IDs within the URL. The code handles cases where only the `trackId` is present.
+
+---
+
+### apps/web/components
+
+
+
+#### Appbar.tsx
+
+*Path: apps/web/components/Appbar.tsx*
+
+1. **Purpose:** This component renders the main application AppBar, providing navigation and user authentication controls for the web application. It displays the logo, a mode toggle, a login button (or user dropdown if logged in), and links to other parts of the application.
+
+2. **Key Functionality:**
+
+- **`Appbar`**: The main functional component.
+ - *Parameters:* None
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `next/link` for routing, `@repo/ui` for UI components, `next-auth/react` for authentication, and `framer-motion` for animations. It conditionally renders the login button or user dropdown based on the authentication status.
+
+- **Dependencies:**
+ - `next/link`: For navigation.
+ - `@repo/ui`: For UI components (Button).
+ - `next-auth/react`: For authentication (signIn, useSession).
+ - `./ModeToggle`: For toggling light/dark mode.
+ - `./UserAccountDropDown`: For displaying user account options.
+ - `next/image`: For displaying images.
+ - `framer-motion`: For animations.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports components from `next/link`, `@repo/ui`, `next-auth/react`, and other internal components.
+ - **Code Relationships:** This component is used by `AppbarClient.tsx` to provide a client-side rendered version of the AppBar.
+
+4. **Usage Example:**
+```tsx
+
+```
+This component is typically used at the top level of the application layout.
+
+5. **Technical Notes:**
+ - Uses Framer Motion for subtle animations, enhancing user experience.
+ - Conditionally renders content based on user authentication status.
+
+---
+
+
+
+#### AppbarClient.tsx
+
+*Path: apps/web/components/AppbarClient.tsx*
+
+1. **Purpose:** This component acts as a client-side wrapper for the `Appbar` component. This allows the AppBar to utilize client-side features and APIs.
+
+2. **Key Functionality:**
+ - **`AppbarClient`**: A simple functional component that renders the `Appbar` component.
+ - *Parameters:* None
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Directly returns the `Appbar` component.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports the `Appbar` component from `./Appbar`.
+ - **Code Relationships:** This component is used wherever the `Appbar` is needed on client-side rendered pages. It ensures that the `Appbar` has access to the client-side context.
+
+4. **Usage Example:** This component is used directly in client components where the app bar is needed.
+
+5. **Technical Notes:** The `"use client"` directive at the top signifies that this is a client component.
+
+---
+
+
+
+#### Blog.tsx
+
+*Path: apps/web/components/Blog.tsx*
+
+1. **Purpose:** This component renders blog content fetched from Notion, handles different view modes (legacy and new), and integrates with other components like `BlogAppbar`, `NotionRenderer`, and `TrackTools`.
+
+2. **Key Functionality:**
+ - **`Blog`**: The main functional component.
+ - *Parameters:* `problem` (Problem data with Notion record map), `track` (Track data), `showAppBar` (boolean), `showPagination` (boolean), `isPdfRequested` (boolean), `problemIndex` (number).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Conditionally renders based on `isLegacyMode` state from Recoil. Uses `NotionRenderer` to display Notion content and integrates with `BlogAppbar`, `TrackTools`, and `CustomPagination` for navigation and other functionalities.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `recoil`, `@prisma/client`, `@repo/store`, and other internal components.
+ - **Code Relationships:** This component uses `BlogAppbar` for the app bar specific to blog posts, `NotionRenderer` to render Notion content, `TrackTools` for track-related tools, and `CustomPagination` for pagination.
+
+4. **Usage Example:** This component is used to display individual blog posts within a track.
+
+5. **Technical Notes:**
+ - Uses Recoil for state management (`isLegacyViewMode`).
+ - Handles different view modes based on user preference.
+
+---
+
+
+
+#### BlogAppbar.tsx
+
+*Path: apps/web/components/BlogAppbar.tsx*
+
+1. **Purpose:** This component renders the application bar specific to blog posts, providing navigation, user authentication, and UI mode toggling. It also handles scroll behavior and displays track information.
+
+2. **Key Functionality:**
+ - **`BlogAppbar`**: The main functional component.
+ - *Parameters:* `problem` (Problem data), `track` (Track data), `problemIndex` (number).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `next/navigation` for routing, `next-auth/react` for authentication, `recoil` for state management, `framer-motion` for animations, and `@repo/ui` for UI components. Handles scroll behavior to hide/show the app bar and conditionally renders based on `isLegacyMode`.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from various libraries like `next/link`, `next/navigation`, `next-auth/react`, `recoil`, `framer-motion`, `@repo/ui`, and internal components.
+ - **Code Relationships:** Uses `ModeToggle`, `UserAccountDropDown`, and `CustomPagination` components. Interacts with the `isLegacyViewMode` state in `@repo/store`.
+
+4. **Usage Example:** Used within the `Blog` component to provide context-specific navigation and controls.
+
+5. **Technical Notes:**
+ - Uses debouncing for scroll handling to optimize performance.
+ - Stores view mode preference in local storage.
+ - Uses keyboard navigation for next/previous problem navigation.
+
+---
+
+
+
+#### Categories.tsx
+
+*Path: apps/web/components/Categories.tsx*
+
+1. **Purpose:** This component renders a category selection UI, allowing users to filter content based on categories. It provides both a select dropdown and button-based UI depending on screen size.
+
+2. **Key Functionality:**
+ - **`Categories`**: The main functional component.
+ - *Parameters:* `categories` (array of Category objects).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `@repo/ui` components for the UI and `recoil` for state management. Conditionally renders `SelectCategory` or `ButtonCategory` based on screen size.
+ - **`SelectCategory`**: Renders a select dropdown for category selection.
+ - **`ButtonCategory`**: Renders buttons for category selection.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `recoil` and `@repo/ui`.
+ - **Code Relationships:** Uses the `category` state from `@repo/store`.
+
+4. **Usage Example:** Used wherever category filtering is required.
+
+5. **Technical Notes:**
+ - Uses Recoil for managing the selected category state.
+ - Provides different UI layouts for different screen sizes.
+
+---
+
+
+
+#### CodeBlock.tsx
+
+*Path: apps/web/components/CodeBlock.tsx*
+
+1. **Purpose:** This component renders code blocks with syntax highlighting and a copy-to-clipboard functionality.
+
+2. **Key Functionality:**
+ - **`CodeBlock`**: The main functional component.
+ - *Parameters:* `block` (object containing code block properties).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `highlight.js` for syntax highlighting and provides a copy button using `lucide-react` and `@repo/ui`.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports `highlight.js`, `@repo/ui`, and `lucide-react`.
+
+4. **Usage Example:** Used to display code snippets within blog posts or other content.
+
+5. **Technical Notes:**
+ - Uses `highlight.js` for syntax highlighting.
+ - Provides a user-friendly copy-to-clipboard feature.
+
+---
+
+
+
+#### ContentSearch.tsx
+
+*Path: apps/web/components/ContentSearch.tsx*
+
+1. **Purpose:** This component provides a search dialog to search for content within the application, using Fuse.js for fuzzy searching.
+
+2. **Key Functionality:**
+ - **`ContentSearch`**: The main functional component.
+ - *Parameters:* `tracks` (array of TrackPros objects).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `radix-ui` and `@repo/ui` for UI components, `fuse.js` for fuzzy searching, and `next/link` for navigation. Handles keyboard navigation for search results.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `next/link`, `radix-ui`, `@repo/ui`, and `fuse.js`.
+
+4. **Usage Example:** Used to provide a search interface within the application.
+
+5. **Technical Notes:**
+ - Uses Fuse.js for efficient fuzzy searching.
+ - Implements keyboard navigation for search results.
+ - Uses a deferred value for input to optimize search performance.
+
+---
+
+
+
+#### CustomPagination.tsx
+
+*Path: apps/web/components/CustomPagination.tsx*
+
+1. **Purpose:** This component renders pagination controls for navigating between problems within a track.
+
+2. **Key Functionality:**
+ - **`CustomPagination`**: The main functional component.
+ - *Parameters:* `allProblems` (array of Problem objects), `isAtHeader` (boolean), `problemIndex` (number), `track` (Track object).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `next/link` for navigation and `@repo/ui` for UI components. Provides "Previous" and "Next" buttons.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `next/link`, `@repo/ui`, `@prisma/client`, and `./PageToggle`.
+ - **Code Relationships:** Uses the `PageToggle` component.
+
+4. **Usage Example:** Used within the `Blog` and `BlogAppbar` components for navigation between problems.
+
+5. **Technical Notes:**
+ - Uses `next/link` prefetching for improved navigation performance.
+
+---
+
+
+
+#### EditProblem.tsx
+
+*Path: apps/web/components/EditProblem.tsx*
+
+1. **Purpose:** This component provides an interface for editing problem details, including ID, title, and Notion Doc ID.
+
+2. **Key Functionality:**
+ - **`EditProblem`**: The main functional component.
+ - *Parameters:* `problem` (Problem data).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses state to manage editing mode and problem details. Uses `@repo/ui` components for the UI.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `@prisma/client` and `@repo/ui`.
+
+4. **Usage Example:** Used within an admin interface to edit problem details.
+
+---
+
+
+
+#### ErrorBoundary.tsx
+
+*Path: apps/web/components/ErrorBoundary.tsx*
+
+1. **Purpose:** This component implements an error boundary to catch and handle errors during rendering, preventing the entire application from crashing.
+
+2. **Key Functionality:**
+ - **`ErrorBoundary`**: A class component extending `React.Component`.
+ - *Parameters:* `children` (ReactNode).
+ - *Return type:* `JSX.Element` or a fallback UI.
+ - *Implementation:* Uses `getDerivedStateFromError` and `componentDidCatch` lifecycle methods to catch and handle errors.
+
+3. **Dependencies and Relationships:** None
+
+4. **Usage Example:** Wrap components that might throw errors within this component.
+
+---
+
+
+
+#### Hero.tsx
+
+*Path: apps/web/components/Hero.tsx*
+
+1. **Purpose:** This component renders the hero section of the landing page, including a parallax effect, title, description, and a search bar.
+
+2. **Key Functionality:**
+ - **`Hero`**: The main functional component.
+ - *Parameters:* `tracks` (array of TrackPros objects).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `framer-motion` for animations and `@repo/ui` for UI components. Implements a parallax effect based on mouse position.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `framer-motion`, `@repo/ui`, and `./ContentSearch`.
+ - **Code Relationships:** Uses the `ContentSearch` component.
+
+4. **Usage Example:** Used on the landing page to create an engaging introduction.
+
+5. **Technical Notes:**
+ - Uses `framer-motion` for animations and parallax effect.
+
+---
+
+
+
+#### LessonView.tsx
+
+*Path: apps/web/components/LessonView.tsx*
+
+1. **Purpose:** This component acts as a router for different lesson types (MCQ or Blog), rendering the appropriate component based on the problem type. It also handles authentication checks for premium content.
+
+2. **Key Functionality:**
+ - **`LessonView`**: An async functional component.
+ - *Parameters:* `problem` (Problem data), `track` (Track data), `showAppBar` (boolean), `showPagination` (boolean), `isPdfRequested` (boolean).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Checks user authentication status and renders either `MCQRenderer` or `Blog` component based on `problem.type`.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `next-auth`, `@prisma/client`, and internal components (`Blog`, `MCQRenderer`, `RedirectToLoginCard`, `AppbarClient`).
+ - **Code Relationships:** Uses `Blog`, `MCQRenderer`, `RedirectToLoginCard`, and `AppbarClient` components.
+
+4. **Usage Example:** Used to render individual lesson content within a track.
+
+5. **Technical Notes:**
+ - Handles authentication checks for premium content.
+
+---
+
+
+
+#### Loader.tsx
+
+*Path: apps/web/components/Loader.tsx*
+
+1. **Purpose:** This component renders a loading spinner while content is being fetched or processed.
+
+2. **Key Functionality:**
+ - **`Loader`**: A simple functional component.
+ - *Parameters:* None
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Returns an SVG spinner with animation.
+
+3. **Dependencies and Relationships:** None
+
+---
+
+
+
+#### ModeToggle.tsx
+
+*Path: apps/web/components/ModeToggle.tsx*
+
+1. **Purpose:** This component renders a toggle switch for switching between light and dark modes.
+
+2. **Key Functionality:**
+ - **`ModeToggle`**: The main functional component.
+ - *Parameters:* None
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Uses `next-themes` for managing the theme and `@repo/ui` for UI components. Conditionally renders different toggle styles based on `isLegacyViewMode`.
+
+3. **Dependencies and Relationships:**
+ - **Imports & Usage:** Imports from `next-themes`, `recoil`, `@repo/ui`, and `lucide-react`.
+ - **Code Relationships:** Uses the `isLegacyViewMode` state from `@repo/store`.
+
+4. **Usage Example:** Used in the `Appbar` and `BlogAppbar` components.
+
+5. **Technical Notes:**
+ - Uses `next-themes` for theme management.
+
+---
+
+
+
+#### MultipleOptionChip.tsx
+
+*Path: apps/web/components/MultipleOptionChip.tsx*
+
+1. **Purpose:** This component renders a simple chip displaying a given value, typically used for displaying multiple options or tags.
+
+2. **Key Functionality:**
+ - **`MultipleOptionChip`**: The main functional component.
+ - *Parameters:* `value` (string).
+ - *Return type:* `JSX.Element`
+ - *Implementation:* Returns a styled div containing the value.
+
+3. **Dependencies and Relationships:** None
+
+
+This documentation provides a comprehensive overview of each file's purpose, functionality, dependencies, and relationships within the project. It emphasizes how these files work together to create the web application, highlighting key technical decisions and considerations. This structured approach ensures clarity and maintainability for the project.
+
+---
+
+
+
+#### NotionRenderer.tsx
+
+*Path: apps/web/components/NotionRenderer.tsx*
+
+1. **Purpose:** This component renders Notion content using `react-notion-x`, providing styling and custom components for specific Notion blocks like code blocks. It adapts to the current theme (light/dark) and rendering mode (legacy/new).
+
+2. **Key Functionality:**
+
+ - **`NotionRenderer` (functional component):**
+ - **Parameters:**
+ - `recordMap`: (object) The Notion data structure representing the page content.
+ - **Return Type:** (JSX.Element) The rendered Notion content.
+ - **Implementation:** Uses `react-notion-x`'s `NotionRenderer` to render the `recordMap`. It conditionally applies styling based on `isLegacyMode` for backward compatibility. Custom components, like `CodeBlock`, are passed via the `components` prop to override default rendering for specific Notion block types. The `useTheme` hook provides the current theme for styling. `useRecoilValue(isLegacyViewMode)` determines the rendering mode.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms are present. Errors during rendering might be handled by `react-notion-x` internally.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `react-notion-x`: For rendering Notion content.
+ - `next-themes`: For accessing the current theme.
+ - `recoil`: For state management (`isLegacyViewMode`).
+ - `./CodeBlock`: A custom component for rendering code blocks.
+ - **Code Relationships:** This component is used wherever Notion content needs to be displayed within the application. It depends on the `CodeBlock` component for customized code block rendering. The `isLegacyViewMode` state from `@repo/store` influences its rendering.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - The conditional styling based on `isLegacyMode` suggests a transition phase between two rendering approaches.
+ - The `useMemo` hook optimizes the `components` prop, preventing unnecessary re-renders.
+
+---
+
+
+
+#### PageToggle.tsx
+
+*Path: apps/web/components/PageToggle.tsx*
+
+1. **Purpose:** This component provides a dropdown menu to navigate between different problems within a track.
+
+2. **Key Functionality:**
+
+ - **`PageToggle` (functional component):**
+ - **Parameters:**
+ - `allProblems`: (Array\) An array of all problems in the track.
+ - `isAtHeader`: (boolean, optional) Determines styling based on location.
+ - `track`: (Track) The current track object, including its problems.
+ - **Return Type:** (JSX.Element) The dropdown menu.
+ - **Implementation:** Uses `next/navigation`'s `useParams` to get the current track and problem IDs. It renders a `DropdownMenu` from `@repo/ui` with a list of `DropdownMenuItem`s. Each item links to a specific problem within the track. The `isLegacyViewMode` state from `@repo/store` influences styling.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms. Disabled items prevent navigation to the current problem.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `next/navigation`: For routing and parameter access.
+ - `next/link`: For creating links.
+ - `recoil`: For state management (`isLegacyViewMode`).
+ - `@repo/ui`: For UI components (Button, DropdownMenu, etc.).
+ - `@prisma/client`: For Prisma types (Track, Problem).
+ - `@repo/ui/utils`: For utility functions (likely styling).
+ - `@repo/store`: For application state.
+ - **Code Relationships:** This component is used within track pages to provide navigation between problems. It depends on the `@repo/ui` library for its UI elements and `@repo/store` for state management.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - The `prefetch={true}` prop on the `Link` components optimizes navigation by prefetching the linked pages.
+
+---
+
+
+
+#### Print.tsx
+
+*Path: apps/web/components/Print.tsx*
+
+1. **Purpose:** This component handles printing the current page and automatically closing the print window after completion.
+
+2. **Key Functionality:**
+
+ - **`Print` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** `null` (renders nothing)
+ - **Implementation:** Uses `useEffect` to perform side effects related to printing. It opens all `` elements on the page, adds an `afterprint` event listener to close the window after printing, and then triggers the `print()` function. The `useRouter` hook is likely used for cleanup after printing, potentially redirecting back to the original page.
+ - **Fallback Mechanisms:** No specific fallback mechanisms are implemented. Relies on browser's print functionality.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `react`: For `useEffect` hook.
+ - `next/navigation`: For `useRouter`.
+ - **Code Relationships:** This component is likely used within a page or layout that requires print functionality. It doesn't have direct dependencies on other components in the provided code snippets.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - The `useEffect` hook ensures that the cleanup (removing the event listener) happens when the component unmounts, preventing memory leaks.
+
+---
+
+
+
+#### ProfileChildren.tsx
+
+*Path: apps/web/components/ProfileChildren.tsx*
+
+1. **Purpose:** This component wraps the children components of the profile page, managing the sidebar toggle state and providing theme and context providers.
+
+2. **Key Functionality:**
+
+ - **`ProfileChildren` (functional component):**
+ - **Parameters:**
+ - `children`: (React.ReactNode) The child components to be rendered.
+ - **Return Type:** (JSX.Element) The wrapped children.
+ - **Implementation:** Uses `useRecoilState(profileSidebar)` to manage the sidebar's open/close state. Provides `ThemeProvider` from `next-themes` and custom `Providers` (likely context providers) to its children. A hamburger menu icon is displayed for toggling the sidebar on smaller screens.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `react`: For JSX and component structure.
+ - `./Providers`: Custom context providers.
+ - `recoil`: For state management (`profileSidebar`).
+ - `lucide-react`: For the Menu icon.
+ - `next-themes`: For theme management.
+ - `@repo/store`: For application state.
+ - **Code Relationships:** This component wraps profile-related content and manages shared state and context. It depends on the `Providers` component and the `profileSidebar` state from `@repo/store`.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ {/* Profile content */}
+
+ ```
+
+5. **Technical Notes:**
+ - The conditional className based on `sidebarToggle` controls the layout based on the sidebar's state.
+
+---
+
+
+
+#### ProfileSidebar.tsx
+
+*Path: apps/web/components/ProfileSidebar.tsx*
+
+1. **Purpose:** This component renders the sidebar on the profile page, displaying user information and profile options.
+
+2. **Key Functionality:**
+
+ - **`ProfileSidebar` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** (JSX.Element) The sidebar content.
+ - **Implementation:** Uses `useRecoilValue(profileSidebar)` to determine visibility based on the sidebar toggle state. Displays user information (image, name, email) fetched from `next-auth/react`'s `useSession`. Includes the `ProfileOptions` component for profile-related actions. Conditional styling adapts the sidebar's appearance based on screen size and the `sidebarToggle` state.
+ - **Fallback Mechanisms:** Uses a placeholder icon if the user doesn't have a profile image.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `react`: For JSX and component structure.
+ - `./UserImage`: Component for displaying the user's image.
+ - `lucide-react`: For the UserRound icon.
+ - `./profile/ProfileOptions`: Component for profile options.
+ - `recoil`: For state management (`profileSidebar`).
+ - `next-auth/react`: For user authentication data.
+ - `@repo/store`: For application state.
+ - **Code Relationships:** This component is part of the profile page layout. It depends on the `UserImage`, `ProfileOptions` components, and the `profileSidebar` state from `@repo/store`. It also interacts with `next-auth/react` for user data.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - The conditional styling based on `sidebarToggle` and screen size creates a responsive sidebar experience.
+
+---
+
+
+
+#### Providers.tsx
+
+*Path: apps/web/components/Providers.tsx*
+
+1. **Purpose:** This file provides context providers for Recoil (state management), Next.js themes, and NextAuth.js sessions, wrapping the application's children components. It also includes a toaster for notifications.
+
+2. **Key Functionality:**
+
+ - **`Providers` (functional component):**
+ - **Parameters:**
+ - `children`: (React.ReactNode) The application's content.
+ - **Return Type:** (JSX.Element) The wrapped content.
+ - **Implementation:** Wraps the children with `SessionProvider` (for NextAuth.js), `RecoilRoot` (for Recoil), and a `Toaster` component (likely for notifications).
+ - **Fallback Mechanisms:** No explicit fallback mechanisms.
+
+ - **`ThemeProvider` (functional component):**
+ - **Parameters:** Standard `ThemeProviderProps` from `next-themes`.
+ - **Return Type:** (JSX.Element) The wrapped content.
+ - **Implementation:** A wrapper around `next-themes`'s `ThemeProvider`.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `recoil`: For state management.
+ - `react`: For JSX and component structure.
+ - `next-themes`: For theme management.
+ - `next-auth/react`: For authentication.
+ - `@repo/ui`: For the `Toaster` component.
+ - **Code Relationships:** This file is a crucial part of the application's setup, providing essential context providers. It's used at a high level in the component tree to make these contexts available throughout the app.
+
+4. **Usage Example:**
+
+ ```tsx
+
+
+
+
+ ```
+
+5. **Technical Notes:**
+ - Wrapping the application with these providers ensures consistent state management, theming, and session handling.
+
+---
+
+
+
+#### RedirectToLastSolved.tsx
+
+*Path: apps/web/components/RedirectToLastSolved.tsx*
+
+1. **Purpose:** This component redirects the user to the last solved problem within a given track, or the first problem if none have been solved.
+
+2. **Key Functionality:**
+
+ - **`RedirectToLastSolved` (functional component):**
+ - **Parameters:**
+ - `trackId`: (string) The ID of the track.
+ - **Return Type:** (JSX.Element) A loading indicator while redirecting.
+ - **Implementation:** Uses `useEffect` to call `getFirstProblemForTrack` (not shown in provided code) to get the appropriate problem ID. Then, uses `next/navigation`'s `router.replace` to redirect to the problem page. Displays a `Loader` component while fetching the problem ID and redirecting.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms, but `getFirstProblemForTrack` likely handles cases where no problems exist or no progress has been made.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `./Loader`: A loading indicator component.
+ - `react`: For `useEffect` hook.
+ - `next/navigation`: For routing.
+ - `./utils`: For the `getFirstProblemForTrack` function.
+ - **Code Relationships:** This component is used to manage initial navigation within a track. It depends on the `Loader` component and the `getFirstProblemForTrack` utility function.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - The `router.replace` method prevents adding a new entry to the browser history, creating a cleaner user experience.
+
+---
+
+
+
+#### RedirectToLoginCard.tsx
+
+*Path: apps/web/components/RedirectToLoginCard.tsx*
+
+1. **Purpose:** This component displays a card prompting the user to log in and redirects them to the login page, storing the current URL for redirection after successful login.
+
+2. **Key Functionality:**
+
+ - **`RedirectToLoginCard` (functional component):**
+ - **Parameters:** None
+ - **Return Type:** (JSX.Element) The login prompt card.
+ - **Implementation:** Uses `next/navigation`'s `useRouter` and `usePathname` to get the current route. Stores the current pathname in localStorage under the key "loginRedirectUrl". Renders a `Card` component from `@repo/ui` with a button that redirects to the `/auth` route.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `next/navigation`: For routing and pathname access.
+ - `@repo/ui`: For UI components (Card, Button, etc.).
+ - **Code Relationships:** This component is used to gate protected content and redirect unauthenticated users to the login page.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ ```
+
+5. **Technical Notes:**
+ - Storing the redirect URL in localStorage allows redirecting the user back to the original page after login, even if the application is refreshed or closed during the login process.
+
+---
+
+
+
+#### ScrollToTopWrapper.tsx
+
+*Path: apps/web/components/ScrollToTopWrapper.tsx*
+
+1. **Purpose:** This component wraps its children and provides a "Scroll to Top" button.
+
+2. **Key Functionality:**
+
+ - **`ScrollToTopWrapper` (functional component):**
+ - **Parameters:**
+ - `children`: (React.ReactNode) The content to be wrapped.
+ - **Return Type:** (JSX.Element) The wrapped content with the scroll-to-top button.
+ - **Implementation:** Uses the `react-scroll-to-top` library to render a scroll-to-top button. The `useTheme` hook from `next-themes` is used, but the `resolvedTheme` value isn't actually used in the code.
+ - **Fallback Mechanisms:** No explicit fallback mechanisms. Relies on the `react-scroll-to-top` library's internal functionality.
+
+3. **Dependencies and Relationships:**
+
+ - **Imports & Usage:**
+ - `next-themes`: For theme access (although not used in the current implementation).
+ - `react`: For JSX and component structure.
+ - `react-scroll-to-top`: For the scroll-to-top button.
+ - **Code Relationships:** This component is a layout component that can be used to wrap any part of the application where a scroll-to-top functionality is desired.
+
+4. **Usage Example:**
+
+ ```tsx
+
+ {/* Page content */}
+
+ ```
+
+5. **Technical Notes:**
+ - The `resolvedTheme` from `next-themes` is currently unused. This might indicate future plans for theme-specific styling of the scroll-to-top button.
+
+---
+
+
+
+#### SearchDialog.tsx
+
+*Path: apps/web/components/SearchDialog.tsx*
+
+1. **Purpose:** This component provides a searchable dialog for navigating to specific tracks and problems within the application. It also supports voice search.
+
+2. **Key Functionality:**
+
+ - **`SearchDialog` (functional component):**
+ - **Parameters:**
+ - `tracks`: (Array\