Getting Started

1. Clone the Repository

You can clone this repository using one of the following methods:

a. Using Terminal (Bash, etc.)

git clone https://github.com/Tokenzrey/Boilerplate-NextJS.git

b. Using GitHub Desktop

Follow the instructions on GitHub Desktop to clone the repository.

---

2. Install Dependencies

It is highly recommended to use pnpm to install dependencies, as it ensures that Husky hooks and other tooling work properly.

pnpm install

---

3. Run the Development Server

Start the development server with the following command:

pnpm dev

Open your browser and navigate to http://localhost:3000 to view the application. The main entry point is located at src/app/page.tsx (for App Router).

Berikut dokumentasi yang lebih ringkas dan rapi mengenai struktur folder proyek:

---

Folder structure

This documentation explains what each folder does in the project.

src
Contains the entire application source code.

• app/ → Handles routing and application pages.
• components/ → Contains reusable UI components.
• constant/ → Stores constant values used in the application.
• lib/ → Contains helper and utility functions, including authentication.
• styles/ → Stores styling and theme related files.
• types/ → Defines TypeScript types for entities in the application.

---

Commit Message Convention

This project follows Conventional Commits. Commit messages are enforced using Husky and commitlint to maintain consistency.

Commit Message Format

<type>(optional scope): <description>

Example:

feat(pre-event): add speakers section

Available Types

• feat → New feature or removal of a feature
  Example: feat: add table on landing page
• fix → Bug fixes
  Example: fix: correct overflow issue in mobile view
• docs → Documentation updates
  Example: docs: update README.md
• style → Code style updates (formatting, import reordering, etc.) without affecting logic
• chore → Dependency updates or maintenance tasks
• refactor → Code refactoring without changing functionality
• ci → Updates to GitHub workflows, Husky, or CI/CD configurations
• test → Updates to tests or testing configurations
• revert → Reverting previous commits
• perf → Performance improvements
• vercel → Triggering a Vercel deployment
  Example: vercel: trigger deployment

Additional Guidelines

• Optional Scope:
  Specify a scope if needed (e.g., feat(pre-event): add date label). Omit if not applicable.
• Description:
  Provide a concise yet detailed explanation of the changes.
• Formatting:
  • Use the imperative mood (e.g., add, not added).
  • Start with a lowercase letter.
  • Do not end with a full stop.
• Multiple Changes:
  Commit changes separately if multiple unrelated changes are made.

---

Testing and Quality Checks

TypeScript Type Checking

Ensure your code is type-safe:

pnpm typecheck

Linting

Check your code quality with ESLint:

pnpm lint:strict

Prettier

Ensure consistent code formatting:

pnpm format:check

---

Deployment

Each pull request will automatically trigger a preview deployment on Vercel. Once the pull request is closed or merged, the preview deployment is automatically removed. This enables you to test changes in a live environment before merging into the main branch.

---

Resources

• Next.js Documentation: https://nextjs.org/docs
• Tailwind CSS: https://tailwindcss.com
• pnpm: https://pnpm.io
• Conventional Commits: https://www.conventionalcommits.org

---