Flowbite Astro Admin Dashboard

The src/components directory contains generic, composable, and reusable UI components extracted from the project's modules. These components are designed to be used directly in your Astro pages or other components to build consistent interfaces.

Commonly used components include:

• <Button /> with a variant prop to control styling.
• <Checkbox /> for form inputs.

These components abstract away the underlying Flowbite and Tailwind CSS implementation details, providing a clean API for building the dashboard UI.

// Example usage of extracted components
<Button variant="primary">Click Me</Button>
<Checkbox />

The project is optimized for a modern TypeScript-first development experience with the following tools configured:

• TypeScript: Strict settings for a full-stack, type-safe codebase.
• Linting & Formatting: ESLint (with astro-eslint-parser and eslint-plugin-astro) and Prettier (with prettier-plugin-astro).
• Styling: Tailwind CSS integrated via Astro (using Vite and PostCSS) and Flowbite dependencies.
• Editor Support: Pre-configured VS Code settings and extension recommendations.

The dashboard includes a variety of pre-built pages that you can use as templates or reference for your own implementation. Key page categories include:

• Dashboards: Standard dashboard view and a Stacked Layout.
• CRUD Operations: Dedicated layouts for managing Products and Users.
• Authentication: Login, Register, Reset Password, Forgot Password, and Profile Lock pages.
• System Pages: Settings, Pricing, Maintenance, 404 Not Found, and 500 Server Error pages.
• Playground: A sidebar playground for testing components.

You can view the Live Preview to see these pages in action.

This dashboard is built using a specific stack of technologies to ensure high customizability and performance:

• Flowbite: Used for interactive components like navbars, modals, drawers, and tooltips. It is recommended to study the Flowbite documentation to leverage even more components.
• Tailwind CSS (v3.x): All styling is handled via utility-first classes. The template is configured to automatically purge unused classes based on template paths to keep the production CSS small.
• ApexCharts: Used for advanced data visualization components (charts/widgets).
• Flowbite Design System: All custom components are designed based on the Flowbite Figma design system.

The project follows a specific organization for components, data, and logic:

• data/: Static data sources (e.g., JSON files for REST).
• src/app/: Application-wide components (.astro).
• src/assets/: Transformable assets (e.g., SVG).
• src/components/: Simple, atomic UI elements (.astro).
• src/lib/: Utilities such as Database or API helpers (.ts).
• src/modules/: Complex views composed of multiple elements (.astro).
• src/pages/: File-based client routes (.astro).
• src/pages/api/: Catch-all endpoint for CRUD operations ([...entities].ts).
• src/services/: Server-side CRUD operations (.ts).
• src/types/: Data entity type definitions (.ts).

Follow these steps to set up the project locally:

1. Clone or download the repository.
2. Install dependencies using your preferred package manager (PNPM is recommended):

   pnpm install
   # or
   npm install
   # or
   yarn

3. Start the development server to view the dashboard at localhost:2121:

   pnpm run dev

Building and Previewing:

• To generate distribution files in the dist/ folder: pnpm run build
• To preview the production build locally: pnpm run preview

By default, the website is configured for static deployment. To switch to Server-Side Rendering (SSR), open ./astro.config.mjs and uncomment the output: "server" setting.

// ./astro.config.mjs
export default defineConfig({
  output: "server",
  // ... other config
});

By default, the dashboard is configured to randomize data. If you want to source data exclusively from the local ./data directory and disable the randomization layer, set the RANDOMIZE environment variable to false in your environment configuration.

# Example: setting the environment variable to disable randomization
RANDOMIZE=false npm run dev

The dashboard uses several global constants for routing and site metadata. You can control the behavior of data sourcing via environment variables.

Environment Variables

• import.meta.env.SITE: The base URL of the site.
• import.meta.env.BASE_URL: The base path for the application.
• import.meta.env.RANDOMIZE: A boolean flag. If set to false, the RANDOMIZE constant will be false, disabling the randomization layer and forcing the application to source data entirely from the ./data directory.

The getProducts function retrieves a list of products from the local static JSON data. It accepts an optional randomize boolean parameter which, when set to true, uses @faker-js/faker to overwrite the price, technology, and description fields of each product with randomized values. This is useful for testing UI layouts with varying content lengths and values.

By default, the function uses the value of the RANDOMIZE constant from the application configuration.

import { getProducts } from '../services/products.js';

// Returns static data (default behavior)
const staticProducts = getProducts();

// Returns data with randomized price, technology, and description
const randomizedProducts = getProducts(true);

The getUsers function retrieves a list of users. It can return either the static data from the local JSON file or a randomized version of that data using @faker-js/faker for testing or demonstration purposes.

Parameters

• randomize (boolean): Determines whether to return the original static data or generate randomized user details (name, email, position, and country). This defaults to the value of the RANDOMIZE constant.

Returns

• Users: An array of user objects containing name, email, position, and country fields.

import { getUsers } from '../services/users.js';

// Get static user data
const staticUsers = getUsers(false);

// Get randomized user data
const randomUsers = getUsers(true);