Skip to content

Latest commit

 

History

History
162 lines (113 loc) · 5.65 KB

architecture.md

File metadata and controls

162 lines (113 loc) · 5.65 KB

Project Architecture

This document provides an overview of the architecture for the AIT Lab Website project, including its folder structure, purpose, and key files. This organization ensures clarity, scalability, and maintainability for developers.

Folder and File Structure

ait-lab-next/
├── .next/                   # Build artifacts generated by Next.js
├── app/                     # Next.js App Router and page components
├── components/              # Reusable React components
├── data/                    # JSON files for static and dynamic data
├── docs/                    # Project documentation
├── node_modules/            # Installed npm/yarn dependencies
├── public/                  # Static assets (images, icons, videos)
├── types/                   # TypeScript type definitions
├── .gitignore               # Git ignored files and folders
├── next-env.d.ts            # Next.js TypeScript environment
├── next-sitemap.config.js   # Sitemap configuration
├── next.config.ts           # Next.js configuration file
├── package.json             # Project metadata and dependencies
├── README.md                # Project overview documentation
├── tsconfig.json            # TypeScript configuration
├── yarn.lock                # Yarn lock file for dependencies

Detailed Folder Description

1. .next/

  • Purpose: Contains the build artifacts generated by Next.js during development and production builds.
  • Do not edit manually.

2. app/

  • Purpose: Houses the Next.js App Router and page-specific components.
  • Key Subfolders and Files:
    • about/, news/, teams/: Contain the pages for their respective sections.
    • layout.tsx: Defines the global layout for pages (e.g., shared Navbar/Footer).
    • page.tsx: The homepage entry point.
    • theme.ts: Theme configuration for the project.

3. components/

  • Purpose: Contains reusable React components for UI and functionality.
  • Key Files:
    • Global Components:
      • Navbar.tsx: The navigation bar used across the site.
      • Footer.tsx: The footer used across the site.
      • ScrollToTop.tsx: Adds a "scroll to top" button for user convenience.
    • Homepage Components (in components/Homepage):
      • Hero.tsx: The hero section for the homepage.
      • ProjectsSection.tsx: Displays projects on the homepage.
      • RecentNews.tsx: Shows recent news on the homepage.
    • Specialized Components:
      • GrantCard.tsx: Displays information about individual grants.
      • ProjectCard.tsx: Displays project summaries in card format.
      • TeamProfileModal.tsx: Displays detailed team member profiles in a modal.

4. data/

  • Purpose: Contains JSON files that serve as the data sources for various sections.
  • Key Files:
    • porjs_and_grants.json: Details about all projects and grants (updated).
    • news.json: Contains news articles to display on the website.
    • Teams_Data.json: Data about team members for the Teams section.
    • courses.json: Information about courses related to the lab.

5. docs/

  • Purpose: Contains project documentation.
  • Key Files:
    • installation.md: Installation guide for developers.
    • components.md: Overview of all components and their functionality.
    • architecture.md: (this file) Detailed explanation of the project structure.

6. node_modules/

  • Purpose: Stores installed dependencies from npm/yarn.
  • Do not edit manually.

7. public/

  • Purpose: Stores static assets that are publicly accessible.
  • Key Files:
    • img/: Subfolder for images used in the project.
    • AIT_Favicon.png: The favicon for the site.
    • sitemap.xml: Auto-generated sitemap for SEO purposes.
    • robots.txt: Instructions for web crawlers.
    • manifest.json: Web app manifest file for PWA support.

8. types/

  • Purpose: Contains custom TypeScript type definitions for better type safety.
  • Key Files:
    • ProjectsAndGrants.ts: Defines types for projects and grants data.
    • TeamMember.ts: Defines types for team member data.

9. Configuration Files

  • .gitignore: Specifies files and folders to exclude from Git version control.
  • next-env.d.ts: TypeScript types for Next.js-specific features.
  • next-sitemap.config.js: Configures the generation of sitemaps.
  • next.config.ts: Next.js configuration file for customizing project settings.
  • tsconfig.json: TypeScript configuration file to enforce strict typing and code standards.

Design Philosophy

Scalability

  • Folder structure separates global components from page-specific components, making it easy to maintain and extend.

Reusability

  • Common elements like Navbar and Footer are kept in components/ to ensure they're reusable throughout the site.

Data-Driven Design

  • Static data (e.g., projects.json, news.json) is stored in the data/ folder to decouple logic and UI.

Type Safety

  • TypeScript is used extensively to minimize runtime errors and improve developer experience.

Development Workflow

  1. Add New Pages:

    • Add a new folder under app/ and create a page.tsx file.

  2. Add New Components:

    • Create a new .tsx file under components/.
    • If it’s page-specific, place it under a subfolder (e.g., components/Homepage).

  3. Add New Data:

    • Update or add a new JSON file in the data/ folder.
    • Use TypeScript definitions from types/ for validation.