Introducing canine-ui: Simplifying React Development with VSETH Branding

Welcome to the world of canine-ui, an intuitive UI library designed to empower new developers in building stunning web applications with VSETH branding. As developers, we understand that starting a new project can be daunting, but with canine-ui, you'll discover a seamless and consistent development experience across all VSETH projects.

Key principles for efficient development

Using canine-ui, we adhere to a set of core principles to enhance maintenance efficiency and flexibility:

1. Embrace Existing Solutions: By leveraging mantine, a powerful UI framework, we avoid reinventing the wheel and maximize productivity.

2. Streamlined Components: We eliminate redundant code by utilizing mantine components directly, reducing complexity and enhancing code maintainability.

3. Customizable Frameworks: We believe in empowering developers to choose their preferred routing and authentication solutions, making them optional and easily replaceable.

4. Collaborative Decision-Making: To ensure the best UI/UX experience, any significant changes undergo thorough discussion with the VSETH board (Kommunikation).

Introduction to canine-ui

canine-ui offers two versions:

• VSETHExternalApp: Ideal for outward-facing websites, similar to Community solutions from VIS.
• VSETHInternalApp: Designed for inward-facing apps, similar to Group Manager.

Additionally, canine-ui provides hooks that simplify theming and authentication processes, granting you greater control over your project's aesthetics and security.

For comprehensive documentation visit the documentation.

Getting Started

To get started with canine-ui, we recommend following these steps:

1. Explore Demos: Take a look at the demos for both internal and external apps to gain a better understanding of canine-ui's capabilities and features.

2. Clone the Repository: You have two options for cloning the repository based on your project type:

   • For internal apps, clone the internal repository.
   • For external apps, clone the external repository.

3. Installation: After cloning the repository, install the necessary dependencies by running the following commands:

   npm i --save vseth-canine-ui
   npm i --save @mantine/core @mantine/hooks @emotion/react

   These dependencies are essential for leveraging the full potential of canine-ui.

The internal repository showcases how to integrate authentication and routing with react-router, while the external repository demonstrates the implementation of custom theming.

Leveraging the Power of Mantine

canine-ui is built on top of Mantine, an exceptional UI framework. We strongly encourage utilizing Mantine for all your UI components, ensuring a consistent and polished look throughout your application.

By installing canine-ui, you gain access to an extensive suite of powerful tools that will elevate your development experience and empower you to create exceptional web applications.

Check out the demo repositories for code samples and start building remarkable projects with canine-ui today!