DPDash

🌀 Built with Flowbite

The interactive components such as the navbars, modals, drawers, and tooltips are all based on the popular open-source component library called Flowbite which enables us to use these elements by creating more complex set of pages and widgets inside a fully-fledged admin dashboard template.

💨 Tailwind CSS utility classes

All of the pages, widgets, and components are solely based on the utility-first classes from Tailwind CSS and it is compatible with the latest v3.x of the technology by automatically purging all of the classes based on the template paths.

📚 Flowbite documentation

If you want to use this project we recommend to also study the component library that we used to build this dashboard because you can use even more components from that library to enhance the examples that we’ve coded here already.

👨‍🚀 Development

⚙️ Workflow

This product is built using the following widely used technologies:

Tailwind CSS: tailwindcss.com
Flowbite: flowbite.com
Astro: astro.build

🚀 Quick start

Clone this repository or download the ZIP file
Make sure that you have Node.js and NPM, PNPM or Yarn installed
Install the project dependencies from the package.json file:

pnpm install
# or
npm install
# or
yarn

PNPM is the package manager of choice for illustration, but you can use what you want.

Launch the Astro local development server on localhost:2121 by running the following command:

pnpm run dev

You can also build the project and get the distribution files inside the dist/ folder by running:

pnpm run build

Then, you can preview the generated build with a local web server:

pnpm run preview

For deployment, see the GitHub workflow, where you can plug your target (pre-configured for GitHub pages). See docs.astro.build/en/guides/deploy

Website is configured for static deployment, but you can flip it to Server-Side rendering by simply uncommenting output: "server" in the ./astro.config.mjs.

🛠 Tools

Efforts have been put on fast onboarding and developer experience.

This project comes with extensive support for TypeScript, Astro, Tailwind, and VS Code.
It is configured with sensible defaults, a bit of opinions, plus some tricks to make it plays nice together.

TypeScript: strictest Astro’s settings. Full-stack, type-safe code base
ESLint: featuring astro-eslint-parser + eslint-plugin-astro
Prettier: featuring prettier-plugin-astro (bundled with astro)
Editorconfig: conforming with prettier
VS Code: extensions recommendations, tooling settings
Tailwind: Astro integration (using Vite and PostCSS)
Flowbite: dependencies (core, typography), settings
GitHub: a pre-configured workflow for deployment (using PNPM cache)
Sandboxes: project is tested against and fully compatible with web containers