Skip to content

A Zod & TS-first approach to building Full-Product Universal App experiences with GraphQL, React-Native, Expo & Next.js, at write-once efficiency.

Notifications You must be signed in to change notification settings

FullProduct-dev/green-stack-starter-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Built with FullProduct.dev πŸš€

FullProduct.dev Bento Slide

This project with built with FullProduct.dev ❇️ A starterkit for building truly universal apps with Expo (iOS / Android) and Next.js (Web + SSR) - Providing a familiar but optimized, write-once, app router experience.

Note

FullProduct.dev is still in beta and awaiting official release. Consider this an early preview of the project that will still be improved.


Why FullProduct.dev? ⚑️

The FullProduct.dev πŸš€ Starterkit

It's a lot harder and costly to add a mobile app later than it is to start universally

  • Universal from the Start πŸ™Œ + Write-once UI:
    • Build for web, iOS, and Android with a single codebase.
    • No more writing features at 2x / 3x the time, resources or cost.
    • 90%+ of your UI and logic = shared across platforms.
    • Use React Native primitives (View, Text, Image) + NativeWind for max portability
    • ... while still styling your universal UI with Tailwind.

Write once + Universal UI

  • The GREEN Stack βœ… for an Evergreen project setup:
    • GraphQL, React-Native, Expo, Next.js.
    • Designed to be powerful, future-proof, flexible
    • Easy to evolve as your project grows

Code colocation comparison, a vertical versus a horizontal split

  • Copy-Pasteable πŸ“‚ - Monorepo Architecture:
    • Turborepo config already set up for you.
    • Features are organized by domain, not by front-end/back-end split.
    • This makes it easy to copy, reuse, and scale features between projects.
    • Each feature workspace is self-contained: UI, API, models, schemas, utils, and more...
    • All of it co-located in portable workspace packages.

What does that look like? πŸ’‘

Example Workspace Architecture

The idea is that each feature is a self-contained workspace, that defines its own UI, APIs, schemas, models, etc. and has automation scripts re-export them to the right places.

This allows you to copy-paste "feature folders" between projects, without the need for manual linking like you'd typically have to do without this architecture.


Matt Pocock - The right abstraction, found at the right time, can save you weeks of work. It's often worth putting the time in

  • Single Sources of Truth πŸ’Ž - The Right Abstractions
    • Define your data shape once using Zod schema
    • Derive or (auto-)generate types, validation, docs, db models, and more from them.
    • Avoid bugs and wasted time by keeping your types, validation, and docs in sync automatically.

Universal Data Fetching

  • Universal Data Fetching πŸ”€ - For Expo and Next.js
    • GraphQL + React Query for type-safe, cross-platform data fetching.
    • Fetch data the same way on server, browser, and mobile.
    • Derive all GraphQL definitions and queries from Zod schemas.
    • Use react-query to fetch serverside, in the browser and on mobile.

Generators vs AI Codegen

  • Modern DX & Codegen βš™οΈ - Beyond just the Setup
    • Built-in code generators for schemas, resolvers, forms, and more.
    • Fast monorepo setup with Turborepo (or use standalone if you prefer).
    • Includes a generator to quickly add new generators and scripts.

Rich Interactive docs example

  • Rich Interactive Docs πŸ“š - Automatically grow with your project
    • Full documentation at fullproduct.dev/docs
    • Best practices and guides included in the built-in docs
    • Automatic UI, API and Types docs generation from Zod schemas (e.g.)
    • Easy Onboardings / Handovers + Great Context for LLMs

❇️ The GREEN stack:

πŸ“— Docs at Fullproduct.dev/docs

Combining Next.ts and Expo-Router app routers

The goal of any tech stack should be to stay 'Evergreen'

  • βœ… GraphQL - Universal, type-safe data fetching
  • βœ… React-Native - Write-once UI that feels native
  • βœ… Expo - Cross-platform app dev (Web / iOS / Android)
  • βœ… EAS - Effortless builds and deploys to App Stores
  • βœ… Next.js - Web-vitals and best-in-class SSR / SEO optimization

These are proven and widely supported technologies.

Paired with TypeScript, Zod, and Tailwind (via Nativewind), this stack is designed to be robust, flexible, and here to stay. While still allowing you the freedom to choose your own Database and other core stack choices.

πŸ“¦ What’s Included? - Demo

How portable feature workspaces combine into an Expo + Next.js app

  • Well-Rounded Universal App Setup (Expo + Next.js)
  • Turborepo - Monorepo Workspace Structure
  • Universal Routing, (Deep)Linking and Navigation
  • Right Abstractions built around Zod as the Single Source of Truth
  • GraphQL and API routes with Next.js
  • Universal React Query setup - both for Expo and Next

Note: Git Based Plugins (for Auth, DB, Email, Payments, etc.) are coming soon! This base version is designed to be extended with plugins and your own features.

πŸ’‘ Frequently Asked Questions

What about reusing web code?

Just use Expo's new "use dom" directive (here's how)

...

  • What is FullProduct.dev?
    • A universal app starterkit to help you launch cross-platform apps faster, with best-in-class DX and monorepo architecture set up and designed for copy-paste.
  • Why use this over other starters?
    • Most starters are either too opinionated or too barebones. This kit gives you a solid, flexible foundation and is designed for maximum code reuse across platforms, and projects.
  • I'm just starting out, should I use it?
    • If you know the basics of JS & React, this kit will teach you how to build universal apps that can be used in a browser / found in Google, but also be installable from the iOS / Android App Stores.
    • Learning and knowing react-native and expo leads to a great skill potential employers will appreciate.
    • Built-in markdown docs will help both you and AI coding assistants better understand your project and way of working.
  • I'm an experienced engineer, why should I use it?
    • Seniors like us know the right abstractions can save weeks / months of time. Start with a bunch of them already set up for you.
    • Eases onboardings and handovers thanks to built-in docs that automatically grow as you build.
    • Spend less time on boilerplate thanks to our generators and automation scripts.
    • Architecture is designed for copy-paste, maximum reusability, across platforms, and projects.
  • How do I convince my boss to use this?
    • Show your non-technical lead the FullProduct.dev website.
    • Direct your technical lead to the docs, specifically the core-concepts.
    • Highlight the benefits of write-once universal apps: Bigger market share. More platforms = More trust = Higher margins. Maximum shareability with Universal Deeplinks > More viral potential.
    • Emphasize flexibility to pick + choose your own stack while still having a solid foundation. (Mergeable ready-made git based plugins & PRs soon)
  • How is it licensed?
    • See LICENSE.md and the eula for the details.
    • Base / demo version is open source, but not full-on open contribution.
    • Premium version and plugins are coming soon for commercial licensing.

Built with πŸ’š - by 🟒 Thorr ⚑️ @codinsonn.dev

Timeline comparison to when I started experimenting with these universal app concepts vs. the releases Expo did, and the Web-Only boilerplate that have skyrocketed

Hi πŸ‘‹ I'm Thorr, creator of the ❇️ FullProduct.dev - Universal App Starter kit

This stack and kit are the result of years of experimentation building both web and mobile apps in startups, agencies, and as a freelancer + solopreneur.

It's become a collection of best practices, patterns & tools I wish I had during my career ↗️

  • Studies Design, Development, Motion Graphics
  • Agencies B2B, MVPs, React SSR, Automatic Docgen, Expo EAS
  • Startups Web, Mobile, Deeplinks, Drivers, Zod, AI
  • Freelance Onboardings, Demos, Team Lead, Docs, Handovers
  • SaaS

Across a number of international projects, countries and industries:

UK, Healthcare Europe, B2B, ECommerce US Retail, Incubator, MVP

Now, I'm glad to share my learnings to help others build their own universal apps faster, with less manual boilerplate, and more code reusability than ever before.

Timeline of my professional experience, contemplating why I have to rebuild the same feature for the 6th time

Support the project - Please keep this entire collapsible section in your README πŸ™

Picture of me giving a talk on maximising efficiency by building universal apps

⭐️ Follow me for updates, tips and tricks:


FullProduct.dev screenshot

πŸ›  Getting Started

Use git clone, or the GitHub UI to ❇️ generate a new project from our template repo, then run:

npm install
npm run dev

All set πŸš€ >> Continue from the πŸ“— FullProduct.dev Docs

⚑️ Quickstart Guide | πŸ’‘ Core Concepts | πŸ“‚ Project Structure | ❇️ Codegen


...

About

A Zod & TS-first approach to building Full-Product Universal App experiences with GraphQL, React-Native, Expo & Next.js, at write-once efficiency.

Topics

Resources

Stars

Watchers

Forks