View GitHub repository
View VivaLingo PowerPoint project presentation

During my time at La Fosse Academy, I completed a mid-term project that consolidated the knowledge I had gained from the first four weeks of the academy, in which I learned much of the foundations of software development – some of which I knew already from previous studies and Bootcamps, and some of which was new to me (such as learning Docker and Mermaid.js). This was the first of the course’s two big projects, with the second consolidating four weeks of studying data analysis, and was a return to my central interest in Tech for Better – the concept that technology can inspire, or be based around, a positive social impact.

As part of a team of four, I worked on a five-day, full-stack project that showcased all of these skills. The team I was part of, ‘SyntaxSchoolers’, produced a Minimum Viable Product (MVP) of an app called VivaLingo, designed to combat the decline in student engagement with non-STEM subjects, particularly languages. This disengagement could be attributed to the heavy focus on STEM in the UK curriculum and repetitive lesson formats, resulting in reduced classroom enjoyment. The goal of the MVP was to design a French learning app aimed at secondary school students, with the tool focused on placing student enjoyment at the centre, while also supporting teachers and aligning with national curriculum objectives, via a fun, intuitive, and repeatable UI-friendly experience utilising gamified sentence and vocabulary activities.

Preparation

As part of the process of designing the MVP, and in a similar manner to my work at Founders & Coders, we planned the structure using an Agile methodology, including setting up a Trello board and creating wireframes and user flow diagrams, such as this high-level solution diagram:

I also visualised the database structure with an Entity Relationship Diagram generated using Mermaid.js:

Meanwhile, for development, we applied a model-view-controller (MVC) architecture in our codebase; implemented authentication; developed API endpoints; and wrote Jest and Cypress tests for both frontend and backend to ensure >60% coverage. Deployment was via Render.

For stakeholder/risk analysis, we considered who might be interested in the app, with statements such as: as a student, I want a fun, simple language learning app that makes learning engaging, repeatable, and memory-friendly without overwhelming content or textbooks (more examples can be viewed in the GitHub README). We also brainstormed the following diagrams:

Core Features and Challenges

In offering a gamified French language learning experience, the app’s structure included progress tracking and analytics, as well as separate dashboards for students and staff:

The student navigates through three progressively difficult levels, beginning at level one, their progress tracked over time, with secure user authentication facilitating the process of logging in.

The staff member has a dashboard that allows them to manage the students’ learning via modifying the open vocabulary lists for each of the three levels.

Constructing the MVP led to challenges, such as how to balance simplicity with meaningful language learning content, as well as seamlessly integrating the backend and frontend under time and deployment constraints. While my own role was principally as a front-end developer, I was also exposed to the back-end of the project regularly when bridging the two, particularly with authentication and testing.

Our tech stack for the project was the following:

• Frontend: HTML, CSS, JavaScript, Jest
• Backend: Node.js, Express, Cypress Testing
• Database: SQL, Supabase
• Tools: Git, GitHub, Trello, Mermaid.js (ERD Visualisation), Figma

To run this app:

• Clone this repo to your local machine
• Make sure you have Node installed
• Navigate to /backend
• Run npm install to run all dependencies
• Set up your .env file
• PORT=3000
• DB_URL=<your-link-here>
• BCRYPT_SALT_ROUNDS=10
• SECRET_TOKEN=<your secret token>
• Set up your database with npm run setup-db
• Start the server using npm run dev
• Open http://www.localhost:3000 with your browser to see the result