Skip to content

Instantly share code, notes, and snippets.

@tilap

tilap/Dev.md

Last active August 20, 2024 14:36
Show Gist options
  • Save tilap/9ff1ae45f8ce0e81fd1e247e6c26c8e9 to your computer and use it in GitHub Desktop.
Save tilap/9ff1ae45f8ce0e81fd1e247e6c26c8e9 to your computer and use it in GitHub Desktop.
Download ZIP
Make it
Raw
Dev.md

Immédiat

TODO: protéger ses server actions

  experimental: {
    serverActions: {
      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
    },
  },
  • Voir Vite et Vitest
    • test d'une lib
    • test end to end d'une ui

Idées en cours:

  • app pour les pet sitters:
    • cible: petsitter/sittés
    • parcours:
      • un petsitter créé un compte (nom/ertc)
      • il créé une mission:
        • date de début, date de fin thérique
        • taches à effectuer:
          • nom de la tache, fréquence, type de tache (photo ou action text à cocher)
      • il envoit un lien au pet sitté
    • avec le lien, le petsitté accède à la fiche mission
      • il voit 'historique
    • a la date de début, chaque jour, la liste des taches à faire est affichée, elles peuvent être cochées, on peut ajouter des photos du jours
    • à la fin de la mission, on peut supprimer tout ou garder, demander l'avis de la personne, ...

Backoffice: juste pour la partie gestion de l'app, vue des stats, config, etc.

La création de compte doit être fluide au moment ou c'est intéressant Stockage images peut être lourd En quoi c'est mieux qu'un mail? En rien... Pas de valeur ajoutée quoi. Sauf si on peut "certifier" un pet sitter par exemple?

Etapes suivantes:

  • Mutualiser du code si il y en a

    • grouper les actions some toutes génériques et muti utilisable
    • Déplacer dans la lib mui comme ça le code de l'app est + léger et c'est mieux rangé (plus de component dans l'app, juste des containers)

  • Ajouter une authetification emai/mot de passe => on prend la place d'un user

Fonctoin:

  • lister les utilisateurs

  • consulter la page d'un

  • editer un utilisateur (mettre à jour le rôle et le nom des utilisateurs )

  • Ajouter un test end to end avec https://playwright.dev/docs/writing-tests par exemple

  • gérer le cas de "pas de connexion internet"

Grandes lignes

Comptes et secrets

Vercel

  • Team ID team_hNpTGI7P0CqAXLsIqcPysqgL
  • User ID 1v7Cw1UpSbAKIxeupCKNBKGf
  • TOKEN EiW3cgfPcTNNitHRwIJ6gC9f
  • Project ID
    • Backoffice: prj_ME5ja0b8Gv3AypT20Hb0Yw3NycOS
    • Web: prj_tPzxqGThwdztD7xL87BcWVNqOc3N
  • api token BKGUEV2HMQ633Qi4GY4HWLAT (for pulling config or push deployments)

Backoffice

Web

Supabase

  • DB password: 44J7LUhcMBkYfqx7cFjGvO
  • postgresql://postgres.zxpilxalfiqzlmrouobb:[YOUR-PASSWORD]@aws-0-eu-west-2.pooler.supabase.com:6543/postgres
postgresql://postgres.zxpilxalfiqzlmrouobb:[email protected]:6543/postgres
  • DB Password: 44J7LUhcMBkYfqx7cFjGvO
  • postgresql://postgres.wawulehzccgylokyasbm:[YOUR-PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres => postgresql://postgres.wawulehzccgylokyasbm:[email protected]: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:[email protected]/fs_production?sslmode=require"
Raw
Inspiration.md

Inspiration

https://www.youtube.com/watch?v=5s6dIkrv6Y4

Article

RSC / Next14 RSC

https://reetesh.in/

Raw
Til.md

Choses apprises ou découvertes

Proxy https local rapide https://medium.com/homullus/safe-r-usage-of-react-server-actions-with-rhf-and-tanstack-query-b1c79d8894a0 https://next-safe-action.dev/docs/introduction

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

Libs

IA

A lire

Perfectionnement

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

Autres sites

// A real Zod schema validator object.
export const CreateUserDTO = z.object({
  name: z.string().min(1),
  email: z.string().email().min(1),
  age: z.coerce.number().min(18),
});

// It's resulting type: { name: string; email: string; age: number }
export type CreateUserDTO = z.infer<typeof CreateUserDTO>;

https://www.npmjs.com/package/geist

/* Authorization and Permissions check. Input Validation, Sanitization and Transformation. Invoking a handler that performs the actual work. Transforming the response into a public DTO, in a step known as API-minimization. Responding with data or errors in a standardized envelope. */ https://github.com/markomitranic/safe-server-action/blob/main/src/app/QueryClientWrapper.tsx

Raw
Todo.md

Roadmap

Quitte à ne pas savoir quoi coder:

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

TODO

  • Auth

  • 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
      • Check why it does not work with supabase
      • 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
      • [/] Validation avec zod
      • ?
    • Use trpc to comunicate with backend from the frontend api (when not server action)
    • Micro frontend and zone ?
    • Logger
      • faire un package logger
      • mettre pino (il y a les levels de log, la possibilité de faire des children, et isomorphique)
      • L'utiliser dans l'app
      • brancher un service de log derrière
      • Ajouter une correlation id pour les logs front/back

  • App

    • Authentification avec NextAuth
      • Login et password (local)
      • Différence authentification / user
      • Avoir des champs spécifiques
    • Text editor
    • Toaster avec sonner

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

Lire cet article

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment