Web Dev Project

Blackfyre - Your comfort learning platform

*This is my final year engineer project and I can't show live site yet, because this could be against rules of my University.

Overview

The objective of the project is to create a web platform for language learning that allows users to create personalized sets of vocabulary with translations, learn using the flashcard method, solve quizzes, and engage with language games. Users will also be able to track their progress and customize the app's appearance. The scope of the project includes interface design, functionality implementation, and evaluation of the learning method's effectiveness.

Problem

Current technologies offer countless possibilities to facilitate learning and acquiring new skills. However, the proposed language vocabulary learning platform meets the needs of individuals seeking modern educational methods. Unlike other available solutions such as Duolingo and Anki, this platform focuses on interactive vocabulary learning through flashcards, quizzes, and language games like Hangman, while also allowing users to share materials with others. In contrast to Duolingo, which offers a language learning process through a series of lessons and tasks, the created platform allows for greater content personalization and direct involvement in creating educational material. Meanwhile, Anki, a tool focused on repetition and efficient memorization using a card system, does not offer as wide a range of interactive learning forms as the proposed application.

Tech Stack

Features

Features Overview My platform offers a comprehensive suite of tools designed to facilitate personalized and interactive language learning. Users can create custom vocabulary sets and engage with them through three dynamic games: Flashcards, Matching Tiles, and Hangman. To enhance the learning experience, I provide Google/GitHub authentication for easy access and secure login.

Key Features:

Language Games: Engage in interactive learning through Flashcards, Matching Tiles, and Hangman, each designed to reinforce vocabulary retention.

Progress Tracking: Monitor your learning journey with detailed progress tracking, allowing you to see your improvement over time.

Customizable Appearance: Personalize the platform’s interface to match your preferences, making the learning environment more comfortable and engaging.

Material Sharing: Easily share your custom vocabulary sets with others, fostering a collaborative learning environment.

Import Words from Files: Conveniently import words from external files, streamlining the process of creating new vocabulary sets.

Premium Features: Unlock additional benefits with a premium subscription, including enhanced game options and advanced progress analytics. Payment processing is handled securely through Stripe.

Process

Definition

Plan

Design

Develop

Deployment

Learnings

Working solo on this project required me to independently manage all aspects of development, from frontend to backend, without external assistance.

Integrating Stripe for payment processing was particularly challenging as I had no prior experience with payment systems. I had to learn and implement it from scratch, ensuring secure transactions within the platform.

Implementing authentication features such as password resets via email and two-factor authentication (2FA) was new to me. I had to get up to speed with these concepts and successfully integrate them using services like Resend.

Balancing the comprehensive demands of this project with tight deadlines added pressure, requiring efficient time management and the ability to quickly learn and apply new technologies.

Challenges

Mastered the implementation of full authentication and authorization workflows, including advanced features like password reset via email and two-factor authentication, using industry-standard protocols and services like Resend.

Gained significant experience with Stripe, learning how to securely manage payment processing, including handling premium features and ensuring compliance with security standards.

Improved my backend development skills, particularly in optimizing database queries and managing server-side logic, to ensure the platform's performance and scalability.

Developed a strong understanding of NextJS, mastering its server-side rendering, static site generation, and API handling, all of which were crucial to the success of this project.