A collection of ecological material widgets.
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.
1. First clone the project from GitHub:
git [email protected]:michaelkolesidis/widgets.git
cd widgets2. Install the project dependencies:
yarn3. Start the Vite development server:
yarn devThere is an online demo available at https://materialwidgets.vercel.app/. It is deployed using Vercel.
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 |
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
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:
Copyright (c) 2023 Michael Kolesidis
Licensed under the GNU Affero General Public License v3.0.