Building a multi-framework dashboard with Astro

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - 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.
surveyjs.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.
getstream.io
featured
  1. nanostores

    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

    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.

    SurveyJS logo
  3. react

    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

    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

    Multi framework dashboard built with Astro

    Multi-framework dashboard - GitHub Repository

  6. vite

    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

    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

    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

    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.

    Stream logo
  10. recharts

    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

    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

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

    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

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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • The Ultimate Comparison: Ant Design vs Material# Ant Design vs Material UI: Which React UI Library to Choose

    1 project | dev.to | 19 Jul 2023
  • MUI finally adds "use client" to their components, but...

    1 project | /r/reactjs | 11 Jul 2023
  • React and Vite - Why is still loading other component not imported

    1 project | /r/reactjs | 24 Jun 2023
  • Please Grill Me On My React "Take Home Assessment"

    1 project | /r/reactjs | 24 Jun 2023
  • MUI start prepending "use client" to their code

    1 project | /r/reactjs | 22 Jun 2023

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?