Reka Dashboard

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

Important

WORK IN PROGRESS

• This repository,

  • is NOT a components library.
  • is NOT a design library.
  • is NOT a front-end framework.
  • does NOT tied to a specific design.
  • does NOT tied to any spedific UX design framework or library.

• But instead,

  • a collection of reusable Vue components, implemented using shadcn-vue.
  • uses Tailwindcss v4.
  • leverage reka-ui headless components library.
  • uses shadcn-ui as the base design but can be modified to adapt new design.
  • provides a design system adaptable to any UX design framework.

• It,

  • promotes accessibility and adherence to web standards.
  • focuses on component-driven development for consistency and maintainability.
  • supports rapid prototyping with pre-built, ready-made components.
  • includes extensive documentation, examples and visual testing using Storybook.
  • improve collaboration between design and development teams.
  • leverage latest cutting edge bleeding edge technology that improve DX and development speed.

This repository hosts a micro-frontend boilerplate 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

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.