Make it

Dev.md

Immédiat

• Comment personaliser les 404 / 500 (avec le i18n compris)
• Pourquoi supabase ne fonctionne pas ?

Supabase

• DB password: 44J7LUhcMBkYfqx7cFjGvO
• postgresql://postgres.zxpilxalfiqzlmrouobb:[YOUR-PASSWORD]@aws-0-eu-west-2.pooler.supabase.com:6543/postgres

postgresql://postgres.zxpilxalfiqzlmrouobb:44J7LUhcMBkYfqx7cFjGvO@aws-0-eu-west-2.pooler.supabase.com:6543/postgres

• DB Password: 44J7LUhcMBkYfqx7cFjGvO
• postgresql://postgres.wawulehzccgylokyasbm:[YOUR-PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres => postgresql://postgres.wawulehzccgylokyasbm:44J7LUhcMBkYfqx7cFjGvO@aws-0-eu-central-1.pooler.supabase.com:6543/postgres

Neon provider

https://console.neon.tech/app/projects/sweet-recipe-85776402/branches/br-tiny-sun-a5zs1y52/tables?database=fs

• BD_POSTGRESQL_URL="postgresql://fs_owner:kr2RJByNQx7z@ep-lively-bird-a5j8tje9.us-east-2.aws.neon.tech/fs_production?sslmode=require"

Vercel

• Backoffice

  • Project ID prj_ME5ja0b8Gv3AypT20Hb0Yw3NycOS
  • Team ID team_hNpTGI7P0CqAXLsIqcPysqgL
  • User ID 1v7Cw1UpSbAKIxeupCKNBKGf
  • TOKEN EiW3cgfPcTNNitHRwIJ6gC9f

• Web

  • Project ID prj_tPzxqGThwdztD7xL87BcWVNqOc3N

• turborepo api token BKGUEV2HMQ633Qi4GY4HWLAT

• trpc pour communiquer avec le back

• Edition de contenu avec Tiptap

• Authentification avec Clerk

• builder les packages pour augmenter les perfs

• Editer le nom de l'app

  • trpc
  • fetch data sur l'app front
  • cache de la db pour le front
  • edition en backoffice
    • choix lib form

• Ajouter une authentification en backoffice

• Faire une zone de l'app si c'est possible

• Faire un repo + déploiement

• Nextjs et les cookies: https://blog.logrocket.com/guide-cookies-next-js/#:~:text=To%20read%20incoming%20request%20cookie,cookies()%3B%20const%20userId%20%3D%20cookieStore.

Inspiration.md

Inspiration

• https://github.com/ixartz/Next-js-Boilerplate?tab=readme-ov-file

• https://github.com/thmsmtylr/turborepo-starter/tree/main

• https://github.com/nicnocquee/turborepo-tailwind-prisma-nextjs-starter

• https://github.com/mkosir/frontend-monorepo-boilerplate/blob/main/packages/ui-tailwind/src/Version/index.tsx boilerplate ou aller mprendre des trucs

• https://github.com/fellipeutaka/ultimate-app/blob/main/package.json

Article

RSC / Next14 RSC

• https://medium.com/@shanakaabeysinghe/mastering-form-development-fb9a55ecd67a

• Pas de solution quali sur le dark mode

  • Avant, un script en entête permettait d'appliquer le bon thème avant l'insertion du html. Mais là diff avec le serveur.

• https://medium.com/sopra-steria-norge/how-to-write-actual-api-middleware-for-next-js-2a38355f6674

• Protection des pages dans le middleware https://medium.com/@suhag_alamin/safeguarding-user-role-based-private-routes-in-next-js-13-or-14-app-router-a-step-by-step-guide-5ab5d4b4c0fb https://www.kravchyk.com/typescript-npm-package-json-exports/

• https://qr.zust.ai

Til.md

Choses apprises ou découvertes

Migrer de husky 8 à usky 9: https://remarkablemark.org/blog/2024/02/04/how-to-migrate-from-husky-8-to-9/

Mise en cache des dépendances sur vercel: le problème avec prisma (qui par défaut génère le client dans le node_modues) => "postinstall": "prisma generate" sources

• Pnpm:
  • npm ci <=> pnpm i --frozen-lockfile (voir ici)
• Github actions:
  • utiliser pnpm dans les action github https://davidmyers.dev/blog/how-to-deploy-to-vercel-with-github-actions
  • enregistrer le cache turborepo dans les actions Github here
  • déploiement sur Vercel fine tuné avec cette action github
  • Turborepo remote cache server avec les actions github here
  • Déployer sur github page (la doc tech/interne du projet par exemple ?) https://github.com/marketplace/actions/deploy-to-github-pages
• NextJS
  • Build standalone qui s'affranchit du répertoire node_module: https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files
  • I18n https://locize.com/blog/next-app-dir-i18n/
• Vercel:
  • Déployer une app next prébuildée avant de l'envoer à Vercel https://davidmyers.dev/blog/how-to-deploy-to-vercel-with-github-actions
  • On peut inspecter ce qui a été déployé sur Vercel avec vercel inspect [deployment-id or url]
• Prisma
  • Comparatif avec Drizzle ORM (https://www.prisma.io/docs/orm/more/comparisons/prisma-and-drizzle)
  • Comment: https://medium.com/@nexckycort/query-optimization-in-prisma-with-cache-in-node-js-0925eb0dbd69ache
• React
  • RSC: https://frontendmasters.com/blog/combining-react-server-components-with-react-query-for-easy-data-management/#toc-12#fromHistory
• Supabase
  • prisma/prisma#11643
• Framer motion
  • Réduire la taille du bundle puis lazy loader: https://github.com/enjidev/enji.dev/blob/main/apps/enji.dev/src/providers/FramerMotionProvider.tsx
• Postgresql: how sequence are named (because I needed to reset the auto increment for seed purpose)

Autres choses notées au détour de dev ce projet

A essayer un jour

Curiositée

• Déployer 2 sites web depuis e même monorepo: (si sur Vercel, il faut un 2ème "compte", mais un 2ème site sur ghpages avec la doc serait coolos)
• https://dev.to/4rokis/turborepo-example-4041 : multi apps in turbo and nested on front with next rewrite (doc and so on)

Services

• Vercel propose une DB Postgres
• Système de comentaires basés sur les discussion github gratos et oss: https://giscus.app/fr
• Pour crawler facilement https://github.com/apify/crawlee

Libs

• https://trpc.io/ to get client/server types correctly, fast and easy-pizy
• Zustand en remplacement de Redux
• tiptap editor: https://github.com/ueberdosis/tiptap?tab=readme-ov-file#examples-codesandbox-and-ui-templates#fromHistory
• Hocupocus

IA

• Copilot de github
• https://supermaven.com/

A lire

• https://steveholgado.com/

Perfectionnement

• Qu'est-ce qu'un tuple ?
• Maps / Set
• React: startTransition

Autres sites

• https://www.saasframe.io/join

Todo.md

Roadmap

Quitte à ne pas savoir quoi coder:

• apprendre
• packager sans over engineering
• Trouver de l'utile

TODO

Running:

• créer un repo github

• créer les comptes nécessaires

  • base de données
    • db de dev
    • db de prod
  • [ projet vercel]

• modifier les github action pour que les 2 apps se déploient

• faire un déploiement complet

• faire la migration à la main depuis le local

• Core

  • Datastore
    • Add Prisma ORM
    • Create a basc database model
    • Get a cloud service to store database(Supabase)
      • Generate Prisma client and push on remote service
    • Data lifecycle
      • Seed with reset
      • Migration & deployment
  • Load env with classic dotenv package
    • Add .env.example where we need
    • Use t3 for env usage
    • Make sure env is ok at starting the app (not while running)
  • Add type checking in every packages "check-types": "tsc --noEmit"
  • Add tsup on evey package
  • Form management with server components
  • Use trpc to comunicate with backend from the frontend api
  • Micro frontend and zone ?
  • Logger (fix existing pino in server component or find another one)

• App

  • Text editor
  • Authentification avec Supabase ou Clark

Idées app

• Un truc pour noter et organiser les idées, notes, listes. Ca pourrait servir à terme pour les mettre dans un LLM par exemple :)

Tech

• UI: saisie avec https://github.com/ueberdosis/tiptap-templates (refaire ça en local)
• Api avec trpc
• Authentification avec Clerk par exemple
• Publier un packages sur npm. Nécessitera de le compiler au sein du projet et plein d'autres chose. https://turbo.build/repo/docs/core-concepts/internal-packages

Lire cet article

Veille.md

• https://blog.stackademic.com/building-a-micro-frontend-application-with-next-js-14-2-and-tailwind-css-part-i-82d13cc207da