Open sourced my independently developed review component SaaS 🔥 🚀

👋 Hello everyone, after a year of independent development, today I open-sourced my Next.js App - Chirpy , a comment component SaaS that mainly protects privacy and supports theme customization.

Too long to read the version 🙈

This is GitHub Repo , welcome to light 🌟 collection, welcome to contribute. For beginners and intermediate engineers here is everything you need to know about how a complete SaaS works, perfect for learning.

official website is currently in beta testing, welcome to try it. docker deployment if you want the data to be completely under your control.

Preview 👀

Comment component, supports rich text editing and markdown shortcuts (markdown live preview, similar to typora writing experience)

Theme customization 🌈 (more customization items are under development)

Component usage analysis panel (Analytics) 📈

Beginning ❤️

When I was building my own blog , I wanted a Disqus , but Disqus itself has been advertising privately without user consent in recent years, betting user privacy, etc. The problem is widely criticized. Here are some reports I retrieved:

Bloomberg LawDisqus Faces $3 Million Sanction Over Alleged GDPR Breachesfor multiple breaches of EU privacy law.
Disqus facing $3M fine in Norway for tracking users without consent

I have also used gitalk utterances . They have an obvious problem that they only support GitHub login, and are limited by the GitHub API, and many functions are not easy to do, such as component Usage Analytics/Analytics.

The components on the market basically lack the ability to customize the theme. If you put them on your own blog or website, there is a high probability of a sense of incongruity due to the inconsistency of the design. Therefore, theme customization is also necessary.

Based on the above problems, I plan to make a comment component system that is completely open source and can also solve the above pain points.

Technology selection and evolution 🕺

Next.js 🆚 Gatsby

Back in 2020, the React SSR framework Next.js launched SSG (Static Site Generation) and ISR (Incremental Static Regeneration), which quickly became hot, compared to the hot static site generators in 2019. Gatsby has a clear advantage. (If you re-select today, remix is also a very good choice. 😄)

	Gatsby	Next.js
SSR	🔴	✅
SSG	✅	✅
ISR	🔴	✅
BUILD SPEED	🐌	⚡️
HMR SPEED	🐌	⚡️

npm trend graph :

The 161e0f6bd29158 ISR especially suitable for commenting component scenarios. Imagine there are thousands of iframe comment components, rendering with ISR has both SSR-like flexibility and CDN acceleration (reduce concurrent rendering). The following figure is an ISR representation:

Chirpy selected egoist beginning of the Next FullStack the Starter as the start point, the main technical stack is: Next.js + Prisma is + GraphQL + TypeGraphQL + Tailwindcss . However, in the process of in-depth development, it was found that ORM Prisma does not support Subscription/real-time API , which is a function that is more important to user experience. After careful consideration, backend was migrated to Hasura .

Prisma ➡️ Hasura

Strictly speaking, Prisma and Hasura are not the same thing. Hasura is a GraphQL server that supports high concurrency, supports adding, deleting, modifying and querying databases with GraphQL (such as PostgreSQL ), and also provides a complete set of permission control. Prisma is an ORM. In order to support GraphQL, the corresponding resolver resolver 161e0f6bd29278 and the corresponding permission control need to be handwritten. The development cost is higher, but it is more flexible than Hasura.

	Prisma	Hasura
language	TypeScript	haskell
Type	ORM	GraphQL Server
GraphQL API	🟡 Manual	✅ Generated by database schema
High concurrency	🟡 Limited by Node.js performance and application architecture	✅ (50M memory supports 1000 q/sec)
Subscription	🔴	✅
flexibility	✅	🟡

Architecture of Hasura Applications

passportjs ➡️ next-auth

The user login system (third-party login + traditional account password) also has two more mature options. At the beginning, the choice was passportjs . In the in-depth development, many OAuth and security-related problems were encountered, and finally the refactoring was changed to next- auth. In contrast, next-auth is more modern (provides React Hooks, the library itself is also written in TypeScript), more secure, and easy to integrate with Next.js.

	passportjs	next-auth
third party login	✅	✅
Email password login	✅	✅
Login without password	✅	✅
safety	🟡	✅
React Hooks	🔴	✅
Next.js integration	🔴	✅

Tailwindcss ＆ twin.macro & radix-colors

Tailwind is an atomic CSS development framework, after familiar with it, CSS development efficiency can be significantly improved 🚀; at the same time, it provides a complete and proven default theme configuration , and a rich set of SaaS UI library (It is not completely free, but it will not be too difficult to write a similar UI after learning tailwind. More importantly, there are commonly used SaaS UI designs for reference, which is very helpful for my hard-working design 🥳).

In fact, Chirpy is used with twin.macro , which is a library that combines tailwind and CSS-in-JS (styled-component & emotion). Earlier versions of tailwind would encounter style classes that cannot be overwritten in componentized development. , because tailwind itself outputs atomic classes:

<p className="w-1 h-1">...</p>

// 输出 CSS 👇

.w-1    {
  width: 0.25rem;
}

.h-1    {
  height: 0.25rem;
}

The twin.macro version, which overrides styles !important

<p tw="w-1 h-1">...</p>

// 输出 html & css 👇

<p class="random-name">...</p>

.random-name    {
  width: 0.25rem;
  height: 0.25rem;
}

twin.macro also supports verification during build, and illegal styles will report errors (such as w-0.1 ), which can avoid writing useless styles. And free combination of multiple variants, for example: sm:(bg-black hover:(bg-white w-10)) . Of course it's not perfect, tailwind can reuse existing CSS classes, and almost every tw will generate new styles, and the final output bundle size twin will be larger. It also does not support some official plugins for , such as: 161e0f6bd295e8 tailwindcss-typography (for the editor). So the two are used together.

The Dark mode of tailwind mainly relies on the dark: variant (as below 🌰), almost every color value has to be written twice, my ideal dark mode is automatic.

<div class="bg-white dark:bg-gray-900">...</div>

Therefore, 2 sets of light/dark colors are required here, and radix-colors is meeting the requirements. But how does it work with tailwind? The answer is: CSS Variable .

First configure the tailwind theme:

module.exports = {
  theme: {
    colors: {
      bg: `var(--tw-colors-bg)`
    },
  },
}

Then inject styles into the application:

:root {
  --tw-colors-bg: white;
}
:root.dark {
  --tw-colors-bg: black;
}

with 161e0f6bd2969e next-themes automatically switch the website CSS class when the user switches mode:

// next-themes 在用户切换 mode 时自动切换 .dark 有无
<html class="dark">...</html>

This will automatically refresh the colors when the app switches modes.

The theme customization function of the component is also solved here. Chirpy only needs to inject user-defined variable values when the component is rendered.

Slate ➡️ tiptap

The core of the comment component experience is the rich text editor. At the beginning, Chirpy used the slate because it is better combined with React, but it also encountered some problems in the later stage of development, such as markdown shortcuts implementation is not smooth, Later, it was migrated to tiptap , which has more complete functions, and the bottom layer is also based on the more stable ProseMirror .

	slate	tiptap
based on	React	ProseMirror
stability	🔴 issue	✅
Markdown shortcuts	🔴	✅
feature richness	🔴	✅

apollo-client ➡️ urql

apollo-client is without a doubt the most popular GraphQL client and was the initial choice. Just before preparing to open source, I encountered 2 very strange bugs (some states are not updated). Search-related issues also learned Apollo to open source as a marketing tool , I have always been a headache coupled with its large bundle size, then determined migrate to urql this small number of libraries, the fact that the reconstruction Great value, reducing bundle size by nearly 45KB.

	apollo-client	urql
bundle size	🟡 33kb	✅ 7.1kb
Next.js integration	🔴	✅ next-urql
Document Caching	🔴	✅
Stale while Revalidate	✅	✅

Plausible 📈

At the beginning, Chirpy implemented a data statistics/Analytics by itself, but later found that there are many things to consider (aggregated data, performance, charts, etc.), which seriously dragged down the development progress. Finally migrated to 161e0f6bd2993e Plausible , which is also an open source SaaS To better protect user privacy, Chirpy uses it to run on a separate server instead of using its services directly.

Chirpy reuses Plausible's front-end code to fit the comment component's scenario. At the same time, it also puts the script of sending data directly into the bundle of Chirpy + the API interface of remapping data sending, which can solve the problem of inaccurate data caused advertisement filter filtering out the request So you can use Chirpy as a free and highly accurate Analytics tool 😉.

Plausible's revenue is also the goal of Chirpy's efforts💪

CI & CD ♻

The CI/CD of the project mainly relies on GitHub Actions. The development process is based on PR, and each PR check-in will run Cypress (end-to-end testing), jest (unit testing), and output Next.js bundle size changes (to avoid unintentional introduction of code to cause bundle size problems).

hasura schema CI/CD will be introduced later to reduce the problem of human flesh upgrade schema.

Deploy 💿

It is divided into Next.js, Hasura and Plausible parts:

• Next.js is a natural choice to deploy to the company that developed it → Vercel is the best choice. Compared with similar services (such as netlify ), the optimization effects such as build performance and images are better, and the deployment experience is also first-class.
• Hasura prepends a Caddy HTTP Server to automatically sign HTTPS domain names and prepares for future support for elastic load balancing.
• Plausible instances are deployed separately to avoid affecting business data, and Caddy HTTP Server is also added.
• Hasura and Plausible have each deployed a DigitalOcean virtual machine, which is mainly cost-effective and easy to use.

Cloudflare Images subsequent image uploads, which are fully functional and cost-effective.

Long-term planning 🛸

The comment component is only my first step. After the function is gradually improved, Chirpy will also consider making intercom (as shown below). Hasura + WebSocket architecture is naturally suitable for this lightweight chat application. Chirpy's goal is to create a complete open source user communication solution.

community 🏘

As an open source project, the community is something I value very much, and I encourage everyone to contribute (issue, discussion, PR). With a certain income, the plan will regularly give active developers a certain amount of financial support to give back to the community.

Thank you so much for being here, and welcome to the Chirpy community to play 🙌.