Vocabulary Pronunciation is a web application designed to enhance language learning by providing users with the ability to hear the pronunciation of vocabulary words. Users can click on vocabulary cards to listen to the pronunciation and view additional information about each word. This project utilizes the Web Speech API for text-to-speech functionality.
- Interactive Vocabulary Cards: Click on vocabulary cards to hear the pronunciation.
- Language Support: Currently supports Spanish pronunciation (requires Spanish language pack).
- Detailed Vocabulary Information: Provides pronunciation, meaning, part of speech, usage, and examples.
- Responsive Design: Mobile-friendly interface using Tailwind CSS for styling.
- React: A JavaScript library for building user interfaces.
- React Router: For handling navigation and routing within the application.
- Tailwind CSS: A utility-first CSS framework for styling.
Explore the world of cutting-edge technology with Gadget Heaven and find the perfect gadgets to suit your needs!
- Interactive Vocabulary Cards
- Detailed Vocabulary Information
- Responsive Design
- Pronunciation on Demand
- Modal for In-Depth Details
- Smooth Animations
- Easy Navigation
- Language Support
- Promise Return
- Cleaner Syntax
- Error Handling
- Sequential Execution
- firebase
- flowbite-react
- framer-motion
- react-countup
- react-icons
- react-player
- daisyui
- React-Toastify
- Arrow function
- Template Literals
- Destructuring Assignment
- Rest and Spread Operators
- Node.js and npm installed on your machine.
- Modern web browser (Chrome/Edge) with support for the Web Speech API.
-
Clone the repository:
bash git clone https://github.com/programming-hero-web-course1/b10-a9-authentication-DeveloperMonirBD.git cd b10-a9-authentication -
Install the dependencies:
bash npm install -
Start the development server:
bash npm start
- Open your browser and navigate to
https://lingo-bingo12.netlify.app/ to view the application.
- Lesson Page:
- Navigate to the lesson page to see a grid of vocabulary cards.
- Click on a vocabulary card to hear the pronunciation.
- Click the "When to say" button to open a modal with detailed information.
- Vocabulary Pronunciation:
- Click on any vocabulary card to hear the word pronounced.
- Uses the Web Speech API to convert text to speech.
- LessonPage.js: Main component that displays vocabulary cards and handles pronunciation and modals.
- VocabularyPronunciation.js: Component that contains the interactive vocabulary cards.
- variants.js: Contains animation variants for Framer Motion.
- vocabularies.json: Contains the vocabulary data.
-
Private Github Repo Link : https://github.com/programming-hero-web-course1/b10-a9-authentication-DeveloperMonirBD
-
Live link to the deployed project : https://lingo-bingo-a69cd.web.app/