BeamMP Website (Frontend)

This repository is home for the BeamMP website, this is a rebuild of the website from the ground up using Vue+Vite. We are also making use of Tailwindcss v4.

Tech Stack

• Framework: Vue 3 (vue, vue-router)
• Build: Vite 7 (vite, @vitejs/plugin-vue)
• Styling: Tailwind CSS 4 + tailwindcss-animate, tailwind-merge
• UI Icons/Utils: lucide-vue-next, clsx, class-variance-authority
• Radix-style Components: reka-ui through shadcn-vue
• Composable utilities: @vueuse/core

Theming and Colour Guide

• BeamMP Orange #F36D24
• BeamMP Blue #4470B6
• BeamMP Green #1D9749
• Gray #333333
• Black #000000
• White #FFFFFF

Getting Started

Prerequisites:

• Node.js 22+
• pnpm, npm, or yarn (examples use npm)

Install dependencies and run the dev server:

# from this folder (repo root)
npm install
npm run dev

Build for production and preview locally:

npm run build
npm run preview

Vite will print the local dev URL (usually http://localhost:5173).

Project Scripts

• npm run dev: Start Vite development server
• npm run build: Production build
• npm run preview: Preview the production build locally
• npm run lint: Lint and auto-fix Vue/JS files with ESLint
• npm run format: Format all source files with Prettier

Directory Overview

• src/ – App source (styles, components, pages, routing)
  • src/components/ui/ – UI components (e.g., button, navigation-menu)
  • src/lib/ – Utilities and helpers
  • routes/ - vue-router routes
  • views/ - Pages of the website
• index.html – Vite HTML entry
• tailwind.config.js – Tailwind configuration
• vite.config.js – Vite configuration
• components.json – Shadcn-Vue component registry

Styling and UI

• Tailwind CSS 4 is set up via tailwind.config.js and imported in src/style.css.
• reka-ui and shadcn-vue-style patterns are used for accessible, composable UI.
• lucide-vue-next provides icons.

Adding New UI Components (shadcn-vue)

We’re standardizing on shadcn-vue-compatible components for consistency. Use the CLI to add new components:

npx shadcn-vue@latest add <component>

# examples
npx shadcn-vue@latest add button
npx shadcn-vue@latest add navigation-menu

The CLI reads components.json and will scaffold files under src/components/ui/.

Routing

Use vue-router for navigation. Keep routes co-located with views and prefer lazy-loaded routes for large pages.

Contributing

We welcome contributions! Here’s how to get started.

1) Pick an Issue or Open One

• Browse issues or propose an enhancement/bug. Share context and repro steps.

2) Create a Branch

• Use a descriptive branch name:
  • feature/<short-description>
  • fix/<short-description>
  • docs/<short-description>

3) Dev Environment

• Install deps with npm install and run npm run dev.
• Keep changes scoped and focused; avoid drive-by refactors unless agreed.

4) Code Style & Patterns

• Vue 3 + <script setup> preferred for new components.
• Linting: Run npm run lint before committing to catch errors. ESLint is configured for Vue 3 best practices.
• Formatting: Run npm run format to auto-format code with Prettier (or use an editor extension).
• Type safety: If/when TypeScript is introduced, prefer explicit props and emits.
• Tailwind: Use utility classes; extract variants with class-variance-authority when patterns repeat.
• Accessibility: Prefer accessible primitives (e.g., reka-ui) and keyboard support.
• File naming: PascalCase.vue for components; avoid one-letter variable names.

5) Testing & Checks

• Run the app locally and verify core flows.
• Ensure components render on both light/dark themes if relevant.
• If you add dependencies, update this README and relevant configs.

6) Commit & PR

• Write clear, imperative commit messages, e.g., feat: add NavigationMenu component.
• Open a PR describing the problem, solution, screenshots if UI changes, and any follow-ups.
• Link related issues. Keep PRs small; big changes should be split.

Environment & Configuration

• Tailwind and Vite are preconfigured. If you need globals, add them in vite.config.js.
• For icons, use lucide-vue-next and keep icon size consistent via props/classes.
• If adding new pages, prefer code-splitting with dynamic imports.

FAQ

• “Why Vite?” Fast dev server, optimized builds, and great Vue tooling.
• “Can I use Yarn or pnpm?” Yes—adjust commands accordingly.
• “Design system?” We favor shadcn-vue patterns + Tailwind + reka-ui primitives for consistent UI.

License

Unless otherwise noted in the root repository, this project follows the BeamMP website’s standard license. If clarifications are needed, open an issue and we will update this section.