{"id":15147817,"url":"https://github.com/vidundergunder/create-xp-app","last_synced_at":"2025-08-18T13:08:12.706Z","repository":{"id":135434525,"uuid":"579385811","full_name":"VidunderGunder/create-xp-app","owner":"VidunderGunder","description":"💻📲 Opionionated fullstack cross-platform app starter for Nextjs and Expo with up to 100% code sharing","archived":false,"fork":false,"pushed_at":"2024-07-30T14:12:35.000Z","size":15828,"stargazers_count":46,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T21:42:13.716Z","etag":null,"topics":["app","auth","clerk","create-xp-app","cross-platform","dripsy","expo","fullstack","moti","nextjs","pnpm","prisma","react","react-native","solito","t3","threejs","trpc","turborepo","xp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VidunderGunder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-17T14:20:07.000Z","updated_at":"2025-03-12T20:35:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"33e46a12-df5b-42d9-8055-72ef9c4db3aa","html_url":"https://github.com/VidunderGunder/create-xp-app","commit_stats":{"total_commits":79,"total_committers":3,"mean_commits":"26.333333333333332","dds":0.1392405063291139,"last_synced_commit":"906c26fc9ffd6a238c841bc0c4e34c2ca5fc6a48"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/VidunderGunder/create-xp-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Fcreate-xp-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Fcreate-xp-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Fcreate-xp-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Fcreate-xp-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VidunderGunder","download_url":"https://codeload.github.com/VidunderGunder/create-xp-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Fcreate-xp-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270996976,"owners_count":24681953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","auth","clerk","create-xp-app","cross-platform","dripsy","expo","fullstack","moti","nextjs","pnpm","prisma","react","react-native","solito","t3","threejs","trpc","turborepo","xp"],"created_at":"2024-09-26T13:00:38.996Z","updated_at":"2025-08-18T13:08:12.640Z","avatar_url":"https://github.com/VidunderGunder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"DEPRECATED\n\nUse [T4 Stack](https://t4stack.com/) instead and study [this](https://youtu.be/aWfYxg-Ypm4?si=uYVamStBhS5T-ao_)\n\n![hero](resources/hero.png)\n\n# Create XP App\n\nPlug-n-play app template to write code only once, and have it run on iOS, Android and Web.\n\nKey features:\n\n- [Expo](https://expo.dev/) for native iOS and Android\n- [Next.js](https://nextjs.org/) for web\n- [Solito](https://solito.dev/) for code sharing\n- [Dripsy](https://www.dripsy.xyz/) + [Moti](https://moti.fyi/) for styling and animations\n- [NativeWind](https://www.nativewind.dev/) for alternative styling\n- [Three.js](https://threejs.org/) for 3D graphics\n- [Skia](https://shopify.github.io/react-native-skia/) for 2D graphics\n- [Clerk](https://clerk.dev/) for authentication\n- [Prisma](https://www.prisma.io/) + [tRPC](https://trpc.io/) for backend\n\n_Based on [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) and [all things Fernando Rojo](https://github.com/nandorojo) ([Solito](https://solito.dev/), [Dripsy](https://www.dripsy.xyz/), [Moti](https://moti.fyi/), etc.). Authentication is inspired by [create-t3-turbolito](https://github.com/ebg1223/create-t3-turbolito). Huge thanks \u003c3._\n\n## 🧠 Philosophy\n\nI created this to have a solid foundation for my own projects, that will allow me to get inspired and create applications quickly.\n\nThe philosophy behind it is that having fun and powerful tools at hand will allow you to play around and create cool stuff. You can clean up and do optimizations later on.\n\nSometimes you just need an inspiring prototype, and this project will help you get there.\n\n## 🚀 Getting Started\n\nInstall [Node.js](https://nodejs.org/en/download/)\n\nInstall [pnpm](https://pnpm.io/installation#using-npm) using npm, unless you prefer something else\n\nInstall [VSCode](https://code.visualstudio.com/download)\n\nClone this project to your computer and open it in VSCode\n\nAccept any recommendations given to you by VSCode after opening the project\n\nOpen a terminal in VSCode where your project is open\n\nInstall dependencies:\n\n```bash\npnpm i\n```\n\nKeep going while the dependencies install\n\n[Provision a PostgreSQL database with Railway](https://railway.app/new) and get the Postgres Connection URL\n\n![DB Url](resources/db-url.png)\n\nIn the project root, create a `.env` file with the following, and replace all `...`'s with your corresponding API keys:\n\n```env\nDATABASE_URL=...\n```\n\nSetup your database:\n\n```bash\npnpm db:setup\n```\n\nTo get authentication working, [create a Clerk account](https://dashboard.clerk.dev/sign-up), [add a Clerk application](https://dashboard.clerk.dev/apps/new) and set the Clerk API keys in the `.env` file:\n\n```env\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_***\nCLERK_SECRET_KEY=sk_***\n```\n\nEnsure you setup Expo to play nicely for your setup, by following [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo)'s [Expo setup guide](https://github.com/t3-oss/create-t3-turbo#configure-expo-dev-script).\n\nIn your VSCode terminal, start development:\n\n```bash\npnpm dev\n```\n\n## 👨‍🎨 Styling\n\nYou can style a component using either [NativeWind](https://www.nativewind.dev/) or [Dripsy](https://www.dripsy.xyz/) + [Moti](https://moti.fyi/).\n\nNativeWind is quick and nimble, while Dripsy + Moti will give you more fine-grained control and animations.\n\nFeel free to combine them as you see fit, but keep in mind that they are not properly setup to work seamlessly together.\n\n## 3️⃣🍆 3D with Three.js\n\n[React Three Fiber](\u003c[http](https://github.com/pmndrs/react-three-fiber)\u003e) is used to render 3D graphics ([docs](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)).\n\nUse `📁 threejs/Canvas.tsx` to automatically use the correct implementation for the platform you're on (with consistent styling as bonus 😉), so that you get native rendering on iOS and Android, and web rendering on the web, but still code share everything.\n\n\u003e **Note**  \n\u003e You _can_ use the regular Canvas component from `react-three-fiber` if you _really_ want to (nice to have as a fallback), but you'll not get butter smooth animations and interactions on iOS and Android.\n\n\u003e **Warning**  \n\u003e The iOS simulator does not render 3D at all (as of 2022.12.19), but real apple devices work just fine (see\n\u003e https://github.com/pmndrs/react-three-fiber/issues/2546).\n\n## 🎨 Skia (☢️ WIP)\n\n[Skia](https://shopify.github.io/react-native-skia/) is a 2D graphics library that can be used to render really cool 2D graphics.\n\nImplemented for iOS and Android, but code sharing with Next.js is WIP atm.\n\n## Quirks\n\nThis is a monorepo using [Turborepo](https://turbo.build/repo) and [pnpm](https://pnpm.io/).\n\nAs such, installing packages is a little different than you might be used to. Skim through the documentation of both to get a feel for how they work, if the tips below are insufficient.\n\n### Installing packages\n\nHere are some examples of how you typically would install packages using `pnpm` from the root:\n\n```bash\npnpm i \u003cpackage\u003e --filter=expo\n```\n\n```bash\npnpm i -D \u003cpackage\u003e --filter=expo\n```\n\n```bash\npnpm i -D \u003cpackage\u003e --filter=expo --filter=web\n```\n\n\u003e **Note**  \n\u003e My experience is that `pnpm i` with filtering works the same from anywhere in the project, but other commands, for example `package.json`-scripts like `pnpm dev`, may vary. This may be wrong, so feel free to correct me.\n\nTo install packages using [Expo](https://docs.expo.io/) (maybe you want their [automatic versioning](https://docs.expo.dev/workflow/expo-cli/#install)), you need to specify location, by `cd`-ing in to the relevant directory.\n\nTo install a package (here `expo-location`) in the `expo` package:\n\n```bash\ncd packages/expo\npnpx expo install expo-location\n```\n\n\u003e **Note**  \n\u003e When installing packages using Expo, the docs most often suggest `npx`, but as we're using `pnpm`, I recommend using `pnpx`, so:\n\u003e\n\u003e ❌ ~~`npx expo install expo-location`~~  \n\u003e ✅ `pnpx expo install expo-location`\n\n### Pure JS dependencies\n\nIf you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:\n\n```sh\npnpm i date-fns --filter=app\n```\n\n### Native dependencies\n\nIf you're installing a library with any native code, you must install it in `📁 apps/expo`, but for good DX in `📁 packages/app`, you should install it in both places:\n\n```sh\npnpm i:native react-native-reanimated\n```\n\n\u003e Which under the hood is the same as:\n\u003e\n\u003e ```sh\n\u003e pnpm i --filter=expo --filter=app react-native-reanimated\n\u003e ```\n\n### Syncing native dependencies\n\nTo sync the versions of all packages installed in both `📁 packages/app` and `📁 packages/expo`, you can use syncpack to find mismatching versions:\n\n```sh\npnpm syncpack:mismatches\n```\n\nYou should fix these manually or create a script that fits your workflow.\n\nIf some packages are only installed in `📁 app/expo`, you'll need to add those to `📁 packages/app/package.json` manually.\n\nIf you get errors on the web after installing a native dependency, you may need to tell Next.js to transpile the module (or it's dependencies - check the error logs) in `📁 apps/next/next.config.js`:\n\n```js\nconst withTM = require(\"next-transpile-modules\")([\n  // Add the module here, e.g.:\n  \"recyclerlistview\",\n]);\n```\n\n## 🤯 Facing problems?\n\nBelow are ways to solve them.\n\n### Generally\n\n1. Restart VSCode.\n2. Clean the project and reinstall dependencies:  \n   `pnpm clean:workspaces`  \n   `pnpm i`\n3. Restart your computer.\n\n### Scripts not running properly?\n\nSome terminals don't support chaining commands with `\u0026\u0026`, `||`, `;`, and so on, so you may need to run them separately. Checkout the `package.json`-scripts to see how they are setup and run them in the same order.\n\n### Permission errors when running commands (Mac/Linux)\n\nPrefix the command with `sudo`, e.g.:\n\n```bash\nsudo pnpm i\n```\n\n### Pulling changes from the repository\n\nAlways check for and install new dependecies when you pull changes from the repository:\n\n```bash\npnpm i\n```\n\n### Wrong version of Node\n\n- Check your version with\n  ```bash\n  node -v\n  ```\n- Install the correct version according to `engines` in `package.json`\n\n### Wrong version of pnpm\n\nCheck your version with\n\n```bash\npnpm -v\n```\n\nInstall the correct version according to `engines` in `package.json`\n\n### Using 32-bit version of Node\n\nGetting `error Command failed with exit code 3221225477`?\n\nCheck if you're using 32-bit Node.js:\n\n```bash\nnode -p \"process.arch\"\n```\n\nIf so, install the 64-bit version instead.\n\nOr buy a Mac.\n\n### Weird typescript errors\n\nOpen up any TypeScript file in the project and press...\n\n- \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e on Mac\n- \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e on Windows\n\nThen restart the TypeScript server, with the command `TypeScript: Restart TS Server`.\n\n### Divergent git branches\n\n```bash\ngit config pull.rebase false\n```\n\n### Ports already in use\n\nKill the processes using the ports:\n\n```bash\npnpm killports\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidundergunder%2Fcreate-xp-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvidundergunder%2Fcreate-xp-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidundergunder%2Fcreate-xp-app/lists"}