juliusmarminge / acme-corp Goto Github PK

View Code? Open in Web Editor NEW

1.1K 1.1K 56.0 2 MB

Home Page: https://acme-corp.jumr.dev

License: MIT License

JavaScript 1.72% TypeScript 96.51% CSS 0.34% MDX 1.24% Handlebars 0.18%

acme-corp's Introduction

Hi there 👋 I'm Julius

Software Engineer

👨‍💻 Currently mostly into webapps and devtools. Build most stuff using the create-t3-app stack
🤝 Open Source Enthusiast
👷‍♂️ Indie contractor
🌍 Based in Sweden 🇸🇪
🏫 Student @ Blekinge Institute of Technology
🧑‍🏫 "Best way to learn is to build shit" - TheoBr

Tech I'm passionate about

Stats

Maintainer at

Sponsors ❤️

Huge thanks to all my sponsors; If you appreciate my Open Source work and want to show a token of appreciation, I'd really appreciate if you would consider sponsoring me. If you're a sponsor and wanna chat, feel free to reach out:

acme-corp's People

Contributors

Stargazers

Watchers

Forkers

perkinsjr juancamiloqhz snax4a devspeak dmick92 tometo-dev cesarnml reallybadnews miguelvelasquezdev peterkibuchi imcodingideas dragthelake seichris ricksta71 codebyshennan andreyselitsky riolly aetairidis devmaxc srx9 yeonkoocn pawover memoriaxii iamshgulati dkasper sunsreng kernelogy kuznecik nick777-pixel zbeyens openailabs 0xgeegz jacksonmills shingii tienlx97 openailabs itsnotaka danmarauda kinfe123 techshell mvandermeulen hassandev13 mattwoodco vaniapopovic matheusmazeto loe-cotton bitfused deltasierra96 thekojopatrick digitalapplied ciphore nagauta rtorcato whatif-dev usamakhan bornpsych

acme-corp's Issues

TRPC with Tanstack Query

Describe the feature you'd like to request

feature that allows for seamless integration between React Query and trpc in App dir.

Describe the solution you'd like to see

Currently, using React Query with trpc requires some manual setup and configuration. Including this in template would be more convenient for using trpc. Would love to see how it will be integrated. Tried couple of ways and could succeed if a trpc.provider is used.

Additional information

No response

feat: Deploy Instructions for vercel or similar platform

Describe the feature you'd like to request

I am not sure how to deploy this to vercel, it has two apps expo and nextjs. What changes do I need to do to get it running successfully on vercel!

Describe the solution you'd like to see

A simple break down of steps on how to deploy

Additional information

No response

bug: NEXTJS_URL use generated vercel url instead of custom domain on production

Provide environment information

System:
  OS: Linux 5.15 Zorin OS 16.2
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 6.36 GB / 15.47 GB
  Container: Yes
  Shell: 5.8 - /usr/bin/zsh
Binaries:
  Node: 18.16.0 - /run/user/1000/fnm_multishells/653295_1686906048643/bin/node
  npm: 9.6.6 - /run/user/1000/fnm_multishells/653295_1686906048643/bin/npm
  Watchman: 4.9.0 - /usr/bin/watchman

Describe the bug

After completing the payment from Stripe, it redirected to the generated vercel URL instead of the custom domain on production. Then it's redirected to the sign-in page because no session is found.
For now, it's redirected to https://acme-corp-21h0raawx-t3-oss.vercel.app/signin instead of https://acme-corp.jumr.dev/{{userId}}

Link to reproduction

https://acme-corp.jumr.dev/

To reproduce

Login and go to the dashboard page
Upgrade your subscription or create an organization
Complete the payment steps

Additional information

The bug:
package/api/src/env.mjs

NEXTJS_URL: z.preprocess(
  (str) =>
    process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : str,
  process.env.VERCEL_URL ? z.string().min(1) : z.string().url(),
),

The solution: check the environment

NEXTJS_URL: z.preprocess(
  (str) =>
    process.env.VERCEL_URL && process.env.NODE_ENV !== "production"
      ? `https://${process.env.VERCEL_URL}`
      : str,
  process.env.VERCEL_URL && process.env.NODE_ENV !== "production"
    ? z.string().min(1)
    : z.string().url(),
),

env.example

# Your production custom domain (ex: "https://acme-corp.jumr.dev")
NEXTJS_URL="http://localhost:3000"

bug: page crashes on /settings/billing

Provide environment information

System:

OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Max
Memory: 7.63 GB / 32.00 GB
Shell: 5.9 - /bin/zsh

Binaries:

Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman

Describe the bug

When navigating to the new billing page you get a error boundary issue. The entire page goes empty.

Link to reproduction

https://github.com/juliusmarminge/acme-corp

To reproduce

git clone [email protected]:juliusmarminge/acme-corp.git
pnpm i
cp .env.example .env.local
add the appropriate configuration's.
pnpm db:push
pnpm dev
navigate to localhost:3000
register for a new account.
open the settings page
click on the new subscription.

Validate that the page crashed.

Additional information

Suggested fix:

https://github.com/juliusmarminge/acme-corp/blob/main/apps/nextjs/src/app/(dashboard)/settings/billing/page.tsx#L29

const isValidSubscription = (subscription: unknown) => {
  return (
    typeof subscription === "object" &&
    subscription !== null &&
    "plan" in subscription &&
    "endsAt" in subscription &&
    !!subscription.plan &&
    !!subscription.endsAt
  );
};

https://github.com/juliusmarminge/acme-corp/blob/main/apps/nextjs/src/app/(dashboard)/settings/billing/page.tsx#L39

- {subscription ? (
+ {isValidSubscription(subscription) ? (

https://github.com/juliusmarminge/acme-corp/blob/main/packages/api/src/router/auth.ts#L5

Wrap this in a try catch.

bug: @@map is not supported by Prisma-generator-kysely

Provide environment information

N/A

Describe the bug

The issue with the Prisma model and Prisma-generator-kysely arises when using the @@Map directive. When using @@Map, the Prisma-generator-kysely does not output types properly. Instead of using the value for the object key from @@Map, it uses the model name. This can result in inconsistencies and errors when trying to use the generated types.

Link to reproduction

https://acme-corp.jumr.dev/

To reproduce

To reproduce the issue with the Prisma model and Prisma-generator-kysely not outputting types properly when using @@Map, follow these steps:

Create a new Prisma model with a field that uses the @@Map directive, for example:

model User {
  id       Int      @id @default(autoincrement())
  username String   @unique
 @@map("users")
}

Run the Prisma-generator-kysely to generate the database schema and code for the model.

Check the generated code for the User model, specifically the TypeScript types for the fields. You may notice that the generated code uses the model field name instead of the @@Map directive value, resulting in inconsistent and incorrect types.

Attempt to use the generated code in your project, and you may encounter errors or inconsistencies due to the incorrect types.

Additional information

No response

feat: Internationalization

Describe the feature you'd like to request

Would be cool if there is internationalization in this repo. So you can start out of the box with good internationalization.

Describe the solution you'd like to see

Maybe use the solution from: https://nextjs.org/docs/app/building-your-application/routing/internationalization, but I'm not a big fan of this solution so idk.

Additional information

No response

bug: Unmatched Route error for expo iOS

Provide environment information

System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 485.84 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.1.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.2.0 - /opt/homebrew/bin/npm
pnpm: 8.6.6 - /opt/homebrew/bin/pnpm
Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman

Describe the bug

After running pnpm dev in expo folder and launching in iOS simulator I get the error below. NextJS works fine.

I did have the following warnings through as well which might be the cause...

Starting Metro Bundler
Using src/app as the root directory for Expo Router.
Some dependencies are incompatible with the installed expo version:
  [email protected] - expected version: ~0.20.5
  [email protected] - expected version: ~1.6.0
  [email protected] - expected version: 0.72.6
  @expo/[email protected] - expected version: ~7.2.2
Your project may not work correctly until you install the correct versions of the packages.
Fix with: npx expo install --fix

Link to reproduction

https://github.com/bitfused/acme-corp

To reproduce

Fresh from master

Additional information

No response

bug: This repo isn't pinned in your Github profile

Provide environment information

Chrome

Describe the bug

I went to your profile, and you only have t3-oss repos pinned

Link to reproduction

https://github.com/juliusmarminge

To reproduce

Go to https://github.com/juliusmarminge, realize acme-corp isn't in the pins, go to repos, and scroll until you find it

Additional information

No response

feat: local docker support for mysql

Describe the feature you'd like to request

Create a docker-compose file for a local mysql data instance.

Describe the solution you'd like to see

I would like to be able to run mysql for local development with docker.

Additional information

No response

feat: demo how to use tRPC in Next app

Describe the feature you'd like to request

Currently there's no example in this codebase how to perform tRPC API requests from the Next application (using the app directory). It'd be good to have an example.

Describe the solution you'd like to see

Would like to see how to use tRPC with Next app directory. I've tried following a couple of examples but without success, so not sure if this is possible or not as of now.

Additional information

No response

bug: Incorrect auth flow

Provide environment information

None

Describe the bug

The current flow sends two login emails at the same time, and unregistered users cannot create users in Clerk.

After some experimentation, the clerk's authentication workflow seems to look like this.

SignIn flow:

await signIn.create({
  strategy: 'email_link',
  identifier: state.email,
  redirectUrl: `${window.location.origin}/`,
})

// user has account in clerk, email sent
// else throw: status===422 => this email is not signed up in clerk

SignUp flow:

await signUp.create({
    emailAddress: state.email,
    password: nanoid(), // If the password is not provided, there seems to be some problems with the follow-up process? 
  })

await signUp.startMagicLinkFlow({
    redirectUrl: `${window.location.origin}/`,
  })

// email sent, click the link will verify and create the user, redirect to home
// or throw status===422: account exists

Link to reproduction

https://acme-corp.jumr.dev/signin

To reproduce

The current flow sends two login emails at the same time, and unregistered users cannot create users in Clerk.

Additional information

No response

bug: tRPC completely brakes when deployed on Vercel

Provide environment information

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1 Pro
Memory: 53.19 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v19.9.0/bin/yarn
npm: 9.7.1 - ~/.nvm/versions/node/v19.9.0/bin/npm

Describe the bug

tRPC only works locally, when deployed on Vercel cloud i get the following error

TRPCClientError: Unable to transform response from server
at (../../node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs:75:14)
at (../../node_modules/@trpc/client/dist/httpBatchLink-e66c0674.mjs:185:44) {
meta: undefined,
shape: undefined,
data: undefined,
name: 'TRPCClientError'
}

Link to reproduction

tRPC

To reproduce

Deploy as usual, and then deploy on Vercel Cloud.

Additional information

Have already ensured all of the environmental variables are correctly set on Vercel.

Issues with Tailwind Intellisense plugin given this configuration

Hi, I hope this is the appropriate place to ask this. I followed the structure of this monorepo when incorporating Tailwind and shadcn into my own project, but now I'm running into the issue where the Tailwind Intellisense plugin doesn't extend to my Next.js app.

Is this something you have experienced at all? If so how did you go about mitigating it.

Thanks very much.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

pnpm/action-setup v2.4.0

actions/setup-node v4

actions/cache v4

npm

apps/expo/package.json

@expo/metro-config ^0.10.7

@shopify/flash-list 1.4.3

@tanstack/react-query ^5.17.15

expo ^49.0.22

expo-constants ~14.4.2

expo-linking ~5.0.2

expo-router 2.0.14

expo-splash-screen ~0.22.0

expo-status-bar ~1.7.1

nativewind ^4.0.23

react 18.2.0

react-dom 18.2.0

react-native 0.73.1

react-native-gesture-handler ~2.12.0

react-native-reanimated ~3.3.0

react-native-safe-area-context 4.6.3

react-native-screens ~3.22.1

superjson 2.2.1

@babel/core ^7.23.7

@babel/preset-env ^7.23.8

@babel/runtime ^7.23.8

@expo/config-plugins ^7.8.4

@types/babel__core ^7.20.5

@types/react ^18.2.48

eslint ^8.56.0

prettier ^3.2.4

tailwindcss 3.4.1

typescript ^5.3.3

apps/nextjs/package.json

@clerk/nextjs ^4.29.4

@dinero.js/currencies 2.0.0-alpha.14

@hookform/resolvers ^3.3.4

@next/mdx ^14.1.0

@t3-oss/env-nextjs ^0.7.3

@tanstack/react-query ^5.17.15

@tanstack/react-table ^8.11.3

@vercel/analytics ^1.1.2

date-fns ^3.2.0

dinero.js 2.0.0-alpha.14

framer-motion ^10.18.0

next ^14.1.0

next-themes ^0.2.1

react 18.2.0

react-day-picker ^8.10.0

react-dom 18.2.0

react-hook-form ^7.49.2

react-image-crop ^11.0.4

react-wrap-balancer ^1.1.0

recharts ^2.10.3

superjson 2.2.1

tailwindcss-animate ^1.0.7

zod ^3.22.4

@types/mdx ^2.0.10

@types/node ^20.11.5

@types/react ^18.2.48

@types/react-dom ^18.2.18

autoprefixer ^10.4.17

dotenv-cli ^7.3.0

eslint ^8.56.0

prettier ^3.2.4

tailwindcss 3.4.1

typescript ^5.3.3

package.json

@manypkg/cli ^0.21.2

@turbo/gen ^1.11.3

cross-env ^7.0.3

prettier ^3.2.4

turbo ^1.11.3

typescript ^5.3.3

node >=v18.17.1

pnpm 8.6.12

packages/api/package.json

@clerk/nextjs ^4.29.4

@dinero.js/currencies 2.0.0-alpha.14

@t3-oss/env-nextjs ^0.7.3

dinero.js 2.0.0-alpha.14

superjson 2.2.1

zod ^3.22.4

zod-form-data ^2.0.2

eslint ^8.56.0

prettier ^3.2.4

typescript ^5.3.3

packages/db/package.json

@planetscale/database ^1.14.0

kysely ^0.27.2

kysely-planetscale ^1.4.0

nanoid ^5.0.4

dotenv-cli ^7.3.0

eslint ^8.56.0

prettier ^3.2.4

prisma ^5.8.1

prisma-kysely ^1.7.1

typescript ^5.3.3

packages/stripe/package.json

@clerk/nextjs ^4.29.4

@t3-oss/env-nextjs ^0.7.3

stripe ^14.13.0

eslint ^8.56.0

prettier ^3.2.4

typescript ^5.3.3

packages/ui/package.json

@radix-ui/react-avatar ^1.0.4

@radix-ui/react-checkbox ^1.0.4

@radix-ui/react-dialog ^1.0.5

@radix-ui/react-dropdown-menu ^2.0.6

@radix-ui/react-label ^2.0.2

@radix-ui/react-popover ^1.0.7

@radix-ui/react-scroll-area ^1.0.5

@radix-ui/react-select ^2.0.0

@radix-ui/react-slot ^1.0.2

@radix-ui/react-tabs ^1.0.4

@radix-ui/react-toast ^1.1.5

class-variance-authority ^0.7.0

clsx ^2.1.0

cmdk ^0.2.0

lucide-react 0.307.0

tailwind-merge ^2.2.0

zod ^3.22.4

@tanstack/react-table ^8.11.3

@types/react ^18.2.48

@types/react-dom ^18.2.18

date-fns ^3.2.0

eslint ^8.56.0

prettier ^3.2.4

react 18.2.0

react-day-picker ^8.10.0

react-dom 18.2.0

react-hook-form ^7.49.2

tailwindcss 3.4.1

tailwindcss-animate ^1.0.7

typescript ^5.3.3

@tanstack/react-table ^8.10.7

react ^18.2.0

react-day-picker ^8.10.0

react-dom ^18.2.0

react-hook-form ^7.45.4

tailwindcss 3.4.1

tailwindcss-animate ^1.0.7

tooling/eslint/package.json

@next/eslint-plugin-next ^14.1.0

@types/eslint ^8.56.2

@typescript-eslint/eslint-plugin ^6.19.0

@typescript-eslint/parser ^6.19.0

eslint-config-prettier ^9.1.0

eslint-config-turbo ^1.11.3

eslint-plugin-import ^2.29.1

eslint-plugin-jsx-a11y ^6.8.0

eslint-plugin-react ^7.33.2

eslint-plugin-react-hooks ^4.6.0

eslint ^8.56.0

typescript ^5.3.3

tooling/prettier/package.json

@ianvs/prettier-plugin-sort-imports ^4.1.1

prettier ^3.2.4

prettier-plugin-tailwindcss ^0.5.11

typescript ^5.3.3

tooling/tailwind/package.json

autoprefixer ^10.4.17

postcss 8.4.33

tailwindcss 3.4.1

eslint ^8.56.0

prettier ^3.2.4

typescript ^5.3.3

tooling/typescript/package.json

nvm

.nvmrc

node 20.10

Check this box to trigger a request for Renovate to run again on this repository

feat: preparation to tests

Describe the feature you'd like to request

This project is really amazing, helped me a lot figuring out some issues with pnpm and expo in a monorepo. So many thanks to you all.

Although, I'm still experience tons of errors when it comes to run my tests written using Jest. So I thought it would be great to have tests here as well (no matter the runner), as tests are crucial part of any project.

Describe the solution you'd like to see

Tests boilerplate

Additional information

No response

@acme/eslint-config does not exist

Provide environment information

System:
OS: Windows 10 10.0.22621
CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
Memory: 6.96 GB / 31.93 GB
Binaries:
Node: 18.16.0 - D:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.5.1 - D:\Program Files\nodejs\npm.CMD

Describe the bug

pnpm was not able to find this dependency

Link to reproduction

To reproduce

pnpm install

Additional information

No response

feat: Modularity

Describe the feature you'd like to request

I think it would be cool if I could leave stuff out (like some backend stuff).

Describe the solution you'd like to see

Maybe such modularity like in the T3 Stack

Additional information

No response

Consider supporting https://www.convex.dev/

Describe the feature you'd like to request

SQL is cool, but it would be nice to see a template with convex.dev, possibly the easiest way for building application I've ever seen (especially the ones that requires reactive features)

Describe the solution you'd like to see

use convex.dev

Additional information

No response

feat: auth for mobile

Describe the feature you'd like to request

Would love to see adding Auth for Expo. The new Clerk docs list support for using OAuth on Expo like this. This will enable the mobile app to be more useful if it can share Auth from Next.

Sidenote: The repo looks awesome, I've tried setting up something similar before using T3-Turbo but haven't been able to get Clerk working. Tried their template as well, getting the native linking to work reliably was a struggle. Would love to see how you approach this.

Describe the solution you'd like to see

We can use OAuth with the Clerk Expo package as described here.

Additional information

Let me know if this is interesting and useful, I am happy to give this a shot if you're busy with other things.

bug: The Profile modal is not showing the whole component

Provide environment information

N/A

Describe the bug

After logging in, if I click on Profile in the user menu, the modal hides most of the content.

Link to reproduction

https://acme-corp.jumr.dev/

To reproduce

Go to demo application link above, sign-in, then access the user profile via user menu.

Additional information

I didn't run this locally, so this was just found by experimenting on your demo.