Main Website
This document provides a comprehensive overview of the Ristek CSUI main website codebase.
📖 Table of Contents
- 🔐 Environment Variables
- 📁 Folder Structure
- 🚀 Main Entry Points
- 🌐 Routing
- 🔄 Request Flow (Client Registration)
- 🧩 Component Interaction
- 🗄️ Data Models (ER Diagram)
🔐 Environment Variables
These are the environment variables used in the project, primarily for connecting to external services.
| Variable Name | Description | Expected Format |
|---|---|---|
NEXT_PUBLIC_API_URL | The base URL for the Ristek API. | URL |
NEXT_PUBLIC_CDN_HOSTNAME | The hostname for the Content Delivery Network (CDN) to serve images. | URL |
AIRTABLE_BEARER_TOKEN | The bearer token for accessing the Airtable API for older data. | Token |
AIRTABLE_NEW_BEARER_TOKEN | The bearer token for accessing the Airtable API for newer data. | Token |
NEXT_PUBLIC_AWS_ACCESS_KEY_ID | The access key ID for the AWS S3 bucket used for file uploads. | String |
NEXT_PUBLIC_AWS_SECRET_KEY_VALUE | The secret access key for the AWS S3 bucket. | String |
NEXT_PUBLIC_AWS_REGION | The AWS region for the S3 bucket. | String |
NEXT_PUBLIC_AWS_BUCKET | The name of the AWS S3 bucket. | String |
📁 Folder Structure
The project follows a standard Next.js structure.
ristekcsui/main-website/
├── components/
│ ├── container/
│ ├── elements/
│ └── icons/
├── config/
├── hooks/
├── pages/
│ ├── api/
│ └── ...
├── public/
├── styles/
├── .env
├── next.config.js
└── package.json
components/: Contains reusable React components.container/: Larger components that compose smaller components, often tied to specific pages.elements/: Atomic, reusable components like buttons, inputs, and cards.icons/: SVG icon components.
config/: Configuration files, such as Airtable and CDN settings.hooks/: Custom React hooks for functionality like file uploads and window size detection.pages/: Represents the routes of the application. Each file in this directory corresponds to a URL path.api/: Defines API endpoints.
public/: Static assets like images and fonts.styles/: Global styles and CSS modules.
🚀 Main Entry Points
The main entry points of the application are:
pages/_app.tsx: The main application component that wraps all pages. It's used for layout, global styles, and managing state across pages.pages/index.tsx: The homepage of the website.pages/about-us.tsx: The "About Us" page.pages/events.tsx: The "Events" page.pages/portfolio.tsx: The "Portfolio" page.pages/client-registration/index.tsx: The form for new clients to register.pages/partnership-registration/index.tsx: The form for potential partners to register.
🌐 Routing
The application uses Next.js's file-system-based routing. Here are some of the key routes:
| Route | File | Description |
|---|---|---|
/ | pages/index.tsx | The homepage. |
/about-us | pages/about-us.tsx | Displays information about Ristek, its vision, mission, achievements, and alumni. |
/events | pages/events.tsx | Lists all Ristek events. |
/portfolio | pages/portfolio.tsx | Showcases Ristek's internal and external projects. |
/client-registration | pages/client-registration/index.tsx | A form for potential clients to submit project proposals. |
/client-registration/success | pages/client-registration/success.tsx | A success page displayed after a client successfully submits a proposal. |
/partnership-registration | pages/partnership-registration/index.tsx | A form for potential partners to express interest in collaboration. |
/partnership-registration/success | pages/partnership-registration/success.tsx | A success page displayed after a partner successfully submits the form. |
/game | pages/game.tsx | A page to play games developed by Ristek. |
🔄 Request Flow (Client Registration)
This diagram illustrates the process of a client registering a project.
🧩 Component Interaction
This diagram shows how the main components of the homepage interact.
🗄️ Data Models (ER Diagram)
This ER diagram outlines the main data models used in the application.