Languages Learner App

Overview

This project is a languages learning application that aims to provide an easy and effective way to learn new languages. It includes the following features:

• Profile Page: Keep track of your progress and see your achievements.
• Settings Page: Customize the app to your preferences.
• Dictionary Page: Store and manage your translations.
• Trainings Page: Develop your language skills with interactive exercises. (Not ready)

Live Demo

Check out the live demo of the app at https://languages-learner.web.app/

🛠 Built with

• Vue 3

• Vite

• TypeScript

• Pinia: A lightweight state management library for Vue 3.

• i18n: An internationalization library.

  • Translations Stored in Firestore: this allows for scalable and flexible management of multilingual content.

• Firebase

  • Firebase Authentication
  • Firestore Database
  • Firebase Remote Config
  • Firebase Hosting

• Naive-UI: A set of UI components for Vue 3.

• Docker

  • Docker Compose files provided for both development and production environments.
  • Although not currently in use, these Docker Compose files serve as examples for potential containerization of application in the future.

• PWA Support

  • VitePWA: Integrate Progressive Web App (PWA) features

• Automated Tests

  • Vitest: Unit and Component Tests.
  • Cypress + Cypress Cloud: End-to-end Tests across multiple browsers and device sizes.
    • Include visual regression tests using cypress-visual-regression
    • Include performance tests using Lighthouse (cypress-audit)
      • Currently only for landing page to demonstrate the concept.

• CI/CD

  • Automated Tests: Unit, Component and End-to-end Tests.
  • Deploy:
    • Preview website for pull-requests and delete on PR close
    • Production deploy
  • UI Performance Testing with Lighthouse
  • Reject pending deployments on PR close

• Code Quality Tools

  • ESLint
  • Stylelint

Preview (Mobile)