Recordpool Universal UI Poc
PoC using Radix UI primitives on iOS, Android and Web with Expo and Next.js
Overview
The Record Pool Monorepo is a proof of concept that showcases the use of Radix UI primitives on iOS, Android, and Web platforms using Expo and Next.js. The goal of this project is to create universal UI primitives and components based on Radix UI, making them compatible with Expo through the use of React Native for Web. The project is inspired by code samples from the Record Pool side project, which was initially developed during Expo Jam.
Features
- Bottom Sheet Menu on Mobile: A responsive menu that slides up from the bottom of the screen when triggered on mobile platforms.
- Dropdown Menu on Desktop: A dropdown menu that appears when triggered on desktop platforms.
- AppCode shared between iOS, Android, and Web: The codebase for the Record Pool app is shared across all platforms, enabling cross-platform compatibility.
Summary
The Record Pool Monorepo is a proof of concept that demonstrates the use of Radix UI primitives in creating universal UI components across iOS, Android, and Web platforms. By leveraging React Native for Web and Expo, developers can build applications with shared codebases and consistent interfaces. The project is based on the Record Pool app and showcases features such as a bottom sheet menu on mobile and a dropdown menu on desktop platforms.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- 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
- React Native
React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- 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.
- Expo
An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.