Cramkle

Cramkle is a web-based flashcard studying app that helps you organize your study using a spaced repetition algorithm, used in many flashcard apps and learning websites, such as Anki and SuperMemo.

Getting started

If you want to access the Cloud version of Cramkle, go to www.cramkle.com, else you can follow the instructions below.

git clone https://github.com/cramkle/cramkle
cd cramkle

# Install dependencies
yarn

# Compile messages translations
yarn compile

If you want to run this project locally, you will also need to setup and run Hipocampo, which is our GraphQL API.

Development

Now that you've setup all the dependencies for both this project and Hipocampo, you can run the local server with the command below.

yarn dev

Adding and updating translations

This project uses lingui-js for i18n. In case you need to translate something that isn't yet translated, or you are adding some new texts, you'll need to use one of the macros from the lingui package. Lingui comes with several macros to handle all sorts of cases of language translation, but the most common one is just plain text. For simple texts, you can use either the Trans macro or the t macro (in conjunction with the useLingui hook).

Now, to translate something you can just wrap it up with one of lingui macros, like one of the two above:

import { Trans, t } from '@lingui/macro'
import { useLingui } from '@lingui/react'
import React from 'react'

const ComponentWithTrans = () => {
  return (
    <span>
      <Trans>My translated text</Trans>
    </span>
  )
}

const ComponentWithUseLingui = () => {
  const { i18n } = useLingui()

  return (
    <span>
      {i18n._(t`My translated text`)}
    </span>
  )
}

After adding the macro to the component like in the example above, you'll need to run yarn extract so lingui an extract those texts into PO files (under ./src/locales/). Then, edit the translation in the corresponding files and run yarn compile. You can see more info and other examples on the Lingui docs.