Skip to content

divineniiquaye/pho-monorepo

Repository files navigation

PHO Monorepo (PHOX)

🚀 A powerful monorepo template for your next Expo/Next.js project 🚀, crafted with developer experience and performance at its core. Packed with essential modern tools including TypeScript, TailwindCSS, expo-router, react-query, react-hook-form, and I18n to jumpstart your development.

npx pho-monorepo@latest init [my-app]

🚀 Motivation

My goal is to create a monorepo starter kit that is easy to use, fast to build, and has a good developer experience. I wanted to create a starter kit that is as close to production as possible, but still allows for customization and flexibility.

This monorepo template is designed to be a starting point for your next project. It includes everything you need to get started with Expo and NextJS.

✍️ Philosophy

The philosophy behind this monorepo template is to provide a solid foundation for your next project.

My main goals driving this template are:

  • 🚀 Production-ready: This template is designed to be production-ready for real-world use, providing a solid foundation for building production-ready projects.
  • 💪 Developer Experience: This template is built with developer experience in mind, providing a fast and easy-to-use development experience and enhance productivity.
  • 💪 Well-maintained third-party libraries: This template uses well-maintained third-party libraries, ensuring that you have access to high-quality and reliable libraries for your project.
  • 💪 Customizable: This template is highly customizable, allowing you to tailor it to your specific needs and preferences.

⭐ Key Features

  • ✅ Latest Expo SDK: Leverage the best of the Expo ecosystem while maintaining full control over your app.
  • 🎉 TypeScript for enhanced code quality and bug prevention through static type checking.
  • 💅 Minimal UI kit built with TailwindCSS, featuring common components essential for your app.
  • ⚙️ Multi-environment build support (Production, Staging, Development) using Expo configuration.
  • 💡 Clean project structure with Absolute Imports for easier code navigation and management.
  • 🚫 Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality.
  • 🗂 VSCode recommended extensions, settings, and snippets for an enhanced developer experience.
  • 🛠 Github Actions workflows for building, releasing, testing, and distributing your app.
  • 🔥 React Query and axios for efficient data fetching and state management. (In progress)
  • 🧵 Robust form handling with react-hook-form and zod for validation, plus keyboard handling.
  • 🎯 Localization support with i18next.
  • 🧪 Unit testing setup with Jest and React Testing Library (In progress).

💎 Libraries used

💅 Shadcn UI Kit (Web & Native)

  • Accordion
  • Alert
  • Alert-dialog
  • Aspect-ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calender (Alternative Flash-Calender by @MarceloPrado or Calendar-kit by @f0wu5u)
  • Card
  • Carousel (Web only, use use dom for native support)
  • Chart (Web only, use use dom or Victory-Native chart for native support)
  • Checkbox
  • Collapsible
  • Command
  • Context-menu
  • Dialog
  • Drawer
  • Dropdown-menu
  • Form
  • Hover-card
  • Input
  • Input-OTP (Alternative input-otp-input by @yjose)
  • Label
  • Menubar
  • Navigation-menu
  • Pagination
  • Popover
  • Progress
  • Radio-group
  • Resizable
  • Scroll-Area (Web only, use ScrollView for native support)
  • Select
  • Separator
  • Sheet
  • Sidebar (Web only, use use dom for native support)
  • Slider
  • Skeleton
  • Sonner
  • Switch
  • Table
  • Tabs
  • Text
  • Toast
  • Toggle
  • Toggle-group
  • Toolbar
  • Tooltip
  • Typography

Each component is 100% TypeScript. Here's extra components included in the UI kit:

  • Stack (HStack, VStack)

RoadMap

  • Add Toast UI Component
  • Add Tests Mocks for every UI component
  • Add Storybook for every UI component
  • Add Documentation
  • Add AI Integration

Contributors

This starter is made and maintained by Divine Niiquaye Ibok. New contributors are always welcome!

🔥 How to contribute?

Thank you for your interest in contributing to this project. Your involvement is greatly appreciated and we welcome your contributions. Here are some ways you can help improve this project:

  1. Show your support for the project by giving it a 🌟 on Github. This helps us increase visibility and attract more contributors.
  2. Share your thoughts and ideas with us by opening an issue. If you have any suggestions or feedback about any aspect of the project.
  3. If you have any questions about the project, please don't hesitate to ask. Simply open an issue and I'll do my best to provide a helpful and informative response.
  4. If you encounter a bug or typo while using the starter kit or reading the documentation, I'll would be grateful if you could bring it to my attention. You can open an issue to report the issue, or even better, submit a pull request with a fix.

🔖 License

This project is MIT licensed.