Building a multi-framework dashboard with Astro

1. nanostores

   1 22 7,413 7.8 TypeScript

   A tiny (286 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores

   

   All of these are valid ways of fixing the state management issue, but it's clear that we need to find a common solution that works for all the UI libraries. This is where nanostores comes into play! The description they provide on their GitHub page is simply perfect:

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. react

   2 1 135 6.3 TypeScript

   React integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)

   

   React (@nanostores/react): provides a useStore() Hook to get the store’s value and re-render the component on store’s changes

4. vue

   3 1 74 6.8 TypeScript

   Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)

   

   Vue (@nanostores/vue): provides a useStore() composable function to get the store’s value and re-render the component on store’s changes

5. astro-multi-framework-dashboard

   4 1 26 0.0 TypeScript

   Multi framework dashboard built with Astro

   

   Multi-framework dashboard - GitHub Repository

6. vite

   5 946 81,131 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   When dealing with npm dependencies in Astro, which is built on top of Vite, that are not previously compiled (converted into JavaScript), we have to specify Vite to the property ssr.noExternal in our Astro configuration, inside the vite attribute. If you want to read more about Externals, please refer to the official documentation.

7. Tailwind CSS

   6 1,593 95,402 9.7 TypeScript

   A utility-first CSS framework for rapid UI development.

   

   I also installed Tailwind CSS to create most of the layout for the page, with the prefix option of tw- (this is to prevent clashing classes between Tailwind and Vuetify).

8. svelte-material-ui

   7 35 3,431 5.6 SCSS

   Svelte Material UI Components

   

   As I mentioned at the beginning of this article, we’re using Svelte Material UI. To install it in our project, we have to first add it to our dependencies:

9. recharts

   8 41 27,220 9.9 TypeScript

   Redefined chart library built with React and D3

   

   This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.

10. Material UI

    9 303 98,388 9.9 JavaScript

    Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

    

    React: MUI Core and recharts

11. material-ui-docs

    10 167 339 10.0 JavaScript

    ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository: http://github.com/mui/material-ui.

    

    This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.

12. DummyJSON

    11 29 2,825 7.9 EJS

    DummyJSON.com provides different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favorite framework and library without worrying about writing a backend.

    

    //src/pages/index.astro --- import Layout from '../layouts/Layout.astro'; import type { Product } from '../types'; import ProductTable from '../components/ProductTable.svelte'; import CategoryTags from '../components/CategoryTags.svelte'; import Overview from '../components/Overview.vue'; import CategoryChart from '../components/CategoryChart'; // fetch data const products: Product[] = await fetch('https://dummyjson.com/products') .then((res) => res.json()) .then((res) => res.products); --- + + + + + + + + +

13. astro

    12 653 59,871 10.0 TypeScript

    The web framework for content-driven websites. ⭐️ Star to support our work!

    

Suggest a related project