Step 1: Bootstrap your app with create-t3 app
See the simple instructions on https://create.t3.gg/ to start your project.
After this, you should have a project with Next.js, Tailwind, Prism and NextAuth.
Step 2: Add some standard code
In Ur we have some specific things we add to each project:
- AND
Modulifolds for each “area” of business logic. - AND
ToastContextwith an associated “hook” and “Provider” to easily showcase toasts in the app. - Una combinação TWMerge duck ClassNames.
- AND
AppShellComponente usado para drawar o shell do aplicativo (tipo e sidebar). - A plethora of libraries we use, such as e.g.
react-hook-form.
Add what you feel you need to your project to be able to work productively.
Step 3: Find out what you want to make
The question you now have to ask yourself is: What do you want to create? Is that a CRUD screen? And the shape? A table? And the leaf? Think in terms of functionality: What is it that my app needs?
Nextstep is to go to TailWinDui's component list and find the components that can best be used to create the functionality you want. Let's say that we want to create a simple display of statistics, and that we thus need simple stats in cardscomponenti.
Select “React” and copy the code.
Step 4: ChatGPT
Start your session with ChatGPT by giving the following prompt (or similar):
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 tends to be pretty wordy, so if, like me, you want short answers, copy this instead:
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.
Takk det du vil til en reusable variant og kopiere det til ChatGPT.
Outta questo deve essere un componento che puoi utilizzare facilmente nella tua app.
After doing this quite a few times you will have a good number of reusable Typescript React components that can be used for other things. Which can be extremely useful. All you had to do was ask nicely.
Step 5: Add Implementation
Nextstep implies that you need to make some effort yourself, and implement the functionality that you are actually supposed to have. Create a new Next page in your app, hook it up to a TRPC endpoint if that's what you want, and show off some stats with your new component.
This is the last step of this method. When you're done with the functionality you've been working on, go back to step 3 and repeat steps 3-5 as many times as you need until you've finished prototyping.
Step 6: Bonus Step I, tailoring
Tutti i componenti tailWinDui usati Indigo as the default color, and have specific opinions on padding, margins, colors, rounding, also on. Personally, I like these default choices.
If you'd rather put your own stamp on appearance, you can use your ID to do larger search/replace commands. For example, by replacing “indigo” with “emerald”. At the same time, you can also ask ChatGPT to do this for you.
Replacing the prompt in step 4 with the following (see the highlighted text):
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” color to use “emerald” instead. Also I want you to remove all rounding from the components, and where ever 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 should now provide you with components that are more geared towards the specific style you are requesting.
Step 7: Bonus Step II, Hosting
You may want to show off your new prototype to friends, family or customers.
The quickest way to get your t3 app live is to use Vercel a Supabase for hosting, and an arbitrary DNS provider.
See the following resources to set this up:
You can expect us to write a separate guide about this on this website very soon.
What should you expect?
If you're a fairly experienced developer, you should be able to prototype a web app with basic functionality in less than a day. Depending on the level of ambition, of course.
På Ur Solutions, vi har metodika för att crea ett webapp som vi som du dag för att vår liquiditet. Developing this app a few years back would have taken months of work, whereas today we managed to get an initial version up in just a few days.
Coming soon
På parte 2 av denne artikelserien, vi er FloatUI med de methode her för att crea ett webapp och host it på Vercel och Supabase.
Stay tuned!
