Update readme

README.md

@@ -1,8 +1,9 @@
-# Language Learner App
+# Languages Learner App
 
 ## Overview
 
-This project is a language learning application that aims to provide an easy and effective way to learn new languages. It includes the following features:
+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.
@@ -13,14 +14,70 @@ This project is a language learning application that aims to provide an easy and
 
 Check out the live demo of the app at https://languages-learner.web.app/
 
-## Technologies Used
-
-- [Vue 3](https://vuejs.org/)
-- [Vite](https://vitejs.dev/): A fast and efficient build tool for modern web development.
-- [Pinia](https://pinia.vuejs.org/): A lightweight state management library for Vue 3.
-- [i18n](https://vue-i18n.intlify.dev/): An internationalization library for Vue 3.
-- [Firebase](https://firebase.google.com/): A cloud-based platform for developing mobile and web applications.
-  - [Firebase Authentication](https://firebase.google.com/docs/auth): A service that provides authentication functionality for your app.
-  - [Firestore Database](https://firebase.google.com/docs/firestore): A cloud-based NoSQL database that provides flexible and scalable data storage.
-  - [Firebase Remote Config](https://firebase.google.com/docs/remote-config): A service that allows you to change the behavior and appearance of your app without requiring users to download an app update.
-- [Naive-UI](https://www.naiveui.com/en-US/os-theme): A set of UI components for Vue 3.
+## 🛠 Built with
+
+- [Vue 3][vue]
+- [Vite][vite]
+- [TypeScript][typescript]
+- [Pinia][pinia]: A lightweight state management library for Vue 3.
+- [i18n][i18n]: An internationalization library.
+    - **Translations Stored in Firestore**: this allows for scalable and flexible management of multilingual content.
+- [Firebase][firebase]
+  - [Firebase Authentication][firebase-authentication]
+  - [Firestore Database][firestore-database]
+  - [Firebase Remote Config][firebase-remote-config]
+  - [Firebase Hosting][firebase-hosting]
+- [Naive-UI][naive-ui]: A set of UI components for Vue 3.
+
+- [Docker][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][vite-pwa]: Integrate Progressive Web App (PWA) features
+
+- **Automated Tests**
+    - [Vitest][vitest]: Unit and Component Tests.
+    - [Cypress][cypress] + [Cypress Cloud][cypress-cloud]: End-to-end Tests  across multiple browsers and device sizes.
+      - **Include visual regression tests** using [cypress-visual-regression][cypress-visual-regression]
+
+- **CI/CD**
+  - Automated Tests: Unit, Component and End-to-end Tests.
+  - Deploy:
+    - Preview website for pull-requests and delete on PR close
+    - Production deploy
+  - Reject pending deployments on PR close
+
+- **Code Quality Tools**
+    - [ESLint][eslint]
+    - [Stylelint][stylelint]
+
+[vue]: https://vuejs.org/
+[vite]: https://vitejs.dev/
+[typescript]: https://typescriptlang.org
+[pinia]: https://pinia.vuejs.org/
+[i18n]: https://vue-i18n.intlify.dev/
+[firebase]: https://firebase.google.com/
+[firebase-authentication]: https://firebase.google.com/docs/auth
+[firestore-database]: https://firebase.google.com/docs/firestore
+[firebase-remote-config]: https://firebase.google.com/docs/remote-config
+[firebase-hosting]: https://firebase.google.com/docs/hosting
+[naive-ui]: https://www.naiveui.com/en-US/os-theme
+[docker]: https://www.docker.com/
+[vite-pwa]: https://github.com/antfu/vite-plugin-pwa
+[vitest]: https://vitest.dev/
+[cypress]: https://www.cypress.io/
+[cypress-cloud]: https://cloud.cypress.io/projects/fm6ypm/runs
+[cypress-visual-regression]: https://github.com/cypress-visual-regression/cypress-visual-regression
+[eslint]: https://eslint.org/
+[stylelint]: https://stylelint.io/
+
+## Preview (Mobile)
+
+[//]: # (![preview-dictionary-page-mobile](public/preview-dictionary-page-mobile.png))
+
+[//]: # (![preview-profile-page-mobile](public/preview-profile-page-mobile.png))
+<p align="center">
+  <img src="public/preview-dictionary-page-mobile.png" alt="preview-dictionary-page-mobile" width="200" style="margin-right: 20px;">
+  <img src="public/preview-profile-page-mobile.png" alt="preview-profile-page-mobile" width="200">
+</p>