Reka Dashboard

Build front-end single page application (SPA) in minutes with TypeScript, Vue and Bun.

Important

WORK IN PROGRESS

Important

For windows platform (without wsl), please use windows branch instead.

• This repository:

  • Is NOT a components library.
  • Is NOT a design library.
  • Is NOT a front-end framework.
  • Is NOT confined to any specific design theme, aesthetic, or UX design framework.

• However, it offers:

  • A versatile collection of Vue components built based on shadcn-vue.
  • Full integration with Tailwindcss v4 for utility-first styling.
  • Access to reka-ui for leveraging robust headless components.
  • A design foundation based on shadcn-ui, which is fully customizable to accommodate new design requirements.
  • An extendable design system that can be adapted to align with various UX design frameworks.

• It,

  • Serves as a comprehensive front-end solution equipped with a curated set of tools and technologies.
  • Facilitates rapid prototyping with pre-built, ready-to-integrate components.
  • Emphasizes on component-driven architecture to ensure a uniform and maintainable codebase.
  • Prioritizes web accessibility and compliance with the latest web standards.
  • Includes extensive documentation, examples and visual testing utilites, powered by Storybook.
  • Enhances collaboration between designers and developers through shared component libraries and design systems.
  • Harnesses the most advanced technologies available, enhancing the Developer Experience (DX) and streamlining the development workflow.

This repository hosts a micro-frontend boilerplate and component-based architecture, perfect for creating high-performing Single Page Applications. It offers a foundational front-end layer, crafted with reusable Vue components and styled with Tailwind CSS, leveraging a design system and modern development tools.

Adding a REST API would complete the back-end integration, transforming it into a full web application.

Requirements

• Bun ^v1.2.8

Features

• Opinionated linting and styling, based on @antfu/eslint-config.
• Precommit hook to lint staged files using simple-git-hooks.
• Auto load modules using unplugin-auto-import.
• Auto load Vue components using unplugin-vue-component.
• Preinstalled with @vueuse/core.
• Preinstalled with Pinia store for state management.
• Leverage reka-ui headless component library.
• Implement reusable Vue components from shadcn-vue.
• Uses Tailwindcss v4.
• Uses Vee Validate for form handling.
• Uses Zod for schema validation.
• Uses TanStack Table for tables & datagrids.
• Uses Unovis to handle charts, graphs or data visualization.
• Uses Iconify to manage over 200,000 open source vector icons.
• Uses @internationalized/date to handle date and time manipulation.
• Uses Storybook.js to document and visually test UI components.

Usage

1. Copy the repository,

bunx tiged acfatah/reka-dashboard newproject

2. Include the .vscode directory in your repository to ensure consistent settings between developers. Use git add -f .vscode to force add it, bypassing any ignore rules.

git add -f .vscode

3. Initialize simple-git-hooks,

rm -rf .git/hooks && bunx simple-git-hooks

4. Update and install dependencies

bun update

5. Initialize git repository

git init && git add -A && git commit -m "Initial commit"

6. To start development, run

bun run dev

To read storybook documentation, run

bun run storybook

Recommendation

I suggest forking this repository to create your own version, which you can then customize according to your requirements.

To use your fork, simply replace the github user with your github username and repository with the forked repository name, followed by

bunx tiged your-github-user/reka-dashboard newproject

To incorporate the latest fixes or updates, you can easily pull the most recent changes from the original repository into your fork.