This is the official frontend repository for the Roku Bot website. Roku is a multipurpose Discord bot designed to keep servers safe, entertained, and active with features like moderation, automation, leveling, and more.
This project is built using modern web technologies to ensure performance, scalability, and a premium user experience.
- Framework: React with TypeScript
- Build Tool: Vite
- Styling: SCSS (Sass) with CSS Modules / BEM naming convention.
- Icons: FontAwesome (via
@fortawesome/fontawesome-free)
We welcome contributions! Please follow these steps to get started:
- Fork the repository to your own GitHub account.
- Clone the repository to your local machine:
git clone https://github.com/your-username/roku-website-frontend.git cd roku-website-frontend - Install dependencies:
npm install
- Start the development server:
npm run dev
- Make your changes and test them locally.
- Commit your changes with descriptive messages.
- Push to your fork and open a Pull Request (PR) to the main repository.
To maintain code quality and consistency, please adhere to the following rules:
- NO TAILWIND CSS: Do not use Tailwind CSS or any other utility-first CSS framework.
- Use SCSS: All styling must be done using SCSS.
- CSS Custom Properties: Use CSS variables (defined in
src/styles/_variables.scss) for colors, fonts, and spacing to support theming (Light/Dark mode). - Structure: Follow the existing directory structure in
src/styles/. Create new partials for new components and import them insrc/styles/main.scss.
- Keep components small, focused, and reusable.
- Place component files in
src/components/{category}/. - Use TypeScript interfaces for props.
- Use FontAwesome icons.
- Do not introduce new icon libraries (like Tabler Icons or Heroicons) unless absolutely necessary and discussed first.
- Ensure your code passes linting (
npm run lint). - Fix any build errors before submitting a PR (
npm run build).
This project is licensed under the Apache License 2.0. See the LICENSE file for details.