When you use an AI tool to create a new project it will automatically select certain technologies to implement and stand up your project with. Why these? I will try to explain. Keep in mind this is a simple explanation, there’s a lot more to read and discover beyond what I’ve put down here.

I created 2 template projects to help me with this blog. One for the UI and one for the APIs. Now you would think this is a simple matter, it’s a barebones template. My Cursor prompt was literally: “Create a barebones template”. But there is some nuance and detail that went into the technology decisions behind these templates. I will do my best to talk through some of those decisions here and it may give you some insights into why these technologies were chosen and how it can inform your decisions for your own projects.

UI Template

Cursor Prompt: “Please create an extremely barebones nextjs project in the `ui-template` folder”

Cursor did what I bid, created a new nextjs project and with it came two other decisions: Typescript for the programming language and Tailwind for the styling framework.

What is Next.js

If you ask an LLM to create a UI for you, especially Bolt or V0 or Replit, they will always make it using Next.js. Why? Because it’s good, it’s extremely common, it’s easy to learn, use, and deploy, and it just works.

Next.js is a framework for React (React is a front-end JavaScript library, we don’t have time for that tangent we will go over it later). Next.js is powerful because it lets you do server-side rendering with React. What that means, very simply, is the Next.js server runs in the cloud and when the user goes to www.your-website.io the server will take your React code and turn it into HTML code then send that HTML to the web browser. This is juxtaposed with other implementations of React where the HTML is pre-built and hosted statically on a file server.

It’s like, Next.js is a street vendor cooking meals (HTML pages) on demand whereas a SPA (Single Page Application) is a vending machine giving you things that are already packaged and ready to go. It’s not a perfect analogy but it’ll do.

Before frameworks like Next.js, the JavaScript would compile the HTML in the browser at runtime. This was bad because SEO crawlers were bad at indexing pages that were JavaScript heavy. They would see JavaScript gobbledygook and be unable to make sense of it. With Next.js, and server-side rendering, the SEO crawlers now see HTML with all the content it contains allowing it to properly index your site.

This has become less of a problem in recent years, but it didn’t stop the death of create-react-app and SPAs. Now most people learn and know Next.js or Vite; and with these LLMs deciding to use these technologies too, the popularity won’t slow down.

What is Typescript

TypeScript is like JavaScript but crunchier. The biggest thing that TypeScript brings to the table is typing which gives a structure to data objects. And this typing is enforced, if you have the wrong type then the compiler (or ideally the linter) will yell at you. For us programmers this tough love is great because it reduces the chances of a bug or error later on when the code is sent to production.

Previously in JavaScript you would have an object that was just whatever. (If you know TypeScript already, imagine if everything was of type any). If that object was being passed around from component to component, like lets say a Chat object with a name each component would have to know to access the name of the Chat with chat.name. But some contractor makes a new component and erroneously references chat.title and breaks the UX. Well in JavaScript the only way to catch this is to visually see the name of the chat is not appearing. In TypeScript, you have a Chat type with a name field. And if you try to reference chat.title then the code would fail to build and you were able to catch that error.

This example is a little facile but it makes the point of why TypeScript is used now and popular among senior and serious programmers. It might feel like more work now, to go and add types and make more work, but all it takes is a few bugs like the chat.title one to make you realize yeah TypeScript isn’t that bad.

Again, there’s a lot more to TypeScript and its advantages over pure JavaScript but this is a basic enough.

What is Tailwind

Tailwind is divisive is what it is, but I’m sold on it. Usually we use CSS to give our web components some style. To give it margin, or a background color, or font-size. And you can group these styles together into a class, and then add that same class to multiple elements. What Tailwind does is provides some easy to use classes that you can add to your React components without needing to deal with the raw CSS. It makes development faster and will make your site more consistent. I remember life before Tailwind and I do not wish to go back.

Summary

So those are the 3 basic technologies I wanted to put into my template. There will be other packages and tools that we’ll use and I will go over why they get used so often. The biggest thing to take away is that there are a lot of options out there for how to build a tool. These technologies are some of the most popular and least offensive ones you’ll run into. There are tons on online resources and tutorials, existing and well maintained packages, and the job market for both hiring managers and job seekers is one of the largest. You’ll never be criticized for learning these things.

Has ChatGPT used a technology and you want to know more about it? Ask me, maybe I know.