https://github.com/ccnixx/fun-alphabet-reader
A fun and interactive alphabet learning app powered by the Speech Synthesis API. Learn letters and words through audio and sleek modern design.
https://github.com/ccnixx/fun-alphabet-reader
alphabet fun-education interactive-learning learning scss speech-synthesis tailwindcss text-to-speech typescript vite web-app
Last synced: 19 days ago
JSON representation
A fun and interactive alphabet learning app powered by the Speech Synthesis API. Learn letters and words through audio and sleek modern design.
- Host: GitHub
- URL: https://github.com/ccnixx/fun-alphabet-reader
- Owner: ccnixx
- License: mit
- Created: 2025-01-25T23:09:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-25T23:39:56.000Z (over 1 year ago)
- Last Synced: 2026-01-26T10:05:32.344Z (4 months ago)
- Topics: alphabet, fun-education, interactive-learning, learning, scss, speech-synthesis, tailwindcss, text-to-speech, typescript, vite, web-app
- Language: TypeScript
- Homepage: https://funabc.nixx.dev
- Size: 37.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fun Alphabet Reader
[](https://opensource.org/licenses/MIT)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://www.typescriptlang.org/)
An engaging and interactive web app that helps users learn the alphabet in a fun way! Each letter corresponds to a word and is read aloud using the browser's Speech Synthesis API.
## Live Demo
[**Try the Fun Alphabet Reader**](https://funabc.nixx.dev)
## Features
- **Interactive Buttons:** Buttons for each letter of the alphabet.
- **Speech Synthesis:** Reads the letter and its associated word aloud.
- **Voice Selection:** Choose from available voices in your browser.
- **Modern Design:** Styled with Tailwind CSS and SCSS for a sleek and responsive UI.
## Technologies Used
- **[Vite](https://vitejs.dev/):** Fast and modern build tool.
- **[TypeScript](https://www.typescriptlang.org/):** Ensures type safety and code quality.
- **[Tailwind CSS](https://tailwindcss.com/):** Utility-first CSS framework for rapid styling.
- **SCSS:** Provides enhanced styling capabilities.
- **Speech Synthesis API:** Built-in browser feature for text-to-speech.
## Installation
Follow these steps to set up the project locally:
1. **Clone the Repository:**
```bash
git clone https://github.com/justnixx/fun-alphabet-reader.git
cd fun-alphabet-reader
```
2. **Install Dependencies:**
```bash
yarn
```
3. **Run the Development Server:**
```bash
yarn dev
```
4. **Build for Production:**
```bash
yarn build
```
5. **Preview the Production Build:**
```bash
yarn preview
```
## File Structure
```
fun-alphabet-reader/
├── public/ # Static assets
├── src/ # Source code
| ├── app.ts # Core app logic
│ ├── main.ts # Entry point
│ ├── index.html # HTML structure
│ ├── index.scss # Styling
│ └── ... # Other files
├── package.json # Project configuration
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
```
## Usage
1. Open the application in your browser.
2. Select a voice from the dropdown menu.
3. Click any letter button to hear the letter and its associated word read aloud.
## Customization
- Modify the `alphabet` array in `app.ts` to include custom words for each letter.
- Add or remove styles by editing the `index.scss` file.
- Experiment with additional Speech Synthesis API features such as pitch and rate adjustments.
## Contribution
Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a new branch for your feature/bugfix.
3. Commit your changes.
4. Push to your fork and submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).
## Acknowledgments
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [MDN Web Docs](https://developer.mozilla.org/)