Main Website CMS
This document provides a comprehensive overview of the RISTEK Main Website Content Management System (CMS). It's designed to help developers understand the project's structure, components, and overall architecture.
📁 Folder Structure
The project follows a standard Next.js app router structure:
ristekcsui/main-website-cms/
├── .github/
│ └── workflows/
│ ├── deploy.yaml
│ └── preview.yaml
├── public/
│ ├── decorators/
│ └── logo/
├── src/
│ ├── app/
│ │ ├── (routes)/
│ │ │ ├── (auth)/
│ │ │ │ ├── signin/
│ │ │ │ └── signout/
│ │ │ └── (base)/
│ │ │ ├── achievement/
│ │ │ ├── client/
│ │ │ ├── event/
│ │ │ ├── member/
│ │ │ ├── partnership/
│ │ │ ├── product/
│ │ │ ├── program/
│ │ │ ├── project/
│ │ │ └── sig/
│ │ └── api/
│ │ ├── auth/
│ │ │ └── [...nextauth]/
│ │ └── s3/
│ │ └── upload-image/
│ ├── components/
│ │ ├── atoms/
│ │ ├── organisms/
│ │ ├── templates/
│ │ └── ui/
│ ├── constant/
│ ├── features/
│ │ ├── cms/
│ │ └── s3/
│ ├── hooks/
│ ├── lib/
│ │ ├── next-auth/
│ │ ├── redux/
│ │ ├── s3/
│ │ └── zod/
│ ├── providers/
│ ├── schema/
│ └── types/
├── .env
├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package.json
└── tsconfig.json
.github/workflows: Contains CI/CD configurations for deploying to Vercel.public: Static assets like logos and decorators.src/app/(routes): Defines the application's routes using the Next.js app router.(auth): Authentication-related pages (signin, signout).(base): The main application pages after authentication.
src/app/api: API routes for authentication and file uploads.src/components: Reusable React components, organized intoatoms,organisms, andtemplates.src/constant: Contains constant values used throughout the application.src/features: Redux Toolkit slices and API configurations.src/hooks: Custom React hooks.src/lib: Utility functions, authentication logic, and Redux store configuration.src/providers: React context providers.src/schema: Zod schemas for data validation.src/types: TypeScript type definitions.
🔐 Environment Variables
The application uses environment variables for configuration. These are defined in a .env file.
| Variable Name | Description | Expected Format |
|---|---|---|
NEXT_PUBLIC_API_BASE_URL | The base URL for the backend API. | URL |
NEXT_PUBLIC_CDN_URL | The base URL for the Content Delivery Network (CDN). | URL |
CDN_PROTOCOL | The protocol for the CDN (e.g., https). | http or https |
CDN_HOSTNAME | The hostname for the CDN. | string |
AWS_S3_REGION | The AWS region for the S3 bucket. | string |
AWS_S3_ACCESS_KEY | The access key for the AWS S3 bucket. | string |
AWS_S3_SECRET_KEY | The secret key for the AWS S3 bucket. | string |
AWS_S3_BUCKET_NAME | The name of the AWS S3 bucket. | string |
AWS_S3_FOLDER_PREFIX | The folder prefix for S3 objects. | string |
NEXTAUTH_SECRET | The secret for NextAuth.js. | string |
NEXTAUTH_URL | The URL for NextAuth.js. | URL |
API Endpoints
The application has the following API endpoints:
| Method | Endpoint | Description |
|---|---|---|
POST | /api/auth/[...nextauth] | Handles user authentication using NextAuth.js. It includes credential-based authentication and token refresh logic. |
GET | /api/auth/[...nextauth] | Handles user authentication using NextAuth.js, including getting the session. |
POST | /api/s3/upload-image | Handles image uploads to an AWS S3 bucket. It takes a file in a FormData object, uploads it to S3, and returns the image key. |
🧭 Request Flow (Login)
This diagram illustrates the login process for a user.
🧱 Component Interaction
This diagram shows how the main components of the application interact with each other.
🗄️ Database Schema (Simplified ER Diagram)
This is a simplified ER diagram representing the main data models and their relationships.