Joy of Code

🧑‍🎨 What is Joy of Code?

Joy of Code is a digital garden growing curious minds focused on web development and web design.

▶️ YouTube

You can also find my videos on YouTube.

💰️ Support

You can support my work by becoming a patron or becoming a YouTube member starting low as $1/month.

🤗 Contributing

At the end of each post there's a direct link to the Markdown file of the post you can edit within GitHub. Read the contributing guidelines to learn more.

💬 GitHub Discussions

I use GitHub Discussions to track breaking changes for posts which you can use to report issues.

🧭 Technologies

• ⚡️ SvelteKit is used for the frontend with server-side rendering and prerendering static pages

• 🔌 GitHub API is used to manage content so GitHub is the content management system

• The editor uses ⚡️ SvelteKit for the frontend and 📜 Monaco Editor (code editor which powers VS Code) as the editor to manage content using the 🔌 GitHub API

• ✍️ Posts are stored inside the posts folder and are used to build the page using the 🔌 GitHub API but data is where posts metadata is stored in a single posts.json to serve as a database

• The project is hosted on Vercel and uses ignored build step with git diff HEAD^ HEAD --quiet . ':(exclude)posts/*' ':(exclude)data/*' to avoid redeploy for those special folders

• The tests use Playwright for end-to-end testing

• Newsletter uses Buttondown when I remember to send one 🤭

• Post views use Supabase

• Social share images are generated using mattcroat/social-share-images

📜 Setup

The project uses 📦️ pnpm but any package manager is going to work.

👬 Clone the project.

git clone https://github.com/mattcroat/joy-of-code.git

📦️ Install the dependencies.

pnpm i

💿️ Run the development server with pnpm run dev or build and preview the project with pnpm run build && pnpm run preview.

pnpm run dev