Step 1: Bootstrap appen din med create-t3-app
Se de enkle instruksjonene på https://create.t3.gg/ for å starte prosjektet ditt.
Etter dette burde du ha et prosjekt med Next.js, Tailwind, Prisma og NextAuth.
Step 2: Legg til litt standardkode
I Ur har vi noen spesifikke ting vi legger til hvert prosjekt:
- En
modulesfolder for hvert “område” med forretningslogikk. - En
ToastContextmed en assosiert “hook” og “Provider” for å enkelt vise frem toasts i appen. - En kombinasjon av twMerge og classNames.
- En
AppShell-komponent som brukes til å tegne applikasjonens skall (header og sidebar). - En mengde biblioteker vi bruker, som f.eks.
react-hook-form.
Legg til det du selv føler du trenger i prosjektet ditt for å kunne jobbe produktivt.
Step 3: Finn ut av hva du ønsker å lage
Spørsmålet du nå må stille deg er: Hva ønsker du å lage? Er det en CRUD-skjerm? En form? En tabell? En liste? Tenk i form av funksjonalitet: Hva er det appen min trenger?
Neste steg er å gå til TailwindUI sin komponentliste og finne de komponentene som best kan brukes til å lage funksjonaliteten du ønsker. La oss si at vi ønsker å lage en enkel skjerm med statistikk, og at vi dermed trenger simple stats in cards-komponenten.
Velg “React” og kopier koden.
Step 4: ChatGPT
Start økten din med ChatGPT med å gi følgende prompt (eller lignende):
I want you to assist me with taking examples from TailwindUI and creating reusable Typescript React components from them.
I want you to take the data fields that are shown in the examples and use them as reference for the required props of the components.
You can replace the "classNames" function with a custom function we already have in our library also called "classNames". It can be imported from `~/util/classNames`.
Please stand by while I find a component to copy to you.
ChatGPT har en tendens til å være ganske ordrik, så hvis du som meg vil ha korte svar, kopier dette istedenfor:
I want you to assist me with taking examples from TailwindUI and creating reusable Typescript React components from them.
I want you to take the data fields that are shown in the examples and use them as reference for the required props of the components.
You can replace the "classNames" function with a custom function we already have in our library also called "classNames". It can be imported from `~/util/classNames`.
Please stand by while I find a component to copy to you.
Please be short and concise in your answers, you should only need to provide me with the code.
Ta så komponenten du ønsker konvertert til en gjenbrukbar variant og kopier den inn til ChatGPT.
Ut av dette bør det komme en komponent du enkelt kan bruke i appen din.
Etter å ha gjort dette en del ganger vil du ha en god del gjenbrukbare Typescript React-komponenter som kan bli brukt til andre ting. Som kan være ekstremt nyttig. Det eneste du trengte å gjøre var å spørre pent.
Step 5: Legg til implementasjon
Neste steg innebærer at du må gjøre litt innsats selv, og implementere funksjonaliteten du faktisk skal ha. Lag en ny Next side i appen din, koble denne opp mot et tRPC-endepunkt hvis det er det du ønsker, og vis frem noen stats med den nye komponenten din.
Dette er siste steg med denne metoden. Når du er ferdig med funksjonaliteten du har jobbet på, gå tilbake til steg 3 og gjenta steg 3-5 så mange ganger du trenger til du har prototypet ferdig.
Step 6: Bonus steg I, skreddersøm
Alle TailwindUI-komponenter bruker indigo som standardfarge, og har spesifikke meninger om padding, marginer, farger, avrunding, også videre. Personlig liker jeg disse standardvalgene.
Om du heller ønsker å sette ditt eget preg på utseende, kan du bruke IDEn din til å gjøre større søk/erstatt-kommandoer. For eksempel ved å bytte ut “indigo” med “emerald”. Samtidig kan du også be ChatGPT gjøre dette for deg.
Bytt ut promptet i steg 4 med følgende (see den uthevede teksten):
I want you to assist me with taking examples from TailwindUI and creating reusable Typescript React components from them.
I want you to take the data fields that are shown in the examples and use them as reference for the required props of the components.
You can replace the "classNames" function with a custom function we already have in our library also called "classNames". It can be imported from `~/util/classNames`.
Please stand by while I find a component to copy to you.
**Please swap the use of the "indigo" colour to use "emerald" instead. Also I want you to remove all rounding from the components, and whereever there is a title, it should use the font "Playfair Display".**
Please be short and concise in your answers, you should only need to provide me with the code.
ChatGPT burde nå gi deg komponenter som er mer rettet mot den spesifikke stilen du forespør.
Step 7: Bonus steg II, hosting
Det kan hende du har lyst til å vise frem den nye prototypen din til venner, familie eller kunder.
Den kjappeste måten å få t3-appen din live på er å bruke Vercel og Supabase til hosting, og en vilkårlig DNS-leverandør.
Se følgende ressurser for å sette opp dette:
Du kan forvente at vi skriver en egen guide om dette på denne nettsiden meget snart.
Hva bør du forvente?
Om du er en noenlunde erfaren utvikler burde du kunne prototype en webapp med grunnleggende funksjonalitet på under en dag. Avhengig av ambisjonsnivået, så klart.
I Ur Solutions har vi brukt metodologien over til å lage en webapp vi aktivt bruker per i dag til å styre likviditeten vår. Utvikling av denne appen for noen år tilbake ville tatt måneder med arbeid, mens vi i dag klarte å få en initiell versjon opp på bare noen få dager.
Kommer snart
I del 2 av denne artikkelserien skal vi bruke FloatUI med metoden fremvist her til å lage en enkel webapp og hoste den på Vercel og Supabase.
Følg med!
