cesko-digital / movapp

Naučte se základy češtiny a ukrajinštiny pro běžné životní situace. / Вивчіть основи чеської та української мови для повсякденного життя. / Learn the basics of Czech and Ukrainian for everyday life situations.

Readme

Čeština

Tým Movappu po dvou letech končí svou činnost a loučí se s vámi. Aplikace bude i nadále fungovat. Pokud byste chtěli projekt adoptovat a navázat na jeho vývoj, kontaktujte Česko.Digital na [e-mail]

Cílem Movapp.cz je usnadnit dorozumění mezi Čechy a Ukrajinci. Mова [mova] znamená ukrajinsky jazyk. Movapp je aplikace pro trénink jazyků. Projekt vzniká v komunitě expertních dobrovolníků Česko.Digital. Kontakt: [e-mail].

Zdrojový kód je pod MIT licencí. Texty, obrázky a audiosoubory jsou pod licencí CC BY-NC 4.0.

Chcete-li nám pomáhat na dalším rozvoji projektu, vyplňte formulář na cesko.digital/join a přidejte se do Slacku. Najdete nás v kanálu ua-movapp (komunikujeme česky, slovensky, anglicky a trochu také ukrajinsky).

Українська

Після двох років команда Movapp припиняє діяльність і прощається з вами. Додаток продовжуватиме працювати. Якщо ви хочете перейняти проект і продовжити його розвиток, будь ласка, контактуйте Česko.Digital на [e-mail]

Мета Movapp.cz – полегшити спілкування між чехами та українцями. Movapp — це програма для мовного навчання. Проект створений у спільноті експертів-волонтерів Česko.Digital. Контакти: [e-mail].

Вихідний код знаходиться під ліцензією MIT. Тексти, зображення та аудіофайли ліцензовані відповідно до CC BY-NC 4.0.

Якщо ви хочете стати членом команди волонтерів і допомогти нам розвивати проєкт, заповніть форму на cesko.digital/join та приєднайтеся до нашого Slack. Ви можете знайти нас на каналі ua-movapp (спілкуємося чеською, словацькою, англійською а також трохи українською).

English

After two years we are saying goodbye and ending all our activities. The application will however continue to function. If you would like to adopt the project and continue its development, please contact Česko.Digital at [e-mail].

The goal of Movapp.cz is to make communication between Czechs and Ukrainians easier. Mова [mohva] means language in Ukrainian. Movapp is an application for language training. The project is developed by Česko.Digital - the community of volunteering experts. Contact: [e-mail].

Source code is available under the MIT license. Text, pictures and audiofiles are available under the CC BY-NC 4.0 license.

If you want to help us, fill in the form at cesko.digital/join and join Slack. You can find us in the ua-movapp channel (we speak Czech, Slovak, English, and a little bit Ukrainian).

Development

The web is written in Next.js and hosted on Vercel. To run it locally:

git clone https://github.com/cesko-digital/movapp.git
cd movapp
npm install
npm run dev

Run tests:

npm test

If you have questions, write to us on Slack or create an issue

Development Guidelines

• TypeScript everywhere (as much as posisble) Avoid the use of any, as typecasting, ts-ignore.
• Tailwind everywhere (as much as possible). We are trying to keep the styling approach consistent so stick to Tailwind unless you have a specific reason to use something else.
• Use eslint and prettier in your IDE.
• Keep it simple. A lot of our contributors are junior/mid-level developers so we favor code-readability and easy onboarding to optimal performance and code cleverness. Dumb is readable, readable is smart.
• Don't reinvent the wheel. For more complex, standard components (modal, dropdown, etc) we use 3rd party headless libraries like HeadlessUI or RadixUI.

Development Onboarding Notes

• Intro to Next.js

• Intro to TypeScript

• Intro to Tailwind

• Localization: We use next-i18next to switch localization between the main site language (i.e., Czech) and Ukrainian.

  const { t } = useTranslation();
  ...
  <p>{t('homepage.box_child_title')}</p>
  

• Language variants: We use the NEXT_PUBLIC_COUNTRY_VARIANT environment variable to decide whether to build the Czech, Slovak or Polish variant of the site. See locales.ts for more details. When making changes, check that your code works in all language variants. The merge request pipeline automatically deploys the preview of each language variant.

• Language variant singpost is deployed separately from the main app using GitHub pages. See docs/signpost-readme.md for more details.

• Data management:

  • We use Airtable for managing the site content (phrases, categories).
  • The data is pulled into the movapp-data repository, enriched with sounds generated using Azure text-to-speech API and hosted on a CDN at data.movapp.eu
  • This website, as well as mobile apps pull the data from the CDN.

• Generating PDFs

  • Pages donwloadable as PDFs have a pdf.tsx or pdf/[param].tsx file next to their index.html. This file contains the simplified print-friendly version of the page.
    • Tip: Flexbox or CSS grid styling can result in ugly page break inside rows/elements. Prefer using tables, divs, paragraphs in combination with break-inside CSS rule to produce clean page breaks.
  • The page is generated during npm run build and then the exportPdfs.ts post-build script uses pupeeteer to turn the html file into a PDF a saves it in the public/pdf folder. See the script for implementation details.
    • Warning: Always run always run post-build scripts with "NODE_OPTIONS='--unhandled-rejections=strict'. Otherwise, they can fail on Vercel without killing the build, blocking the build slot for other deployments before the Vercel's 45 min timeout.
  • The generated PDFs are not commited to git, but generated on Vercel with every deployment.
  • The pdfs inside public folder are then accesible from regular Next pages: <a href="/pdf/generatedFile".pdf>Download PDF</a>

Contributions

• Transliteration tables between Czech and Ukrainian were kindly provided by: vsistek/ua-translit-cz/ under an MIT license.

Other repositories

• Movapp data repository
• Movapp for iOS
• Movapp for Android