DOCSEARCHbyAlgolia
Submit Docs

DISC Documentation

website·Indexed 31 days ago

https://docs.discnu.org/

Documentation for the DISC Workshop Series Website and the DISCover Program template project. Includes guides on frontend and backend development, Vercel and GitHub Pages deployment, project management via GitHub Projects, and client handoff procedures.

Tokens
16.3K
Snippets
84
Records
142
Agent score
49%

What's inside DISC

  1. Overview of the DISC Workshop Series Website

    The DISC Workshop Series Website is a Next.js-based platform used to host and manage content for the 'Develop & Innovate for Social Change' workshop series. It is designed to provide workshop materials through a responsive interface compatible with all devices.

  2. Understand the frontend project directory structure

    The frontend template uses a modular React architecture. The core source code is located in the src/ directory, organized by functionality to ensure scalability and maintainability.
    frontend/
├── public/           # Static files
├── src/             # Source code
│   ├── assets/      # Static assets (e.g., icons/)
│   ├── common/      # Shared resources (components, contexts, hooks, layouts, utils)
│   ├── pages/       # Page components (e.g., account/, home/, not-found/)
│   ├── App.css      # Global styles
│   └── App.jsx      # Root component
└── README.md        # Documentation

  4. Understand the DISC Website tech stack

    The DISC website is developed using a modern frontend stack focused on TypeScript and React. Key technologies include Next.js 14 (utilizing the App Router), Tailwind CSS for styling, shadcn/ui for UI components, Motion for animations, and D3.js for data visualizations on the landing page.

  5. Implement the component system with shadcn/ui

    The project uses shadcn/ui for its component system. Unlike a traditional library, shadcn/ui components are copied and pasted into the project, providing full control over code and styling without unused bloat. It is built on Radix UI primitives for accessibility (ARIA attributes and keyboard navigation) and is optimized for Next.js Server Components and the App Router.

  6. Implement new features in the frontend

    Follow these steps when adding new features to maintain the project's modular architecture:

    1. Create a new directory in src/pages/ for page-specific components.
    2. Add shared components to src/common/components/.
    3. Create custom hooks in src/common/hooks/ if needed.
    4. Add new contexts in src/common/contexts/ for state management.
    5. Update the routing configuration in App.jsx.

  7. Understand the DISC Workshop Series Website project structure

    The project uses a modular Next.js architecture. Key top-level directories include:

    • /app: Core Next.js application logic and routing.
    • /components: Reusable UI and logic components.
    • /contents: MDX content files organized by section.
    • /lib: Utility functions and shared configurations.
    • /public: Static assets (logos, OG images).
    • /styles: Global CSS and syntax highlighting styles.
    .
├── app/                    # Next.js app directory
│   ├── about/             # About page routing
│   ├── content/           # Content page routing
│   ├── schedule/          # Schedule page routing
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # Reusable components
│   ├── markdown/          # MDX components
│   ├── ui/               # UI components
│   └── contexts/         # React contexts
├── contents/             # MDX content files
│   ├── about/           # About section
│   ├── content/         # Main content
│   └── schedule/        # Schedule content
├── lib/                  # Utilities
├── public/              # Static assets
└── styles/              # Global styles

  8. Add new features to the backend

    To implement new functionality while maintaining the modular architecture, follow these steps:

    1. Create new API endpoint definitions in the src/routes/ directory.
    2. Implement the corresponding business logic in new files within the src/controllers/ directory.
    3. Create any necessary request processing logic in the src/middleware/ directory.
    4. Register the new routes in the main src/server.js file.

  10. Understand the DISCover Program Template Project architecture

    The DISCover Program Template Project provides a standardized web application structure to ensure consistency and quality across team projects. It is composed of two primary components: a React-based Frontend Template (featuring pre-configured routing, styling, and authentication) and an Express.js-based Backend Template (featuring database integration, authentication, and API scaffolding).

  11. Understand the disc-website project directory structure

    The project follows a Next.js application structure. Key directories include:

    • _components/: Contains the main UI components, including interactive visualizations (HeroTreeMap.tsx), page-specific sections in _sections/, and reusable UI elements in ui/.
    • app/: The Next.js app router directory containing global styles (globals.css), custom fonts (fonts/), the root layout (layout.tsx), and the home page (page.tsx).
    • hooks/: Stores custom React hooks for shared logic.
    • lib/: Contains utility libraries and helper functions.
    • utils/: Contains general utility functions and constants.
    • types.ts: Global type definitions for the project.
    . 
├── _components/
│   ├── HeroTreeMap.tsx
│   ├── _sections/
│   └── ui/
├── app/
│   ├── fonts/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── hooks/
├── lib/
├── types.ts
└── utils/