LinguaTale is an intelligent language learning application that uses Google's latest Gemini models to generate short stories tailored to your exact proficiency level. It supports 28 languages and strictly adheres to CEFR standards (A1 to C2), making it the perfect tool for reading practice at any stage of learning.
- 28 Supported Languages: Practice reading in European languages (Bulgarian, Croatian, Czech, Danish, Dutch, English, Estonian, Finnish, French, German, Greek, Hungarian, Irish, Italian, Latvian, Lithuanian, Maltese, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish) as well as Chinese, Japanese, Korean, and Vietnamese.
- Precise Level Control: Choose from detailed CEFR levels including specific sub-levels (e.g., A1.1, A1.2, A1.3 up to C1-C2) to ensure the content matches your grammar and vocabulary knowledge exactly.
- Diverse Story Styles: Select from 15 genres including Thriller, Sci-Fi, Bedtime Story, Dialogue/Script, News Article, and Business/Serious.
- Interactive Vocabulary: Click on highlighted words within the story to see instant context-aware translations. The app smartly handles punctuation, ensuring natural reading flow.
- Comprehension Quizzes: Every story segment includes a 3-question quiz generated in the target language to test your understanding immediately.
- Story Continuation: The app remembers context, allowing you to generate "Next Page" chapters to create a continuous narrative.
- Personal Library: Save your favorite stories to the local library and resume reading them later.
- Multilingual Interface: The application UI is fully localized in English, Finnish, and Vietnamese.
- Dynamic Theming: The application interface adapts its color accents based on the selected target language.
- Node.js (v18 or higher)
- A Google Cloud Project or Google AI Studio account
-
Clone the repository
git clone https://github.com/yourusername/linguatale.git cd linguatale -
Install dependencies
npm install
-
Get a Google Gemini API Key To use this application, you need an API key from Google AI Studio.
- Go to Google AI Studio.
- Sign in with your Google account.
- Click Create API key.
- Select a project or create a new one, then copy the generated key string.
-
Configure Environment Create a file named
.envin the root directory of the project (next topackage.jsonandindex.html). Add your API key to this file:API_KEY=your_actual_api_key_starts_with_AIza...
Important:
- Do not use quotes around the key unless it contains special characters.
- Ensure there are no spaces around the
=sign.
-
Run the application
npm start
- If you just created the
.envfile, you must restart the server for the key to be loaded. - Open your browser to the local server address (usually
http://localhost:1234orhttp://localhost:5173).
- If you just created the
- Blank Screen? Ensure you are running a build tool (like Vite) that supports TypeScript and JSX, not just opening the HTML file directly.
- API Key Error?
- Verify your
.envfile exists in the root folder. - Restart the terminal/server (
Ctrl+Cthennpm start). - Check
vite.config.tsensuresprocess.env.API_KEYis being defined.
- Verify your
- Frontend: React 19, TypeScript, Tailwind CSS
- AI Model: Google Gemini 2.5/3.0 via
@google/genaiSDK - Icons: Lucide React
- State Management: React Hooks & LocalStorage for persistence
- Build Tool: Vite
This project is licensed under the MIT License.