Joy of Code

🧑‍🎨 What is Joy of Code?

Joy of Code is a digital garden growing curious minds with a wide variety of topics from web development to web design. If reading isn't your thing watch the video version on YouTube.

🤗 Contribute

First time contributors are welcome — in fact this is the reason why I wanted to make it possible to contribute so you can get your first open source contribution.

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.

🙏 Use Issues to Find Answers

If you need help or something changed and isn't working when following a post or video series I made you can go to the issues and find the issue and bring it to my attention — I hope in general people help each other out this way.

This avoids having to hunt down the issue you have in YouTube comments or places like Discord that aren't indexed by search results and are lost forever.

🧭 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
Analytics use Google Analytics
Newsletter uses Buttondown when I remember to send one 🤭
Post views use Supabase
Social share images use 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.