Kreolingo

Overview

Purpose & Goal

Kreolingo is a language learning app for Mauritian Creole, inspired by Duolingo. My goal was to build an application to help my partner learn my mother tongue. This was the perfect opportunity to learn Svelte, which I had been considering for some time.

Svelte is a JS framework with a reputation for offering a great developer experience and remarkable ease of use. The framework's user-friendly documentation provides clear, concise, and comprehensive resources that made learning Svelte a breeze.

Web Stack

This web app is built with Skeleton, a UI toolkit for Svelte and Tailwind CSS. I used Skeleton to handle most of the design work with its ready-made components and curated color palettes. This decision allowed me to focus on learning and development. Furthermore, I used Svelte Kit, which added another layer of ease to the development process, and I deployed the project on Netlify like many of my other projects.

Process

Design

Skeleton provided an array of essential design elements, including layouts, menus, and styling, streamlining the creation of a visually appealing and consistent user interface.

Additionally, the toolkit offered handy pre-built components, such as a modal and a stepper, which added depth and functionality to the app.

When it came to designing the language exercises, I took inspiration from Duolingo and made similar exercises, making the app intuitive and familiar to users.

Development

In terms of development, this project presented an exciting challenge. I had to figure out how Duolingo's exercises worked and implement them using Svelte, which was both demanding and rewarding. It was like taking things apart to see how they work and then putting them back together.

The project not only expanded my understanding of Svelte but also honed my problem-solving skills as I tackled each exercise type. It may not have all of Duolingo's features, but it shares the same core exercises, making learning Mauritian Creole engaging and interactive.

Result

Lessons Learnt

First and foremost, I found that learning and working with Svelte was a highly rewarding experience. Its simplicity and straightforward approach made it easy to grasp. Unlike some other frameworks, Svelte doesn't introduce a steep learning curve or require complex abstractions which let me focus on building the app.

It's also worth noting that this was my first time using Tailwind CSS, instead of my usual SASS-based styling approach. This change helped me understand how Tailwind works and broadened my skills.

Interestingly, the toughest part of the project wasn't the technical side; it was designing and crafting lessons, formulating questions, and structuring answers. It showed me that crafting engaging content is just as important as the technical part when it comes to language learning.