Ask HN: What are the best open source TypeScript projects I can learn from?

https://news.ycombinator.com/item?id=34205294

by pototo666 • 4 years ago

219 75 4 years ago

news.ycombinator.com

What are the best open source TypeScript frontend and backend real world projects I can learn from?

I am a self-taught web developers and I haven't worked for any good companies. There are no seniors reviewing my code.

My code quality can be improved but I don't know how. Maybe reading some good codebase is a way out.

I use React in frontend and express in Backend. Do you know any good OSS projects that use those stacks?

Maybe I should read popular OSS frameworks instead of web app's source code? I am thinking of changing my job, so reading real web app's source code might be more relavant.

I am very thankful for any advices. And Happy New Year!

bunnyfoofoo• 4 years ago

For backend and general typescript knowledge, I’d highly recommend Apollo GraphQL: https://github.com/apollographql/apollo-server

Check out their apollo-server and apollo-client repos. It’s a very useful codebase to be knowledgeable about. This is something you should mention in an interview as a strong positive if the company wants graphql experience.

darkest_ruby• 4 years ago

Fp-ts and io-ts, best examples of what functional programming along with strict type safety can achieve. The source code is a pleasure to read and explore

chrischen• 4 years ago

The author also writes some great articles on category theory that is approachable to TS developers.

td8• 4 years ago

I don't know about the quality, but Mattermost is in TS: https://github.com/mattermost/mattermost-webapp

nullandvoid• 4 years ago

This could be a good place https://create.t3.gg (understanding all the code generation would be useful, but also you can deep dive into any one of the type safe libraries).

TowerTall• 4 years ago

This book gave me a good push in the right direction when I was in the same situation as you many years ago. It gave me the tools I needed, and it is still very relevant today. "old but not obsolete" as they say in the terminator movie.

https://en.wikipedia.org/wiki/Code_Complete

sebrindom• 4 years ago

You should check out https://github.com/medusajs/medusa

It’s an open source commerce engine built in Node w. TypeScript. The domain is fairly easy to wrap your head around and the architecture and code quality are often praised.

m_a_g• 4 years ago

I want to ask the same question for Python and Go. I'd love to see some quality OSS using Python or Go and contribute to them if I can.

thejosh• 4 years ago

The best opensource projects that you'll stay interested in the medium-long term are projects you actively use. Anything else you'll get bored of.

gadflyinyoureye• 4 years ago

The same is true of a encyclopedia. If you try to read it directly, word after word, it is boring. However, if you treat it as a reference, as the OP is asking for in Go code, it can be helpful and possibly inspiring.

LudwigNagasena• 4 years ago

Library code is usually quite different from app code.

fifilura• 4 years ago

My reaction to that question regardless of language is that I expect to find some unreadable code soup.

Which probabaly has 100% test coverage but is abstracted to death.

Probaly the best codebase is something which does not pass scrutiny on every single line, but it "just works".

walthamstow• 4 years ago

There is a good thread on this for Python from the last couple of years. Try searching 'python read' or 'python codebase'

The top comment IIRC is about @tiangolo, the FastAPI guy

simonw• 4 years ago

I really enjoy reading Python code from https://github.com/encode/starlette and https://github.com/encode/httpx

qbasic_forever• 4 years ago

A lot of the Python standard library is written in Python and a good way to see idiomatic Python code. https://github.com/python/cpython/tree/main/Lib

k101• 4 years ago

I recommend to look at such project on go

https://github.com/containerd/containerd

https://github.com/tailscale/tailscale

krick• 4 years ago

Honestly, I don't find that very helpful. These, same as all that Hashicorp stuff, are pretty big and quite domain-specific projects, that are somewhat difficult to conceptualize about what they even do. As if the only thing go is being used for are all that distributed virtualization stuff.

Maybe at some point it is nice to look at them, but they don't look very approachable to me, if I just want to take a look at how code is normally written in go beyond some AoC-exercises. Like useful common patterns and such.

gkedzierski• 4 years ago

For Go, anything from Hashicorp https://github.com/hashicorp

makapuf• 4 years ago

Id say the go standard library, including /x/ extended stdlib

mirekrusin• 4 years ago

https://github.com/preludejs for lightweight functional approach.

okhobb• 4 years ago

I've found NestJs to be a very thoughtful application framework. I'd argue it demonstrates pro-level typescript coding.

https://github.com/nestjs/nest

jconley• 4 years ago

Nest is impressive. Especially if you came from .Net or Java. I just started a new project with Nest recently and it was a breath of fresh air. It has all the bits I had to add manually to other Node projects in the past. I feel like they go a bit over the top promoting design patterns in their documentation, though I appreciate how methodical they are with them in their own code.

lioeters• 4 years ago

This could be a good learning resource, a collection of client & server-side TypeScript projects.

Awesome TypeScript - https://github.com/dzharii/awesome-typescript

And here's a list of projects on GitHub tagged with the topic "TypeScript", sorted by most stars. Many build tools I see on the first page, starting with the TypeScript compiler itself - which is an impressive and interesting codebase, but it may not be so suitable for study purpose.

https://github.com/topics/typescript

You might enjoy learning from some books too.

The TypeScript Handbook - https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript Deep Dive - https://basarat.gitbook.io/typescript/

tuan3w• 4 years ago

Outline: https://github.com/outline/outline

One of the best code base that I have seen, not just TypeScript.

joshka• 4 years ago

Meta question: I wonder what it would take to splat a code quality metric on every github repo. Obviously this is a combination of subjective and objective factors, but I wonder if doing this in bulk would lead to a general improvement in the industry. Particularly paired with CoPilot and having some sort of feedback into the training this would be pretty neat...

tuxracer• 4 years ago

Senior dev here. Recently have some extra time. Happy to offer some code reviews to help you get started. Contact info in bio

zadler• 4 years ago

Zapatos, check out how it does type safe querying. Very impressive work and shows that typescript’s type model has a lot of power.

gmac• 4 years ago

Link: https://github.com/jawj/zapatos

ushakov• 4 years ago

tRPC, because you can learn a lot of type-inference tricks using generics and proxies

https://github.com/trpc/trpc

cehrlich• 4 years ago

tRPC is awesome, but it will teach you about typescript wizardry and how to write a library, not how to write an application.

austin-cheney• 4 years ago

I am working on a Node/browser OS in TypeScript to solve for decentralization/peer-to-peer relations if you want to check that out.

https://github.com/prettydiff/share-file-systems

Selling points:

* No frameworks and minimal dependencies

* The GUI loads in the browser with full state restoration in about 260ms in Chrome.

* Full peer to peer file system access

* Original WebSocket service support faster than the popular NPM packages (ws, socket.io)

* Peer-to-peer end-to-end test automation in the browser that is faster and easier than the big browser test automation applications (puppeteer, playwrite)

* I am currently working on a streaming command terminal for the browser for support for for things like vim and irssi. The current experimental terminal only supports basic command input/output

zhardy• 4 years ago

I have the same question, but for Java. I'm was front-end developer that now learning back-end.

cheeseblubber2• 4 years ago

I work on Linen https://github.com/Linen-dev/linen.dev its an open source Slack alternative. Its a full stack typescript app. We do a mono repo with typesharing between both client and backend. If you are looking for a realworld typescript SAAS app this would be good

wiseowise• 4 years ago

Is server source code included? If yes, in which package is it? Thanks!

cheeseblubber2• 4 years ago

Most of the code is here: https://github.com/Linen-dev/linen.dev/tree/main/apps/web

We're in the process of moving components out in to their own package so they can be shared between different clients. https://github.com/Linen-dev/linen.dev/tree/main/packages

We use next js but is in the process of migrating the backend code to a node service

plondon514• 4 years ago

I definitely wouldn’t say it’s the “best” open source project but my side project https://github.com/codeamigo/codeamigo is a full stack project written in TypeScript and I’m happy to answer any questions you have about it. Full project here: https://codeamigo.dev

mhluongo• 4 years ago

I'm part of the team that maintains a digital wallet browser extension with a really clean codebase — check it out.

https://github.com/tallyhowallet/extension

pcthrowaway• 4 years ago

Thanks for sharing. How did you generate the ASCII diagram in your README?

FBISurveillance3• 4 years ago

* https://github.com/excalidraw/excalidraw

* https://github.com/calcom/cal.com

* https://github.com/supabase/supabase

* https://github.com/appwrite/appwrite

* https://github.com/n8n-io/n8n

* https://github.com/appsmithorg/appsmith

* https://github.com/directus/directus

* https://github.com/Budibase/budibase

robertwt7• 4 years ago

https://github.com/hasura/graphql-engine

https://github.com/hoppscotch/hoppscotch

https://github.com/nestjs/nest

arcturus17• 4 years ago

Thanks, these are extremely interesting beyond TypeScript.

TAForObvReasons2• 4 years ago

n8n is not open source and many of the projects are using a hybrid licensing model. Code on GitHub is "source available", not necessarily "open source"

johnfn• 4 years ago

If you want to learn from source code, source available is all you need.

thisjeremiah• 4 years ago

https://github.com/excalidraw/excalidraw/blob/master/src/com...

files like this make me feel like my files aren’t too long after all :)

MuffinFlavored• 4 years ago

for anybody who doesn't want to click, it's 6400+ lines of code

vijaybritto• 4 years ago

Extremely interesting projects here. Not just for typescript but also for

Monorepo tooling, Build optimizations, complex webpack setups, performance tuning. For example from the above list I went through cal.com repo and I saw that the way they have organized dev and prod builds and openAPI spec browsing tooling is very good. This is exemplary for anyone wanting to look at good ways to setup a project!

Peer_Rich2• 4 years ago

hey there, cofounder of cal.com here. thank you for the flowers -- means a lot. zomars (https://github.com/zomars) has been making a ton of great improvements lately

pototo6662• 4 years ago

Thanks for the list.

I've decided to dive deep into cal.com. Its tech stacks are exactly same as mine.

And thank everyone giving advice!

Peer_Rich2• 4 years ago

cofounder of cal.com here, thank you @pototo666 the typescript, tailwind, nextjs, trpc stack has been amazing so far

mohanarpit• 4 years ago

Co-founder of Appsmith here. Thanks a lot for mentioning our project.

We love Typescript and chose it to take advantage of static type checking. At Apspmith, since we are a small team, we wanted to reduce management overheads and opted for a monorepo layout. Typescript went a long way in helping us organize the code into modules and let our build scripts compile relevant modules for each changeset.

Having said that, Appsmith has been a learning experience in efficiently running a large project with lots of files. Feel free to dig into our source code to learn from our experiences. :)

schwartzworld• 4 years ago

It's not popular, but I'm very proud of my ADT library I'm working on. https://github.com/schwartzworld/schtate

Benjamin_Dobell• 4 years ago

Depends whether you actually want to learn TypeScript or just how to consume it. More than 90% of TypeScript code I've seen is not actually taking advantage of TypeScript's static analysis capabilities to write safer more scalable code and is instead just being used as glorified autocomplete.

If you actually want to learn, then take a look at the implementation for stuff like Zod: https://github.com/colinhacks/zod/tree/master/src/helpers

You can do some really powerful stuff that hugely benefits your team. A decent example I stumbled across recently when I went to release my own library (that does the same thing) is https://github.com/leancodepl/ts-routes

thdc• 4 years ago

So true, a lot of people I've worked with treat adding types as a box to check (eg afterthought) rather than something to leverage.

reidjs• 4 years ago

I wouldn’t discount the value of glorified autocomplete. Being able to hit the period (.) and see what’s inside this imported object is great, especially when consuming libraries as you mentioned.

eyelidlessness• 4 years ago

Your suggestion of zod is a very good one. I’ll take it further and suggest that if one wants to really embrace and learn TypeScript (or type systems like it), implementing your own zod-like library is an excellent learning experience. Building a set of composable “parse, don’t validate” primitives will help you think in the way the type system is designed to be most effective. And you’ll generally write better code for it.

gherkinnn• 4 years ago

How about a different approach. Instead doing more of the same, branch out in to a different language. Elm, for example. [0]

Elm specifically will teach you lots on the static types end of things. And it will only take a weekend or so of tinkering to show improvements in your TS life.

0 - https://elm-lang.org/

nomilk• 4 years ago

This is such a valuable question for other languages too. I wonder if there's a repo/resource listing such projects..

I asked a similar question about ruby some time ago, and came across one good recommendation (https://github.com/sharetribe/sharetribe), but would love to have many more. I'm also self-taught and feel I haven't read enough great ruby code!

tajaheidkebbie• 4 years ago

Lolssss you’ve all been duped… this list will be used to train an ai model, which will then take over your job!!

99112000• 4 years ago

You should contribute to open source project that has reviewers, it's like doing a test and having it graded by teachers.

pototo6662• 4 years ago

Special thanks, you make a great point!

I will pick one interesting open source project and start contributing.

tttcos• 4 years ago

This one is good reading, it's the backend of a real-time 2D multiplayer war game: https://github.com/wight-airmash/ab-server

fatih-erikli• 4 years ago

https://github.com/fatih-erikli/table

https://github.com/fatih-erikli/sketchbook

reducesuffering• 4 years ago

https://github.com/shadcn/taxonomy has been very useful for me learning the new Next.js 13 app/ React Server Components in Typescript.

christofosho• 4 years ago

This is not exactly a codebase, but I believe it merits mention in this thread as a great TypeScript learning resource.

https://type-level-typescript.com/

A short online course about intermediate-to-advanced level TypeScript.

tejinderss• 4 years ago

Similarly the typescript courses at http://executeprogram.com are pretty good.

satvikpendem• 4 years ago

See also, Total TypeScript: https://github.com/total-typescript

The course is paid but the exercises are free on GitHub, you just won't get any explanations if you get an exercise wrong.

mburst• 4 years ago

I started working on a project to solve this exact issue https://github.com/mburst/protomolecule. I haven't spent too much time building out other frameworks, but the first framework is React + Express which fits what you're looking for

Matthias247• 4 years ago

The vscode codebase might be interesting.

dimitropoulos• 4 years ago

https://github.com/type-challenges/type-challenges

The type challenges are a great thing to learn with. Admittedly, they're a bit intense but it's a great way to "expand your awareness".

As a shameless self plug, I'm participating in a 140-day long project to do them all (complete with video explanations) that just started yesterday, if you wanna follow along: https://github.com/type-challenges/type-challenges/issues/21...

Ask HN: What are the best open source TypeScript projects I can learn from?

Related Stories