TypeScript for Scalable Web Projects

🏆 How GreatFrontEnd's code base is structured 🏆 Some practices we use on a semi-large code base like greatfrontend.com → Typesafety: We use TypeScript. Code with types eliminate an entire class of bugs and is easier to read and maintain → Linting and formatting: We use Prettier and ESLint with a set of opinionated lint rules. Our lint rules enforce import order, object keys order, enable fix + format on save in IDE → Monorepo: We use Turborepo with a few packages – app, questions, guidebooks, lint rules, etc. → Package management: We use pnpm, which is a great package manager → UI components: A11y is hard, so we use headless components (Radix UI) that come with built-in behavior and a11y and customize styling. Alternatives include Headless UI, Ark UI and Base UI → Routing: Next.js is our choice of meta frameworks. The `/app` directory is for routing only. All UI code and data fetching code are in separate directories. That way we can move/rename routes easily without affecting downstream files → Data fetching: We use tRPC as a typesafe data fetching approach → Statically generated atomic CSS: The easiest way to have a scalable CSS file size in large code bases. Use libraries like Tailwind and StyleX → Z-index list: Z-index wars is the most commonly fought war in front end development. We defined a list of z-indices and use them for global-level elements like dialogs, popovers, tooltips, etc. This is a tricky topic so I might go deeper into it another day. → Content: All content lives in the repository and not in an external CMS. That way we can ensure the same content across development, staging, and production environments. → Util libs: We standardized on utility libraries like Lodash, date-fns, hooks (usehooks-ts) → Separate product code vs common code: We have clear separation of common code vs product-specific code. Design system components should not embed business logic. → Presentation vs Business: Split components according to presentational vs business logic (frequently called small vs dumb but I don't like the word "dumb). That way it's easier to test them → File organization: Modularize and co-locate code by products/features/verticals. All code related to auth, marketing, purchases, blog, etc. are in their own directories → State management: For most apps, most state is server-fetched data, which Tanstack Query does an excellent job in managing. For local state, reach for context before using 3rd party libs like Redux, Zustand, Jotai → Performance: Optimize when you encounter perf problems. No need for useMemo, useCallback yet. The React compiler will help with this in future anyway #react #nextjs #tailwindcss #javascript #typescript #supabase #prisma #eslint

After 5 years of building Graphite, I'm convinced that choosing the right architecture isn't about following industry trends—it's about optimizing for your team's ability to ship fast. When we started Graphite, we made what many considered a contrarian bet: no microservices, no polyglot architecture, no distributed complexity. Just TypeScript everywhere, in a single monorepo with a single server image. What we've learned: **Composition beats distribution at small scale** Instead of breaking apart our system into microservices, we broke apart our code into composable modules. Modular code in a single deployment is often simpler than distributed services when you're under 40 engineers. **TypeScript everywhere eliminates entire bug classes** Sharing types between frontend and backend means API contract changes are caught at compile time. When you change a type, TypeScript shows you exactly what broke and where. **Turbo transformed our build experience** We went from "rebuild hell" (where small server changes triggered lengthy builds) to sub-second builds for unchanged packages. 10x+ speedup through intelligent dependency graphs. **Functional composition over classes** We actively discourage classes because they hide dependencies, encourage large files, and lead to inheritance hierarchies. Pure functions with explicit dependencies are easier to test and reason about. **Postgres + Redis + S3 handles everything** For years, we powered our entire PR inbox with custom Postgres join queries. Only now scaling to dedicated search indices. Simple architectures scale further than you think. The philosophy that guides us: good architecture should reduce complexity, not add it. We focus on three sources of complexity: change amplification, cognitive load, and unknown unknowns. This approach isn't universal—microservices solve real problems around team autonomy and independent scaling. But for a cohesive product with a growing team, the coordination overhead often outweighs the benefits. The real test isn't how your architecture looks in a diagram—it's how it feels to work with every day. https://lnkd.in/eWBfKzjN

#InsightsByJahanzaib Why #TypeScript? Taking #JavaScript to the Next Level 🚀 TypeScript has rapidly become a favorite tool for developers looking to build scalable, reliable, and maintainable applications. Think of it as JavaScript's powerful sidekick—same foundation, but with additional features that make code more robust and developer-friendly. Here’s a breakdown of why TypeScript is worth considering for your next project. --- 💡 What is TypeScript? TypeScript is a superset of JavaScript that introduces static typing. In other words, it allows you to define types for your variables, functions, and parameters. This small addition brings huge benefits in terms of code quality and collaboration. 🔍 Why Choose TypeScript? 1. Type Safety 🛡️ Types prevent many runtime errors by catching potential issues early. This makes it easier to avoid those pesky bugs that surface only after deployment. 2. Improved Developer Experience 👩💻👨💻 With better IDE support, TypeScript provides intelligent autocompletions, inline documentation, and refactoring tools, which enhance productivity and help new team members get up to speed faster. 3. Scalability for Larger Projects 📈 As applications grow, maintaining code becomes challenging. TypeScript’s structure helps with readability and consistency, especially in large codebases with multiple contributors. 4. Backward Compatibility with JavaScript ♻️ TypeScript code compiles to JavaScript, so it runs anywhere JavaScript does! You can gradually adopt TypeScript in your existing JavaScript projects. --- 🛠️ Core Features of TypeScript 🔤 Static Typing: Assign specific types to variables, functions, and parameters, reducing runtime errors. 📑 Interfaces: Define the shape of objects, enforcing structure and ensuring consistency across code. 🔢 Enums: Give names to sets of numeric values, improving code readability. 🔄 Generics: Write flexible functions and classes that can work with any type, adding both power and safety to reusable code. 🌍 Real-World Applications Using TypeScript From Microsoft to Slack, and even Airbnb —many top companies rely on TypeScript to enhance their frontend and backend code quality, ensuring robust applications that can handle scale. --- Embrace TypeScript to write cleaner, safer, and more efficient code. Ready to level up your #JavaScript? Drop a comment on your favorite TypeScript feature below! 👇 --- #TypeScript #JavaScript #WebDevelopment #CleanCode #CodingStandards #Frontend #Backend #DevTools #DeveloperExperience

I believe Typescript is the best language for most new software companies. There are many reasons for this, but here are some of the most important: 1. Static typing across your whole codebase When you’re building a startup, you’re constantly strapped for time. It’s in your best interest to build as fast as you can, and static typing guardrails help you move quickly without breaking things. Having shared types + utilities across client and server code make this even more effective. I’ll make another post soon about some of the libraries to help you accomplish this. 2. Minimal context switching Using different languages for client and server code makes context switching more difficult than it already can be. The muscle memory of writing a code block to iterate through an array of values, for example, is constantly interrupted. You have to think differently to write idiomatic code, since languages have different patterns and paradigms. 3. Open-source support As a founder or early employee, you should try to spend all of your time focused on what differentiates your product in the market. Conversely, you should minimize the amount of time you spend on the aspects that don’t differentiate you. These pieces are still important to get right, so you can lean on open-source libraries to avoid reinventing the wheel. Typescript’s open source community is massive and only getting bigger. More helpful libraries = less code you have to write yourself. 4. It’s industry-standard When I was going through my last recruiting cycle (before joining Notion), 100% of the companies I spoke with used Typescript on the frontend, and ~60% used Typescript on the backend. The full-Typescript stack is battle-tested by many of the companies you know and love, so you’ll be set up for success. I use “most” in this claim because every business is different. Ultimately you should choose your stack according to your business needs, but for companies who are building a web application (most), Typescript is a safe bet. If there are any other compelling reasons to use Typescript you can think of, or if you disagree with me, let me know. I always appreciate hearing new perspectives, especially those that don’t align with my own.