Recently I came across the keyword T3 stack.
To summarize, it is a project that lets you design as full-stack from the start, without separating front-end and back-end. It is still an early-stage model, so adopting it in actual production right away is still a ?, but there is a lot in the concept and direction that I resonate with, so I want to start gathering hands-on experience with it ahead of time, bit by bit.
Background of the background
It started with the idea of building a TODO list as a Chrome extension, both for personal use and to share lightweight schedules with team members (something like Monday.com, Kakao Works, etc.).
When I searched YouTube for how to build Chrome extensions, there were quite a lot of different approaches. I picked things up visually by watching what other developers were doing on YouTube. Most of them either don't share the source, or it's awkward to share, and on top of that many examples just stop halfway. As always, the easiest thing to follow without thinking is the official Google example.
https://developer.chrome.com/docs/extensions/mv3/getstarted/
Chrome Extensions getting started guides - Chrome Developers
Overview of all Chrome Extensions getting started guides.
developer.chrome.com
From there I started looking for a decent reference for the TODO list. It's barely "customization" — more like Ctrl+C, V — but the conditions were actually fairly picky. I was looking for an example that would let me set up React, Next.js, and a DB as the basics, and as a bonus also try out the recently trending Tailwind CSS.
In the process I came across MobX, which plays a similar role (state management) to Redux,
https://ko.mobx.js.org/README.html
MobX에 대하여 · MobX
<img src="https://mobx.js.org/assets/mobx.png" alt="logo" height="120" align="right" />
ko.mobx.js.org
and along the way I also discovered the keyword ToDoMVC.
TodoMVC
Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more
todomvc.com
Oh! Why did I only find out about this now? I had no idea things like this existed?! I couldn't help thinking that. It was a whole new world!
It was an open-source movement (or activity?) where people share examples implementing the same GUI in different languages, so you can compare strengths and weaknesses. The downside, though, was that the examples were already pretty old code. Some of them rely on things that are no longer supported. On top of that, there was relatively little code involving Next.js and Firebase (DB and auth). And there was relatively more Angular than React, so its usefulness for actual building (rather than just learning) was on the lower side.
Another open-source project I came across in the process: "RealWorld. How."
https://www.realworld.how/docs/intro
Introduction | RealWorld
See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec ??
realworld-docs.netlify.app
A TODO-list example is a good way to learn basic CRUD and state-management patterns when picking up a new language, but it doesn't let you experience the basic features you need when actually building a real product (signup, account deletion, account permissions, reporting, authentication, etc.). That's exactly why "RealWorld. How" was created. But that goes in a different direction from what I was originally aiming at, so I bookmarked it for now.
Searching a bit further still, the keyword I came across was T3.
Normally, when developing, the front-end and back-end are split between different people, but T3 is a project that designs both at once (so-called full-stack). The basics include Next.js, TypeScript, and Tailwind CSS, and for back-end-style work it comes pre-wired so you can use tRPC, Prisma, and NextAuth.js.
Getting started is, naturally, very easy.
Just like running CRA in React, in T3 you start a project with something like npm create t3-app@latest.
Alright, let's begin!
A reference that convinced me that T3 isn't a thyroid test but a development stack: the blog of startup consultant json
: https://json.media/blog/why_i_recommend_t3_stack (besides this post, the blog has a lot of other valuable content..)
스타트업에 T3 Stack 을 추천한 이유
Full-stack TypeScript 개발을 위한 최고의 방법
json.media
Official reference: https://create.t3.gg/
Create T3 App
The best way to start a full-stack, typesafe Next.js app.
create.t3.gg
