Key Tech Stack

An overview of the tech stack KIRAI was built with.

Key Tech Stack

KIRAI is built with a carefully chosen stack that balances simplicity, performance, and developer experience. All decisions reflect the code and config files directly found in the repository.

---

React with TypeScript

The entire project is written in TypeScript using React functional components. This ensures type safety, better developer tooling, and more robust code. Components declare explicit interfaces for their props and internal state, which improves maintainability and catches errors early.

Example:

import React from 'react';

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => (
  <button
    className="px-4 py-2 rounded bg-primary hover:bg-primary-dark text-white"
    onClick={onClick}
  >
    {children}
  </button>
);

export default Button;

---

TailwindCSS for Styling

All UI styling leverages TailwindCSS utility classes embedded directly inside JSX. The project extends Tailwind’s default configuration via tailwind.config.ts, where custom colors, fonts, and breakpoints are defined.

Sample excerpt from tailwind.config.ts:

import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#6B46C1',
        'primary-dark': '#553C9A',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

export default config;

---

Vite Build Tool

The project uses Vite as the build and development tool. Vite provides fast hot module replacement during development and optimized production builds with minimal configuration.

Defined scripts in package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

---

Internal Navigation (No React Router)

Rather than using React Router or another external routing library, KIRAI manages navigation internally through React’s state and conditional rendering.

The root App.tsx component maintains which page is active and renders the corresponding page component accordingly.

Simplified snippet:

const [activePage, setActivePage] = React.useState<'dashboard' | 'settings'>('dashboard');

return (
  <>
    <Sidebar onNavigate={setActivePage} />
    {activePage === 'dashboard' && <Dashboard />}
    {activePage === 'settings' && <Settings />}
  </>
);

---

React Hooks & State

State management relies purely on React’s built-in hooks like useState, useContext, and useEffect. No external global state libraries are used, keeping the project lightweight and focused.

---

Project Structure Highlights

• /src/components: Reusable UI components

• /src/hooks: Custom React hooks

• /src/layouts: Layout elements like sidebars and navbars

• /src/pages: Individual pages (Dashboard, Settings, etc.)

• /src/styles: Tailwind config and additional styling

---

The tech stack reflects the project's simplicity and focus on clean, maintainable code with modern tools, perfectly suited for small to medium-scale React dashboard applications.