Welcome to the Game of Thrones 2025 repository! This document serves as a guide to help you understand the structure, conventions, and best practices for contributing to this project.
- Folder Structure
- Naming Conventions
- Development Guidelines
- Best Practices for Next.js Development
- Coding Standards
- How to Contribute
The repository follows a modular structure to ensure clarity and ease of maintenance:
Contains the source code for the application.
-
app
: Entry point of the application.components
: Shared components categorized into:common
: Generic components reused across the app.home
: Components specific to the home page.
-
lib
: Contains business logic and application-specific utilities.actions
: Functions that handle user or system actions.stores
: State management logic. Each store should be unique and include various reducers with their respective actions.types
: TypeScript types and interfaces.
-
utils
: General-purpose utility functions and constants.constraints
: Constraints or validation rules.functions
: Helper functions used across the app.
Each folder uses a barrel export pattern via index.ts
files to centralize exports. This ensures cleaner and more manageable imports throughout the project.
-
Files and Folders
- Use
camelCase
for files (e.g.,getUserData.ts
). - Use
kebab-case
for folder names (e.g.,node-modules
).
- Use
-
Components
- React components should use
PascalCase
(e.g.,Hero.tsx
).
- React components should use
-
Variables and Constants
- Use
camelCase
for variables. - Use
UPPER_CASE
for constants (e.g.,MAX_RETRIES
).
- Use
-
Types
- Use
PascalCase
for TypeScript types and interfaces.
- Use
-
Setup
- Install pnpm (if not installed) using npm
npm install -g pnpm
. - Install dependencies using
pnpm install
. - Start the development server using
pnpm dev
.
- Install pnpm (if not installed) using npm
-
Branching
- Follow the Git branching model:
main
: Stable production-ready code.feature/*
: New feature development.bugfix/*
: Bug fixes.
- Follow the Git branching model:
-
Testing
- Ensure all features are tested before raising a pull request.
-
Documentation
- Add comments for all complex functions.
- Update the README for significant changes in functionality.
-
Next.js Pages
- As this is a Next.js project, always strive to render
page.tsx
components in a server-side environment to leverage Next.js server-side rendering (SSR) capabilities.
- As this is a Next.js project, always strive to render
-
Search Engine Optimization (SEO)
- Use constructMetaData function to include meta tags for title, description, and other SEO attributes.
- Ensure each page has a unique and descriptive title.
-
Image Optimization
- Use the Next.js
<Image>
component to automatically optimize images. - Provide appropriate
alt
text for all images to improve accessibility and SEO.
- Use the Next.js
-
Code Splitting
- Leverage dynamic imports using
next/dynamic
for large components or modules that are not critical during initial page load.
- Leverage dynamic imports using
-
Environment Variables
- Store sensitive or environment-specific configurations in a
.env.local
file. - Never commit
.env.local
to the repository.
- Store sensitive or environment-specific configurations in a
-
TypeScript
- Strict type checking is enabled. Ensure all variables and functions have proper types.
-
Linting and Formatting
- Run
pnpm lint
to check for linting errors. - Run
pnpm format
to auto-format code using Prettier. - Configure Prettier with the following settings in
package.json
or.prettierrc
:{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "all" }
- Run
-
Folder Imports
- Use
index.ts
files to centralize exports for folders. For example:// lib/actions/index.ts export * from './user';
- Use
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Commit changes with meaningful messages.
- Push your changes and create a pull request.
- Ensure the pull request passes all CI checks.