Skip to content

michaelkolesidis/material-widgets

Repository files navigation

Leaf logo

Material Widgets

A collection of ecological material widgets.

Screenshot

Description

TypeScript has been used as the main programming language, providing a robust foundation for enforcing type safety throughout the codebase. The user interface is created using React along with MUI (Material UI), a versatile component library.

To manage the application's state in a predictable and efficient manner, a combination of Zustand and Immer has been used. Zustand allows the creation of an immutable global state, serving as a single source of truth for the application. Immer enhances the state management process by enabling the creation of immutable data structures in a more intuitive and concise manner.

The rendering process is characterized by a unidirectional flow of data. As data is fetched from the external API, it is saved into the global immutable state. This ensures that the application maintains a consistent and synchronized representation of the data across all components. The widget components receive their properties and settings from this global state. When a change in settings occurs within a widget component, the global state is updated first. Subsequently, this modification triggers the re-rendering of the affected widget, allowing it to seamlessly reflect the latest changes. This synchronous relationship between the global state and the widget components ensures a responsive and up-to-date user interface.

In summary, the use of TypeScript, React with MUI, Zustand, and Immer collectively contributes to a scalable, maintainable, and type-safe architecture. The global immutable state acts as a cornerstone, facilitating seamless communication between components and enabling a dynamic user experience that effortlessly adapts to evolving data and user interactions.

Instructions

1. First clone the project from GitHub:

git [email protected]:michaelkolesidis/widgets.git
cd widgets

2. Install the project dependencies:

yarn

3. Start the Vite development server:

yarn dev

Demo

There is an online demo available at https://materialwidgets.vercel.app/. It is deployed using Vercel.

Technologies

The core technologies are TypeScript, React, MUI, and Zustand. The following libraries and tools are used:

Name License Description
TypeScript MIT A strongly typed language that builds on JavaScript
React MIT Component-based, front-end interface library
MUI MIT React component library
Zustand MIT State management
Immer MIT Allows you to work with immutable state in a more convenient way.
Vite MIT Frontend development tooling
Volta BSD-2-Clause JavaScript tool manager
Yarn BSD 2-Clause Package manager

Software Used

A non-exhaustive list of software that was used during the development of the project.

  • Visual Studio Code
  • Figma
  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox

💖 Support the Project

Thank you so much for your interest in my project! If you want to go a step further and support my open source work, buy me a coffee:

Buy Me a Coffee at ko-fi.com

License

Copyright (c) 2023 Michael Kolesidis
Licensed under the GNU Affero General Public License v3.0.