/humans-of-seoul-feed-format

Formatting the site of Humans Of Seoul to just show korean or translation using their rss feed.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Header image

Humans of Seoul / Formatted RSS Feed

Formatting Humans of Seoul RSS feed to be to practice reading in koreand and be able to read only the korean text and open translation when/if wanted.

Access app on the link:

https://esteves-esta.github.io/humans-of-seoul-feed-format/

Index

Table of Contents

Printscreen

Papago popover

Customization modal

Posts list modal

📖 Features

✅ Done ✨✨

  • Consume RSS Fedd
    • Parse XML to DOM
    • DOM to JSON
  • Show 1 post at a time
  • Post features
    • Hide translation
    • Toggle translation by paragraph
    • Select word from the korean original
    • Show count of words in total
    • Popover with button opening papago page on word
    • Export X words selected
  • Be able to go to previous or next post
  • Settings for customization
    • Change font family
    • Change font weight
    • Change background and font color
    • Change word spacing
    • Change paragraph margin
  • Show list of posts
  • Style / Follow the prototype
  • responsive - mobile

🧰 Tech Stack

  • Vite
  • React
  • Typescript
  • SWR
  • Lucide React - icons
  • Papaparse - json to csv
  • Radix-UI - unstyled components

🚀 How to run locally

  1. Install packages

    npm i

    or

    yarn i

  2. Run api proxy

    npm run proxy

    or

    yarn proxy

  3. Run dev server

    npm run dev

    or

    yarn dev

Learning sources