[{"_1":2,"_105":-5,"_106":-5},"loaderData",{"_3":4},"root",{"_5":6,"_23":34},"blog",{"_7":8,"_28":29},"metas",[9],{"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_24":25,"_26":27},"slug","markdown-guide","title","How to Write Markdown for Blogs and Projects (For Myself)","date","2025-09-15","excerpt","A practical guide to authoring Markdown for both blogs and projects, with examples for headings, images, code, and links.","tags",[20,21,22,23],"markdown","how-to","content","projects","author","Chris Kwok","image","/images/apple.jpeg","bySlug",{"_11":30},{"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_24":25,"_26":27,"_22":31,"_32":33},"\n# How to Write Markdown for Blogs and Projects\n\nThis guide shows exactly how to write Markdown that renders nicely on this site for both blog posts and project pages. It covers frontmatter, images, headings, links, code blocks, lists, and important limitations.\n\nNote: Place your `.md` files in the correct directory. The filename (without `.md`) becomes the slug.\n- Blog posts: `app/content/blogs`\n- Project pages: `app/content/projects`\n\n## Shared authoring rules\n\n### Images\nThis site rewrites relative image paths so you can reference files by filename only, as long as they live in `public/images`.\n\n- Use `apple.jpeg` or `./apple.jpeg` and it will render as `/images/apple.jpeg`.\n- Absolute URLs, protocol-relative (`//`), data URIs, and root-based paths (`/images/...`) are left as-is.\n- **New:** You can specify width and height in the title attribute for responsive images.\n\nExamples:\n\n![Basic image](apple.jpeg)\n\n![Image with title](apple.jpeg \"Shiny Apple\")\n\n![Image with width and height (WxH format)](apple.jpeg \"Screenshot 400x300\")\n\n![Image with width and height (explicit format)](apple.jpeg \"width=500 height=400\")\n\n![Image with only width](apple.jpeg \"width=300\")\n\n![Image with only height](apple.jpeg \"height=200\")\n\n![Inline demo via root path](/images/apple.jpeg)\n\nTips:\n- Put assets in `public/images`.\n- In frontmatter, `image: \"apple.jpeg\"` works the same way as inline images.\n- Width/height specifications are parsed from the title and added as HTML attributes.\n- Supported formats: `300x200`, `width=300 height=200`, `width=300`, `height=200`.\n\n### Headings and text\n\n# H1 heading\n## H2 heading\n### H3 heading\n\nParagraphs support bold, italics, links, and inline code:\n- Bold: **strong text**\n- Italic: _emphasis_\n- Link: [Go to projects](/projects)\n- Inline code: `pnpm run dev`\n\n### Code blocks\n\nFenced code blocks preserve formatting. Add a language hint for syntax color:\n\n```ts\nexport function hello(name: string): string {\n return `Hello, ${name}!`;\n}\n```\n\n```bash\npnpm install\npnpm run dev\n```\n\n### Lists and blockquotes\n\n- Unordered item 1\n- Unordered item 2\n - Nested bullet\n\n1. Ordered item\n2. Another item\n\n> Blockquotes render with a left border and italics.\n\n### Limitations\n- Tables are not supported by this site’s renderer. Prefer bullet lists to present structured information.\n\n## Blog posts\n\nPlace files in `app/content/blogs`. Minimal frontmatter:\n\n```yaml\n---\ntitle: \"My First Post\"\ndate: \"2025-09-15\"\nexcerpt: \"One‑sentence summary that appears in lists and at the top of the post.\"\ntags: [\"notes\", \"demo\"]\nauthor: \"Your Name\"\n# image: \"hero.jpg\" # optional cover image stored in public/images\n---\n```\n\nContent example:\n\n```md\n# My First Post\nWelcome! This post demonstrates basic formatting.\n\n## Section\nWrite short paragraphs. Use images from public/images:\n\n![Diagram](diagram.png)\n```\n\n## Projects\n\nPlace files in `app/content/projects`. Typical frontmatter:\n\n```yaml\n---\ntitle: \"Awesome Project\"\ndescription: \"One-sentence overview of what this project does.\"\ntechnologies: [\"TypeScript\", \"React\", \"Tailwind CSS\"]\nlinks:\n demo: \"https://demo.example.com\"\n github: \"https://github.com/you/repo\"\n live: \"https://example.com\"\nfeatured: true\ndate: \"2025-07-06\"\nstatus: \"completed\" # one of: completed | in-progress | planned\n# image: \"screenshot.png\" # optional cover image in public/images\n---\n```\n\nField notes:\n- description: Shown in the projects list and at the top of the project page.\n- technologies: Array of strings rendered as badges.\n- links: Any of demo/github/live is optional. Shown as action buttons when present.\n- featured: If true, surfaces higher in lists.\n- status: One of `completed`, `in-progress`, `planned` for a status badge.\n- image: Optional cover image; follows the same image rules as blogs.\n\nSuggested body structure:\n\n```md\n# Awesome Project\nA short lead-in sentence or two.\n\n## Project Overview\nWhat it is and why it exists.\n\n## Features\n- Fast\n- Accessible\n- Easy to deploy\n\n## Tech Stack\n- TypeScript, React, Tailwind CSS\n\n## Lessons Learned\nKey takeaways from building the project.\n\n## Results\nAny impact, numbers, or outcomes.\n\n![Screenshot](screenshot.png)\n```\n\n## Checklists before publishing\n\nBlog posts:\n- title, date, excerpt, tags, author are present\n- Optional cover image placed in `public/images` and referenced as `image: \"filename.ext\"`\n- All inline image files exist in `public/images`\n- Readable headings and short paragraphs\n\nProjects:\n- title, description, technologies, date, status are present\n- Optional links (demo/github/live) added if available\n- Optional cover image placed in `public/images` and referenced as `image: \"filename.ext\"`\n- Content includes Overview, Features, Tech Stack, and Results/Learnings\n\n## Conclusion\n\nYou now have a reliable template for writing Markdown for both blogs and projects on this site. Create a new `.md` in the appropriate directory, add the frontmatter, write your content, and reference images from `public/images` by filename.","html","

How to Write Markdown for Blogs and Projects

This guide shows exactly how to write Markdown that renders nicely on this site for both blog posts and project pages. It covers frontmatter, images, headings, links, code blocks, lists, and important limitations.

Note: Place your .md files in the correct directory. The filename (without .md) becomes the slug.

Blog posts: app/content/blogs
Project pages: app/content/projects

Shared authoring rules

Images

This site rewrites relative image paths so you can reference files by filename only, as long as they live in public/images.

Use apple.jpeg or ./apple.jpeg and it will render as /images/apple.jpeg.
Absolute URLs, protocol-relative (//), data URIs, and root-based paths (/images/...) are left as-is.
New: You can specify width and height in the title attribute for responsive images.

Examples:

$\"Basic$

$\"Image$

$\"Inline$

Tips:

Put assets in public/images.
In frontmatter, image: "apple.jpeg" works the same way as inline images.
Width/height specifications are parsed from the title and added as HTML attributes.
Supported formats: 300x200, width=300 height=200, width=300, height=200.

Headings and text

H1 heading

H2 heading

H3 heading

Paragraphs support bold, italics, links, and inline code:

Bold: strong text
Italic: emphasis
Link: Go to projects
Inline code: pnpm run dev

Code blocks

Fenced code blocks preserve formatting. Add a language hint for syntax color:

export function hello(name: string): string {\n  return `Hello, ${name}!`;\n}\n

pnpm install\npnpm run dev\n

Lists and blockquotes

Unordered item 1
Unordered item 2
- Nested bullet
\n

Ordered item
Another item

\n
Blockquotes render with a left border and italics.
\n

Limitations

Tables are not supported by this site’s renderer. Prefer bullet lists to present structured information.

Blog posts

Place files in app/content/blogs. Minimal frontmatter:

---\ntitle: "My First Post"\ndate: "2025-09-15"\nexcerpt: "One‑sentence summary that appears in lists and at the top of the post."\ntags: ["notes", "demo"]\nauthor: "Your Name"\n# image: "hero.jpg"  # optional cover image stored in public/images\n---\n

Content example:

# My First Post\nWelcome! This post demonstrates basic formatting.\n\n## Section\nWrite short paragraphs. Use images from public/images:\n\n![Diagram](diagram.png)\n

Projects

Place files in app/content/projects. Typical frontmatter:

---\ntitle: "Awesome Project"\ndescription: "One-sentence overview of what this project does."\ntechnologies: ["TypeScript", "React", "Tailwind CSS"]\nlinks:\n  demo: "https://demo.example.com"\n  github: "https://github.com/you/repo"\n  live: "https://example.com"\nfeatured: true\ndate: "2025-07-06"\nstatus: "completed" # one of: completed | in-progress | planned\n# image: "screenshot.png" # optional cover image in public/images\n---\n

Field notes:

description: Shown in the projects list and at the top of the project page.
technologies: Array of strings rendered as badges.
links: Any of demo/github/live is optional. Shown as action buttons when present.
featured: If true, surfaces higher in lists.
status: One of completed, in-progress, planned for a status badge.
image: Optional cover image; follows the same image rules as blogs.

Suggested body structure:

# Awesome Project\nA short lead-in sentence or two.\n\n## Project Overview\nWhat it is and why it exists.\n\n## Features\n- Fast\n- Accessible\n- Easy to deploy\n\n## Tech Stack\n- TypeScript, React, Tailwind CSS\n\n## Lessons Learned\nKey takeaways from building the project.\n\n## Results\nAny impact, numbers, or outcomes.\n\n![Screenshot](screenshot.png)\n

Checklists before publishing

Blog posts:

title, date, excerpt, tags, author are present
Optional cover image placed in public/images and referenced as image: "filename.ext"
All inline image files exist in public/images
Readable headings and short paragraphs

Projects:

title, description, technologies, date, status are present
Optional links (demo/github/live) added if available
Optional cover image placed in public/images and referenced as image: "filename.ext"
Content includes Overview, Features, Tech Stack, and Results/Learnings

Conclusion

You now have a reliable template for writing Markdown for both blogs and projects on this site. Create a new .md in the appropriate directory, add the frontmatter, write your content, and reference images from public/images by filename.

\n",{"_7":35,"_28":91},[36,58,72,82],{"_10":37,"_12":38,"_39":40,"_41":42,"_47":48,"_52":53,"_14":54,"_55":56,"_26":57},"graduation-playbill","Graduation Digital Playbill","description","A responsive full-stack digital playbill website to replace paper programs for the annual graduation show. With comments feature allowing attendees to upload comments and share their thoughts.","technologies",[43,44,45,46],"TypeScript","React","Tailwind CSS","Supabase","links",{"_49":50,"_51":50},"demo","https://2025-fss-graduation-show.netlify.app/","live","featured",true,"2025-07-06","status","completed","/images/grad-1.webp",{"_10":59,"_12":60,"_39":61,"_41":62,"_47":67,"_52":53,"_14":71,"_55":56,"_26":-7},"the-dictionary-hub","The Dictionary Hub","A web-based dictionary utilizes web scraping from sources like Cambridge, Oxford, and Merriam-Webster, providing a seamless, convenient and ad-free user experience.",[63,64,65,44,43,66],"Python","BeautifulSoup4","FastAPI","Docker",{"_68":69,"_49":70,"_51":70},"github","https://github.com/Chris4496/TheDictionaryHub/","https://dictionary.chriskwok.dev/","2022-07-30",{"_10":73,"_12":74,"_39":75,"_41":76,"_47":79,"_52":80,"_14":81,"_55":56,"_26":-7},"workout-tracker","Workout Tracker","A mobile-friendly web-app that tracks workouts and keeps records",[77,78],"Svelte","Javascript",{},false,"2023-06-06",{"_10":83,"_12":84,"_39":85,"_41":86,"_47":87,"_52":80,"_14":90,"_55":56,"_26":-7},"vocab-exercise-generator","Vocab Exercise Generator","A simple web-app that generates fill-in-the-blank sentence exercises based on dictionaries' examples for weaker English learners",[63,64,65,77,78],{"_68":88,"_49":89,"_51":89},"https://github.com/Chris4496/VocabSentenceGeneratorFront","https://vocabgen.chriskwok.dev","2022-11-12",{"_37":92,"_59":95,"_73":98,"_83":102},{"_10":37,"_12":38,"_39":40,"_41":42,"_47":48,"_52":53,"_14":54,"_55":56,"_26":57,"_22":93,"_32":94},"\n# Graduation Digital Playbill\nA responsive full-stack digital playbill website to replace paper programs for the annual graduation show, serving over 500 attendees. Enhancing the traditional program experience.\n## Project Overview\nBeing in the Class Representative Committee, I was asked to build a digital playbill website for the graduation show. Built it in a few days using React and with the help of AI.\n## Features\n• **Beautiful Interface**
Designed with Tailwind CSS for a theme-fitting, responsive layout that works across devices, from mobile phones to desktops.\n\n• **Interactive Comments Section**
Attendees can upload comments, share thoughts in real-time. Powered by Supabase.\n\n• **Cast Photos and Videos**
An integrated gallery showcasing cast photos and embedded videos, allowing users to view performer highlights, behind-the-scenes footage, and personal introductions. This feature adds a visual and interactive element, making the playbill more immersive and memorable.\n\n• **Event Schedule and Details**
A comprehensive display of the graduation schedule, including performer names, performance times, and show summary.\n## Technical Architecture\n### Backend\n- Supabase: provides a simple SQL database\n### Frontend\n- TypeScript: for static type checking and code organization\n- React: for building the user interface\n- Tailwind CSS: for easy styling\n## Lessons Learned\nThis is the first website that I built for a client, so I'm afraid that I might not have fully met the expectations. However, the experience was incredibly valuable and taught me a key lesson:\n### Time Management and Planning\nMost of the time was not spent building the website, but instead it was spent tweaking with the client. I provided a demo version of the website to the client to see if the styles meets the client's expectation and see if the features are what they want. Communication is crucial to ensure I can use my time effectively and the client gets what they want.\n## Impact and Results\nThe website was used by over **500 attendees** during the graduation show. By going digital, we were able to save money by replacing hundreds of printed paper programs, making the event more eco-friendly. The comments section became a highlight, with attendees leaving messages of congratulations and encouragement, which added a personal and interactive touch to the event. The school appreciated how easy it was to update the schedule and details without needing to reprint anything.\n\n## Conclusion\nIn conclusion, this is my first time where I actually get to work on a real world project, serving a purpose. I learned how to effectively communicate with someone and work together to achieve the desired and satisfactory outcome. It also gave me the confidence to tackle more complex projects in the future.","

Graduation Digital Playbill

A responsive full-stack digital playbill website to replace paper programs for the annual graduation show, serving over 500 attendees. Enhancing the traditional program experience.

Project Overview

Being in the Class Representative Committee, I was asked to build a digital playbill website for the graduation show. Built it in a few days using React and with the help of AI.

Features

• Beautiful Interface
Designed with Tailwind CSS for a theme-fitting, responsive layout that works across devices, from mobile phones to desktops.

• Interactive Comments Section
Attendees can upload comments, share thoughts in real-time. Powered by Supabase.

• Cast Photos and Videos
An integrated gallery showcasing cast photos and embedded videos, allowing users to view performer highlights, behind-the-scenes footage, and personal introductions. This feature adds a visual and interactive element, making the playbill more immersive and memorable.

• Event Schedule and Details
A comprehensive display of the graduation schedule, including performer names, performance times, and show summary.

Technical Architecture

Backend

Supabase: provides a simple SQL database

Frontend

TypeScript: for static type checking and code organization
React: for building the user interface
Tailwind CSS: for easy styling

Lessons Learned

This is the first website that I built for a client, so I'm afraid that I might not have fully met the expectations. However, the experience was incredibly valuable and taught me a key lesson:

Time Management and Planning

Most of the time was not spent building the website, but instead it was spent tweaking with the client. I provided a demo version of the website to the client to see if the styles meets the client's expectation and see if the features are what they want. Communication is crucial to ensure I can use my time effectively and the client gets what they want.

Impact and Results

The website was used by over 500 attendees during the graduation show. By going digital, we were able to save money by replacing hundreds of printed paper programs, making the event more eco-friendly. The comments section became a highlight, with attendees leaving messages of congratulations and encouragement, which added a personal and interactive touch to the event. The school appreciated how easy it was to update the schedule and details without needing to reprint anything.

Conclusion

In conclusion, this is my first time where I actually get to work on a real world project, serving a purpose. I learned how to effectively communicate with someone and work together to achieve the desired and satisfactory outcome. It also gave me the confidence to tackle more complex projects in the future.

\n",{"_10":59,"_12":60,"_39":61,"_41":62,"_47":67,"_52":53,"_14":71,"_55":56,"_26":-7,"_22":96,"_32":97},"# The Dictionary Hub\n\nAn online dictionary that compiles results from different popular dictionaries to one place. Designed for convenience among students.\n\n## Project Overview\n\nThe Dictionary Hub is one of my earliest \"useful\" project. Completed on June 2022. It was built with Python FastAPI as its backend and JavaScript React as its frontend.\n\n## Motivation\nThis project aims to provide a place for students to look up definitions of words quickly. When I was learning English, I often found myself not understanding the definition of a word in a dictionary, and searching the word in a different one. This gave me the idea of this website, which compiles definitions from different dictionaries. Hoping to help my fellow students.\n\n## Current Features (Implemented)\n\n• **Word Search Functionality**
\nUsers can enter a word via a simple search bar, and the application queries definitions from multiple sources (e.g., Cambridge, Oxford, and Merriam-Webster) using web scraping techniques.\n\n• **Multi-Source Definitions Compilation**
\nThe app aggregates and displays definitions, pronunciations, and examples from various dictionaries in a single, unified interface, making it easier for users to compare results without switching sites.\n\n• **Synonyms and Antonyms Display**
\nIn addition to definitions, the application provides synonyms and antonyms for searched words, to enhance vocabulary building and offer a more complete linguistic resource.\n\n• **Word of the Day Feature**
\nUpon a user's launch of the site, it automatically displays definitions, pronunciations, and related information for Merriam-Webster's \"word of the day,\" encouraging daily vocabulary building and engagement.\n\n• **Chrome Extension Integration**
\nA dedicated Chrome extension that allows users to select text on any webpage and perform a quick search directly through The Dictionary Hub, providing on-the-fly lookups for enhanced convenience.\n\n• **Responsive Design for Mobile and Desktop**
\nThe application is optimized for various screen sizes, offering a fluid and adaptable layout that works intuitively on both mobile devices and desktops.\n\n• **Light and Dark Themes**
\nUsers can switch between light and dark modes to personalize their experience.\n\n## Technical Architecture\n\n### Backend (Python)\n- FastAPI: to provide api endpoints\n- BeautifulSoup: to scrape the information out of different online dictionaries\n\n### Frontend (TypeScript + React)\n- TypeScript: for static type checking and code organization\n- React: for building the user interface\n- Chakra UI: for providing a modern, responsive design system\n\n## Challenges and Solutions\n### Complex dictionary landscape\nWhen I was building this, web scraping was a big headache because these dictionary sites have very complex layouts and it's vastly different from scraping other data. With the nature of a dictionary, there can be multiple interpretation of a word with different meanings, part of speech and examples. It's very hard scrape them in an orderly way. \n\nAt the end, I successfully wrote scripts to scrape them. But it comes at a cost of messy code and nearly impossible maintenance.\n\n### Strict dictionary security\nInitially, for the \"Synonyms and Antonyms\" feature, I tried scraping the thesaurus.com website. After some exploring, I found that the frontend of the thesaurus.com website exposes its API endpoint for fetching the synonyms and antonyms from its database. I took advantage of that and called its API directly in my backend, to avoid the hassle of some complex scraping script.\n\nAnd 2 years later, I think they found out and removed the API. To ensure the feature still works, I used the datamuse API for getting synonyms and antonyms. This way is more reliable and consistent as if I built another script, they may change the layout and my feature will be unusable again.\n\n### CI/CD pipeline\nAlthough this is a small project and it probably doesn't require a CI/CD pipeline, I still implemented one just for the fun of it. I used \"cloud build\" to automatically build the docker image of the backend whenever the master branch of the GitHub repository have a new commit. After successfully building the image it will be deployed on \"cloud run\". Setting up the google cloud platform is a pain. I had to read A LOT of documentation and set a lot permissions. I took me 1 whole day to get it working.\n \n\n## Lessons Learned and Future Enhancements\nBeing one of the first project I wrote. I learned a lot.\n\n### Why clean code is important\nAfter 3 years, I read the web scraping code and it is pretty much uninterpretable. The code I wrote was messy and has little comments which doesn't explain the code. Modifying the code is impossible even for myself. The website is still working but if it breaks, fixing it will require massive amount of work and time.\n\nI understanding now maintaining a project is as important as building it. Writing clean code and documentation is absolutely crucial for myself and other coder who might maintain it.\n\n### You should read the docs first\nAs a beginner in web development, web-scraping and cloud services. I had to learn and figure out a lot of new stuff. I spent most of my time searching for ways to accomplish my development goals.\n\nTurns out a lot of things I want to do is already shown in the docs as an example. If only I had read the docs earlier, I wouldn't have wasted that much time trying to figure out the methods and settings.\n\n## Conclusion\nWrapping this up, The Dictionary Hub was one of my first real projects that actually felt useful, and I'm pretty proud of how it turned out back in 2022. It's basically a one-stop spot for looking up words from places like Cambridge, Oxford, and Merriam-Webster, all without ads or jumping between sites—super handy for students who were struggling with English vocab. Sure, dealing with web scraping got messy, and I learned the hard way that clean code and docs are a must if you want to fix stuff later without pulling your hair out. But hey, it taught me tons about FastAPI, React, BeautifulSoup, and even setting up a CI/CD pipeline on Google Cloud (which was a total pain but fun to figure out). For the future, I'd love build a prettier interface or maybe some AI-generated examples. If you're curious, go check out the live demo or the GitHub repo—let me know what you think!\n","

The Dictionary Hub

An online dictionary that compiles results from different popular dictionaries to one place. Designed for convenience among students.

Project Overview

The Dictionary Hub is one of my earliest "useful" project. Completed on June 2022. It was built with Python FastAPI as its backend and JavaScript React as its frontend.

Motivation

This project aims to provide a place for students to look up definitions of words quickly. When I was learning English, I often found myself not understanding the definition of a word in a dictionary, and searching the word in a different one. This gave me the idea of this website, which compiles definitions from different dictionaries. Hoping to help my fellow students.

Current Features (Implemented)

• Word Search Functionality
\nUsers can enter a word via a simple search bar, and the application queries definitions from multiple sources (e.g., Cambridge, Oxford, and Merriam-Webster) using web scraping techniques.

• Multi-Source Definitions Compilation
\nThe app aggregates and displays definitions, pronunciations, and examples from various dictionaries in a single, unified interface, making it easier for users to compare results without switching sites.

• Synonyms and Antonyms Display
\nIn addition to definitions, the application provides synonyms and antonyms for searched words, to enhance vocabulary building and offer a more complete linguistic resource.

• Word of the Day Feature
\nUpon a user's launch of the site, it automatically displays definitions, pronunciations, and related information for Merriam-Webster's "word of the day," encouraging daily vocabulary building and engagement.

• Chrome Extension Integration
\nA dedicated Chrome extension that allows users to select text on any webpage and perform a quick search directly through The Dictionary Hub, providing on-the-fly lookups for enhanced convenience.

• Responsive Design for Mobile and Desktop
\nThe application is optimized for various screen sizes, offering a fluid and adaptable layout that works intuitively on both mobile devices and desktops.

• Light and Dark Themes
\nUsers can switch between light and dark modes to personalize their experience.

Technical Architecture

Backend (Python)

FastAPI: to provide api endpoints
BeautifulSoup: to scrape the information out of different online dictionaries

Frontend (TypeScript + React)

TypeScript: for static type checking and code organization
React: for building the user interface
Chakra UI: for providing a modern, responsive design system

Challenges and Solutions

Complex dictionary landscape

When I was building this, web scraping was a big headache because these dictionary sites have very complex layouts and it's vastly different from scraping other data. With the nature of a dictionary, there can be multiple interpretation of a word with different meanings, part of speech and examples. It's very hard scrape them in an orderly way.

At the end, I successfully wrote scripts to scrape them. But it comes at a cost of messy code and nearly impossible maintenance.

Strict dictionary security

Initially, for the "Synonyms and Antonyms" feature, I tried scraping the thesaurus.com website. After some exploring, I found that the frontend of the thesaurus.com website exposes its API endpoint for fetching the synonyms and antonyms from its database. I took advantage of that and called its API directly in my backend, to avoid the hassle of some complex scraping script.

And 2 years later, I think they found out and removed the API. To ensure the feature still works, I used the datamuse API for getting synonyms and antonyms. This way is more reliable and consistent as if I built another script, they may change the layout and my feature will be unusable again.

CI/CD pipeline

Although this is a small project and it probably doesn't require a CI/CD pipeline, I still implemented one just for the fun of it. I used "cloud build" to automatically build the docker image of the backend whenever the master branch of the GitHub repository have a new commit. After successfully building the image it will be deployed on "cloud run". Setting up the google cloud platform is a pain. I had to read A LOT of documentation and set a lot permissions. I took me 1 whole day to get it working.

Lessons Learned and Future Enhancements

Being one of the first project I wrote. I learned a lot.

Why clean code is important

After 3 years, I read the web scraping code and it is pretty much uninterpretable. The code I wrote was messy and has little comments which doesn't explain the code. Modifying the code is impossible even for myself. The website is still working but if it breaks, fixing it will require massive amount of work and time.

I understanding now maintaining a project is as important as building it. Writing clean code and documentation is absolutely crucial for myself and other coder who might maintain it.

You should read the docs first

As a beginner in web development, web-scraping and cloud services. I had to learn and figure out a lot of new stuff. I spent most of my time searching for ways to accomplish my development goals.

Turns out a lot of things I want to do is already shown in the docs as an example. If only I had read the docs earlier, I wouldn't have wasted that much time trying to figure out the methods and settings.

Conclusion

Wrapping this up, The Dictionary Hub was one of my first real projects that actually felt useful, and I'm pretty proud of how it turned out back in 2022. It's basically a one-stop spot for looking up words from places like Cambridge, Oxford, and Merriam-Webster, all without ads or jumping between sites—super handy for students who were struggling with English vocab. Sure, dealing with web scraping got messy, and I learned the hard way that clean code and docs are a must if you want to fix stuff later without pulling your hair out. But hey, it taught me tons about FastAPI, React, BeautifulSoup, and even setting up a CI/CD pipeline on Google Cloud (which was a total pain but fun to figure out). For the future, I'd love build a prettier interface or maybe some AI-generated examples. If you're curious, go check out the live demo or the GitHub repo—let me know what you think!

\n",{"_10":73,"_12":74,"_39":75,"_41":76,"_47":99,"_52":80,"_14":81,"_55":56,"_26":-7,"_22":100,"_32":101},{},"# Workout Tracker\nA mobile-friendly web‑app that tracks workouts and keeps records.\n\n## Project Overview\nWorkout Tracker is a simple and focused hobby project I built in June 2023 to make logging sets painless on my phone. It’s fully client-side and fast, so I can open it at the gym, tap a few big buttons, and get back to lifting. Built with Svelte and JavaScript.\n\n## Motivation\nMost workout apps felt heavy or slow for simple strength sessions. I wanted a dead-simple way to record reps and weights without sign‑ups, ads, or a dozen screens. The goal was building something with more structure than a notes app, while keeping it simple and intuitive to use with only key features. Having frictionless logging: big controls, one screen per workout, and instant save to history.\n\n## Current Features\n• **PWA (Installable and Offline)**
\nInstall to the home screen and use it without a network connection. The app shell is cached for fast loads, and all records persist locally.\n\n• **Dashboard**
\nA clean landing with a bold title, a motivational quote, and a list of workouts shown as large, tappable cards (e.g., Bench Press, Pull Ups). An “Add Workout” button lets you create a new workout entry.\n![Dashboard](workout-1.webp \"width=350\")\n\n• **Workout Detail Layout**
\nEach workout has a top navigation bar (back button + workout name) and three tabs: Record, History, and Settings.\n![details](workout-2.webp \"width=350\")\n\n• **Record Tab**
\nReps selector and Weight (kg) selector with left/right arrows for quick changes. An “Add Set” button appends the current reps × weight to this session. A “Completed Sets” list shows sets in order, and “Record Workout” saves the whole session to history.\n\n• **History Tab**
\nA read‑only list of all sets saved for that date. Data is persisted in localStorage per workout.\n![history](workout-3.webp \"width=350\")\n\n• **Settings Tab**
\nDestructive actions scoped to the current workout: “Delete Records” clears logged sets/history; “Delete Workout” removes the workout from the app.\n![settings](workout-4.webp \"width=350\")\n\n• **Mobile‑first UX**
\nLarge, thumb‑friendly controls, consistent card and button styling, and clear hierarchy. Back navigation always returns to the dashboard.\n\n## Technical Architecture\n### Frontend (Svelte + JavaScript)\n- Svelte components for a small, reactive UI without much overhead\n- Tailwindcss and Hyper UI for a minimalistic design\n\n### Storage and Data\n- localStorage for persistence (no backend) so it works offline\n- Simple data model per workout:\n - Workout: name, id\n - Sessions keyed by date (YYYY‑MM‑DD)\n - Sets: array of { reps, weightKg } in order of entry\n- Guardrails for destructive actions (confirmations) to avoid accidental wipes\n\n## Challenges and Solutions\n### Keep it fast on mobile\nBig tap targets and minimal re-renders were important. Svelte’s reactivity made it straightforward to update only what changed while keeping the interface snappy.\n### Date handling\nDifferent phones format dates differently. I normalized the storage key to ISO‑like strings (YYYY‑MM‑DD), then formatted for display so the History tab is reliable across time zones and locales.\n## Lessons Learned and Future Enhancements\n### Less friction = more consistent logging\nBig controls and fewer steps made me log every set, not just the last one. I understand now that micro‑interactions matter more than fancy features.\n### Possible future improvements\n- Stats and charts (PRs, volume per day/week)\n- CSV export and import for backups\n- Unit toggles (lb/kg) and custom increments\n- Cloud sync as an optional add‑on if I ever need multi‑device\n## Conclusion\nWorkout Tracker is a tiny, focused tool that does exactly what I need: record sets quickly and keep them organized by date. Building it with Svelte kept it lightweight and easy to maintain, and storing data in localStorage means it’s fast and works anywhere. If you’re curious, check out the live demo or the GitHub repo—let me know what you think!","

Workout Tracker

A mobile-friendly web‑app that tracks workouts and keeps records.

Project Overview

Workout Tracker is a simple and focused hobby project I built in June 2023 to make logging sets painless on my phone. It’s fully client-side and fast, so I can open it at the gym, tap a few big buttons, and get back to lifting. Built with Svelte and JavaScript.

Motivation

Most workout apps felt heavy or slow for simple strength sessions. I wanted a dead-simple way to record reps and weights without sign‑ups, ads, or a dozen screens. The goal was building something with more structure than a notes app, while keeping it simple and intuitive to use with only key features. Having frictionless logging: big controls, one screen per workout, and instant save to history.

Current Features

• PWA (Installable and Offline)
\nInstall to the home screen and use it without a network connection. The app shell is cached for fast loads, and all records persist locally.

• Dashboard
\nA clean landing with a bold title, a motivational quote, and a list of workouts shown as large, tappable cards (e.g., Bench Press, Pull Ups). An “Add Workout” button lets you create a new workout entry.\n $\"Dashboard\"$

• Workout Detail Layout
\nEach workout has a top navigation bar (back button + workout name) and three tabs: Record, History, and Settings.\n $\"details\"$

• Record Tab
\nReps selector and Weight (kg) selector with left/right arrows for quick changes. An “Add Set” button appends the current reps × weight to this session. A “Completed Sets” list shows sets in order, and “Record Workout” saves the whole session to history.

• History Tab
\nA read‑only list of all sets saved for that date. Data is persisted in localStorage per workout.\n $\"history\"$

• Settings Tab
\nDestructive actions scoped to the current workout: “Delete Records” clears logged sets/history; “Delete Workout” removes the workout from the app.\n $\"settings\"$

• Mobile‑first UX
\nLarge, thumb‑friendly controls, consistent card and button styling, and clear hierarchy. Back navigation always returns to the dashboard.

Technical Architecture

Frontend (Svelte + JavaScript)

Svelte components for a small, reactive UI without much overhead
Tailwindcss and Hyper UI for a minimalistic design

Storage and Data

localStorage for persistence (no backend) so it works offline
Simple data model per workout:
- Workout: name, id
- Sessions keyed by date (YYYY‑MM‑DD)
- Sets: array of { reps, weightKg } in order of entry
\n
Guardrails for destructive actions (confirmations) to avoid accidental wipes

Challenges and Solutions

Keep it fast on mobile

Big tap targets and minimal re-renders were important. Svelte’s reactivity made it straightforward to update only what changed while keeping the interface snappy.

Date handling

Different phones format dates differently. I normalized the storage key to ISO‑like strings (YYYY‑MM‑DD), then formatted for display so the History tab is reliable across time zones and locales.

Lessons Learned and Future Enhancements

Less friction = more consistent logging

Big controls and fewer steps made me log every set, not just the last one. I understand now that micro‑interactions matter more than fancy features.

Possible future improvements

Stats and charts (PRs, volume per day/week)
CSV export and import for backups
Unit toggles (lb/kg) and custom increments
Cloud sync as an optional add‑on if I ever need multi‑device

Conclusion

Workout Tracker is a tiny, focused tool that does exactly what I need: record sets quickly and keep them organized by date. Building it with Svelte kept it lightweight and easy to maintain, and storing data in localStorage means it’s fast and works anywhere. If you’re curious, check out the live demo or the GitHub repo—let me know what you think!

\n",{"_10":83,"_12":84,"_39":85,"_41":86,"_47":87,"_52":80,"_14":90,"_55":56,"_26":-7,"_22":103,"_32":104},"\n# Vocab Exercise Generator\nA simple web‑app that generates fill‑in‑the‑blank sentence exercises from dictionary example sentences, designed for English learners who need more support.\n\n## Project Overview\nVocab Exercise Generator is a lightweight tool I finished in July 2022. You paste a list of target words, press Generate, and the app outputs a numbered set of sentences with the target word blanked out. You can download the worksheet as a text file, a Word (.docx) file, or a PDF. It’s fast, ad‑free, and built to help teachers and students create practice materials in seconds.\n\n## Motivation\nWhen I was tutoring weaker classmates, I spent a lot of time writing simple “fill‑in” sheets by hand as they help with active retrieval. I noticed that real dictionary examples are clearer than sentences I make up, especially for verbs with tricky usage. This app automates that process: grab authentic examples, blank the target word, and package everything neatly for printing or sharing.\n\n## Current Features\n• **Word List to Worksheet**
\nEnter vocabulary words (one per line), click Generate, and get a clean, numbered exercise list with an answer key.\n![screenshot1](vocab-1.webp \"width=500\")\n![screenshot2](vocab-2.webp \"width=500\")\n\n• **Example‑Based Sentences**
\nSentences are sourced from reputable dictionaries and lightly cleaned for readability before the target word is blanked out.\n\n• **Download Options**
\nExport your exercise as Text (.txt), Word (.docx), or PDF (.pdf) with a single click.\n![screenshot3](vocab-3.webp \"width=500\")\n\n• **Responsive, Minimal UI**
\nA simple, distraction‑free interface that works on both desktop and mobile.\n## Technical Architecture\n### Backend (Python)\n- FastAPI: exposes API endpoints for generating exercises and returning downloadable files\n- BeautifulSoup4: scrapes dictionary pages and extracts example sentences\n### Frontend (Svelte + JavaScript)\n- Svelte: drives a reactive UI for the word list, generated content, and downloads\n- Simple state management: keeps input, generated sentences, and answer keys in sync\n- Download helpers: triggers server exports for .txt, .docx, and .pdf\n\n## Challenges and Solutions\n### Unpredictable dictionary markup\nDictionary pages structure examples differently and change their HTML over time. Parsing them reliably was harder than I expected.\n\nI wrote focused scrapers for example blocks and added fallbacks when a page layout didn’t match. Lightweight cleaning removes citation clutter, odd punctuation, and trailing ellipses.\n### Export formatting\nGetting numbering and line breaks to look good across .txt, .docx, and .pdf is surprisingly fiddly.\n\nThe pdf option still remains buggy today. If the sentence is too long, it will just overflow out of the page.\n## Conclusion\nThis project started as a tiny helper for quick worksheets and turned into a handy, one‑click generator that saves time for teachers and learners. It’s simple, fast, and does one job well: turn your word list into authentic, fill‑in‑the‑blank practice with an answer key. If you want to try it, check out the live demo and the code—feedback welcome!","

Vocab Exercise Generator

A simple web‑app that generates fill‑in‑the‑blank sentence exercises from dictionary example sentences, designed for English learners who need more support.

Project Overview

Vocab Exercise Generator is a lightweight tool I finished in July 2022. You paste a list of target words, press Generate, and the app outputs a numbered set of sentences with the target word blanked out. You can download the worksheet as a text file, a Word (.docx) file, or a PDF. It’s fast, ad‑free, and built to help teachers and students create practice materials in seconds.

Motivation

When I was tutoring weaker classmates, I spent a lot of time writing simple “fill‑in” sheets by hand as they help with active retrieval. I noticed that real dictionary examples are clearer than sentences I make up, especially for verbs with tricky usage. This app automates that process: grab authentic examples, blank the target word, and package everything neatly for printing or sharing.

Current Features

• Word List to Worksheet
\nEnter vocabulary words (one per line), click Generate, and get a clean, numbered exercise list with an answer key.\n $\"screenshot1\"$ \n $\"screenshot2\"$

• Example‑Based Sentences
\nSentences are sourced from reputable dictionaries and lightly cleaned for readability before the target word is blanked out.

• Download Options
\nExport your exercise as Text (.txt), Word (.docx), or PDF (.pdf) with a single click.\n $\"screenshot3\"$

• Responsive, Minimal UI
\nA simple, distraction‑free interface that works on both desktop and mobile.

Technical Architecture

Backend (Python)

FastAPI: exposes API endpoints for generating exercises and returning downloadable files
BeautifulSoup4: scrapes dictionary pages and extracts example sentences

Frontend (Svelte + JavaScript)

Svelte: drives a reactive UI for the word list, generated content, and downloads
Simple state management: keeps input, generated sentences, and answer keys in sync
Download helpers: triggers server exports for .txt, .docx, and .pdf

Challenges and Solutions

Unpredictable dictionary markup

Dictionary pages structure examples differently and change their HTML over time. Parsing them reliably was harder than I expected.

I wrote focused scrapers for example blocks and added fallbacks when a page layout didn’t match. Lightweight cleaning removes citation clutter, odd punctuation, and trailing ellipses.

Export formatting

Getting numbering and line breaks to look good across .txt, .docx, and .pdf is surprisingly fiddly.

The pdf option still remains buggy today. If the sentence is too long, it will just overflow out of the page.

Conclusion

This project started as a tiny helper for quick worksheets and turned into a handy, one‑click generator that saves time for teachers and learners. It’s simple, fast, and does one job well: turn your word list into authentic, fill‑in‑the‑blank practice with an answer key. If you want to try it, check out the live demo and the code—feedback welcome!

\n","actionData","errors"]