Osiris
An Electron based desktop application for generating components, building pages, and storing them in a UI library.
Overview
Osiris is a desktop application built with Electron that serves as an all-in-one UI Component Library, Generator, and Page Builder for developers and designers. It allows users to create and store custom reusable components in React or Vue, manipulate their hierarchy, and download the code for further development.
Features
- UI Generator and Library: Create custom components in React or Vue and securely store them in the UI library powered by AWS S3.
- Build Page: Easily build React or Vue pages by controlling the hierarchy of custom components stored in the library. Customize components with CSS and text.
- Hierarchy & Download Code: Edit the hierarchy with simple arrow buttons. Build React pages with state or hooks, or build Vue pages with or without state. Download custom pages directly to your computer.
Prerequisite Accounts
Clone the repository
git clone <repo-url>
Install NPM packages
npm install
Connect Osiris Electron App to SQL Database with ElephantSQL
- Add
pgkeys.jsto the/srcdirectory. - Initialize AWS-Amplify to your project.
Install Amplify folder
- Navigate to the Osiris root folder.
- Follow the steps in the Amplify documentation to install Amplify.
Run the Electron app
npm start
Summary
Osiris is a powerful desktop application that simplifies the process of building UI components and pages. With its UI Generator and Library features, users can create custom components in React or Vue and securely store them. The Build Page feature allows for easy manipulation of component hierarchy and customization. Overall, Osiris provides a comprehensive solution for developers and designers to streamline their UI development workflow.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.