https://github.com/ctoic/learn_french

An approach to help beginners learn French.
https://github.com/ctoic/learn_french

books react tailwind vite

Last synced: 8 months ago
JSON representation

An approach to help beginners learn French.

• Host: GitHub
• URL: https://github.com/ctoic/learn_french
• Owner: Ctoic
• Created: 2025-01-05T18:46:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-19T11:28:21.000Z (11 months ago)
• Last Synced: 2025-05-07T14:13:59.328Z (8 months ago)
• Topics: books, react, tailwind, vite
• Language: JavaScript
• Homepage: https://frenchtutor.netlify.app/
• Size: 2.78 MB
• Stars: 3
• Watchers: 1
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# French Language Learning App 🥖🇫🇷  

A vibrant and interactive React application designed to help beginners learn the French language through a structured book-reading program. The app emphasizes gradual improvement by encouraging users to read **two books a month** and progressively increasing their reading levels.

---

## Features 🚀  

### 1. **Home Page**  

- Welcoming and elegant design introducing users to the app.  

- Overview of the reading program.  

### 2. **Book Library**  

- Browse books by difficulty level: Beginner, Intermediate, and Advanced.  

- Book cards display:  

  - Cover image  

  - Title and author  

  - Level tag  

### 3. **Reading Schedule**  

- Calendar or timeline view for the monthly reading plan.  

- Highlights current month’s books and upcoming levels.  

### 4. **User Dashboard**  

- Track progress:  

  - Total books read  

  - Current reading level  

  - Completion percentage  

- Motivational French quotes to inspire learning.  

### 5. **Interactive Vocabulary Learning**  

- Display "Word of the Day" or key phrases from books.  

- Users can mark words as "learned."  

### 6. **Quizzes and Activities**  

- Mini-games like matching French words or fill-in-the-blank exercises.  

- Animated elements for user engagement.  

---

## Technologies Used 🛠️  

- **React.js**: Component-based library for UI development.  

- **React Router**: For seamless navigation between pages.  

- **CSS Frameworks**:  

  - Tailwind CSS or Material-UI for modern styling.  

  - CSS animations for interactive elements.  

- **State Management**: React Hooks (`useState`, `useEffect`) for managing state and mock data.  

---

## Installation 🧑‍💻  

1. **Clone the Repository**:  

   ```bash  

   git clone https://github.com/your-username/french-language-learning-app.git  

   cd french-language-learning-app