Wordly

• 

  The app's starting point; the user selects their native and target languages to begin the learning process.

• 

  The 'Starter Topics' feature provides curated, ready-to-use word lists, offering users a guided path to begin learning immediately.

• 

  The Practice Settings modal gives users full control. They can adjust repetitions, intervals, and even disable native language playback.

• 

  The AI-powered creation screen. Users can automatically generate custom word or sentence lists by simply providing a topic and quantity.

• 

  The main dashboard; the user chooses between starting with pre-made topics, accessing personal folders, or creating a new word list.

• 

  The 'My Folders' section; users manage their personal content here, and clicking on a folder starts its practice session.

• 

  The active listening session. Words are repeated via audio, while visual indicators like counters and a timer track the user's progress.

• 

  The session summary screen. It provides key stats (time, words) and positive reinforcement, motivating the user for their next session.

• 

  In Practice Mode, users preview the word list and customize settings (repetitions, interval) for a fully tailored learning session.

• 

  In 'Manual Entry' mode, the user types a word or phrase, and its translation is automatically generated by AI, ready for review or editing.

• 

  The 'Upload File' option allows for efficient bulk creation. Users can import an entire word list from a .txt file in a single action.

Inspiration

I've always struggled with learning new languages. I’d forget words quickly, and my ADHD made it difficult to focus on traditional methods. As an immigrant working in Sweden, I desperately needed to learn Swedish but had no time for textbooks. I needed something I could use while working—something audio-based. After researching learning science, I discovered the power of Spaced Repetition. That was my "aha!" moment: I decided to build an app for myself that would drill words into my memory through audio, solving my own very real problem.

What it does

Wordly is a smart language learning assistant designed to make vocabulary stick. At its core, it’s built on the principle of Spaced Repetition, inspired by research from UCLA. Our motto is: "Just listen, repeat, and never forget!"

Here's what a user can do:

• Learn with Audio Repetition: The primary feature is the powerful audio loop that allows you to listen to words and phrases continuously, making it perfect for learning on the go, at the gym, or while working.
• Use Your Own Content: You can input any text, article, or list of words you want to learn.
• Get a Head Start: Begin with curated "Starter Topics" to learn practical phrases from day one.
• Organize Your Learning: Save words and sentences into custom folders to create a personal library of vocabulary.
• Leverage AI: Use the AI-powered sentence generator to see your vocabulary in real-world contexts, helping you understand usage, not just meaning.
• Perfect Your Pronunciation: High-quality Text-to-Speech (TTS) ensures you hear and practice the correct pronunciation.
• Track Your Progress: A summary section shows your performance to keep you motivated.

How we built it

Let's be clear: I'm a graphic designer, not a programmer. The thought of coding was always a nightmare for me, stemming from bad experiences with ActionScript and network scripting years ago.

This project was only made possible by Artificial Intelligence. I overcame my fear of coding by partnering with AI agents. I used bolt.new to generate the foundational code and structure, and then worked with trea to refine, build, and debug. This AI-assisted workflow allowed me to build a fully functional web and mobile app—from idea to execution—in about two weeks. The tech stack includes React and TypeScript for the frontend and Dexie.js for robust client-side storage, all orchestrated with the help of my AI partners.

Challenges we ran into

My biggest challenge wasn't a bug in the code; it was a bug in my own mindset. Overcoming my decade-long fear and aversion to programming was the first and most significant hurdle. On the technical side, ensuring all the moving parts like the TTS service, AI sentence generation, and the local database for folders worked seamlessly together was a complex task. Debugging a codebase that I didn't write entirely by hand was a unique challenge, but one that AI helped me navigate efficiently.

Accomplishments that we're proud of

Frankly, I'm proud of two things that are deeply connected. First, that I successfully built a complete, working application that solves a problem I care about. And second, that in doing so, I conquered my long-held fear of coding. Being able to take an idea from a simple thought to a tangible product that people can use is an incredible feeling, and it's an accomplishment I will always cherish.

What we learned

The biggest lesson from this project is that modern AI has shattered the barrier to entry for creation. You no longer have to be a seasoned programmer to build sophisticated applications. It proved to me that with a clear vision and the right tools, anyone can bring their ideas to life. I also learned the value of perseverance and trusting a new way of doing things, even when it feels uncomfortable at first.

What's next for Wordly

This is just the beginning! My vision for Wordly is to make it an even more powerful and effortless learning companion. Here are the next steps on our roadmap:

• Add More Languages: Expanding the library to include more native and target languages.
• Upgrade TTS: Integrating more advanced, professional, and fluid Text-to-Speech models for an even more natural listening experience.
• Social Sharing: Allowing users to share their vocabulary folders and progress with friends.
• Smart Reminders: Adding a notification system to remind users to practice at optimal intervals.
• Test & Analyze: Implementing a quiz and analysis section where users can test their knowledge and see detailed reports on their learning progress.

Built With

• bolt
• dexie.js
• elevenlabs-api
• google-gemini-api
• react
• react-router-dom
• tailwind-css
• typescript
• vite