Building a multi-framework dashboard with Astro

1. nanostores

   1 20 6,314 7.6 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. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.

   

3. react

   2 1 110 7.2 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 61 6.4 JavaScript

   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 25 0.0 TypeScript

   Multi framework dashboard built with Astro

   

   Multi-framework dashboard - GitHub Repository

6. vite

   5 912 73,961 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,517 88,735 9.9 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,374 8.9 Svelte

   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. Stream

   getstream.io featured

   Stream - Scalable APIs for Chat, Feeds, Moderation, & Video. Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.

   

10. recharts

    8 39 25,511 9.8 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.

11. Material UI

    9 301 96,025 9.9 TypeScript

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

    

    React: MUI Core and recharts

12. material-ui-docs

    10 160 334 9.9 TypeScript

    ⚠️ 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.

13. DummyJSON

    11 25 2,345 7.4 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); --- + + + + + + + + +

14. astro

    12 605 52,037 10.0 TypeScript

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

    

Suggest a related project