Web Application for Finnish and English Language Learning
Helal, Tarek Abdelghafar Hamed Mohamed (2024)
2024
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2024092725755
https://urn.fi/URN:NBN:fi:amk-2024092725755
Tiivistelmä
This thesis was completed for PNP Crossing Borders, a dynamic private company located in Seinäjoki, South Ostrobothnia. Established in 2002, the company is a trusted trainer and partner to a wide array of businesses and organizations, both small and large. The focus of the thesis was to transform an existing mobile application, originally developed during practical training at the company to facilitate English and Finnish language learning, into a web-based application. The aim was to develop a web application ready for deployment and to select an appropriate development stack while enhancing the user experience.
Several key improvements were introduced in this web-based version that were not present in the original mobile app. One major enhancement was the inclusion of example sentences, which aids users in learning phrases and sentence structures more effectively. This feature shows example sentences in Finnish with English translations, and in English alone when learning English, and was added to both the word puzzle and dictation pages. Another significant addition was the `StrikesDisplay` component, which gamifies the learning process by providing visual feedback on user performance, making the overall experience more engaging. User ranking and performance analytics were also added to the profile page, offering users a clear view of their progress and ensuring accurate ranking even when users have identical scores.
The development process was conducted with attention to detail. A multi-tier client-server architecture was chosen after exploring various options. The MERN stack was utilized: MongoDB served as the database, Express.js and Node.js managed server-side operations, and React was used for the user interface. This stack provided a robust foundation, ensuring ease of use, fast performance, and effective user feedback with consistent use of JavaScript across all technologies. Several challenges were addressed, such as integrating the frontend and backend, improving the user experience, and implementing secure authentication methods using JSON Web Tokens (JWT).
The outcome is a unique language learning tool deployed on the Render cloud platform. It aligns with the company’s mission to educate and is ready for use. Future expansions and improvements are possible, such as adding more languages and features to enhance the learning experience. User feedback will guide these enhancements, continuously adapting the application to the needs of learners.
Several key improvements were introduced in this web-based version that were not present in the original mobile app. One major enhancement was the inclusion of example sentences, which aids users in learning phrases and sentence structures more effectively. This feature shows example sentences in Finnish with English translations, and in English alone when learning English, and was added to both the word puzzle and dictation pages. Another significant addition was the `StrikesDisplay` component, which gamifies the learning process by providing visual feedback on user performance, making the overall experience more engaging. User ranking and performance analytics were also added to the profile page, offering users a clear view of their progress and ensuring accurate ranking even when users have identical scores.
The development process was conducted with attention to detail. A multi-tier client-server architecture was chosen after exploring various options. The MERN stack was utilized: MongoDB served as the database, Express.js and Node.js managed server-side operations, and React was used for the user interface. This stack provided a robust foundation, ensuring ease of use, fast performance, and effective user feedback with consistent use of JavaScript across all technologies. Several challenges were addressed, such as integrating the frontend and backend, improving the user experience, and implementing secure authentication methods using JSON Web Tokens (JWT).
The outcome is a unique language learning tool deployed on the Render cloud platform. It aligns with the company’s mission to educate and is ready for use. Future expansions and improvements are possible, such as adding more languages and features to enhance the learning experience. User feedback will guide these enhancements, continuously adapting the application to the needs of learners.