export const metadata = {
  title: 'Open-Source',
  description:
    'Some of the OSS packages and projects I published and contribute to.'
}

export const revalidate = process.env.VERCEL_ENV === 'production' ? 86400 : 30

# Open Source

This page lists some of the open source packages and repositories I have published or contribute to.

Most of them are published under my company [47ng](https://github.com/47ng).

## Frontend

My tech stack of choice for server-rendered React apps is [Next.js](https://nextjs.org/)
and [TailwindCSS](https://tailwindcss.com/).

For client-heavy apps, I like to use [Chakra-UI](https://chakra-ui.com/) to
quickly build beautiful and accessible interfaces.

Because of its CSS-in-JS approach, it's a bit awkward to use with the
new Next.js app router and server components, so I'm now letting Tailwind deal
with styling. ChatGPT makes a perfect companion for refactoring one into the other
anyway. 😄

<NpmPackage
  pkg="next-usequerystate"
  repo="47ng/next-usequerystate"
  accent="text-indigo-500 dark:text-indigo-400"
  versionRollout={6}
/>

<NpmPackage
  pkg="nuqs"
  repo="47ng/nuqs"
  accent="text-indigo-500 dark:text-indigo-400"
  versionRollout={6}
/>

## Backend

I like to use [Fastify](https://fastify.io) to build backend services in Node.js.

What I like about it:

- More opinionated and structured than Express.js
- Damn fast
- Easy to write plugins
- Good defaults out of the box

<NpmPackage
  pkg="fastify-micro"
  repo="47ng/fastify-micro"
  accent="text-amber-500"
/>

<NpmPackage
  pkg="fastify-cron"
  repo="47ng/fastify-cron"
  accent="text-green-500"
/>

<GitHubRepo slug="47ng/actions-clever-cloud" />

## Security & Encryption

<NpmPackage pkg="session-keystore" repo="47ng/session-keystore" />

I wrote an article about how I came to build `session-keystore`:

import { BlogPostEmbed } from 'ui/embeds/blog-post-embed'
import { resolve } from 'lib/paths'

<BlogPostEmbed
  filePath={resolve(
    import.meta.url,
    '../posts/(content)/2019/how-to-store-e2ee-keys-in-the-browser/page.mdx'
  )}
/>

<NpmPackage pkg="@47ng/cloak" repo="47ng/cloak" />

<GitHubRepo slug="SocialGouv/e2esdk" />

## Environment Variables

The [Twelve Factor App](https://12factor.net/config) model uses environment
variables extensively for configuration and passing runtime data to a web app.

However, there are things to look out for when working with environment
variables, so I built a few packages to make their management easier and more
secure:

<NpmPackage pkg="redact-env" repo="47ng/redact-env" />

<NpmPackage pkg="env-alias" repo="47ng/env-alias" />

<NpmPackage pkg="@47ng/check-env" repo="47ng/check-env" />

## Miscellaneous

<NpmPackage pkg="@47ng/codec" repo="47ng/codec" />

My longest-running open-source project is the Arduino MIDI Library. I learned programming in C++ in 2008 with this project and discovered my passion for open-source software.

<GitHubRepo slug="FortySevenEffects/arduino_midi_library" />

The source code for this website! Made with <a href="https://nextjs.org" className="underline">Next.js</a>, <a href="https://tailwindcss.com" className="underline">TailwindCSS</a> and <a href="https://mdxjs.com/" className="underline">MDX</a>.

<GitHubRepo slug="franky47/francoisbest.com" />
