PronunciationApp

PronunciationApp is a project designed to help users improve their English pronunciation using modern web technologies.

The app has a visually appealing grid of cards, each representing a word to learn and practice[1]. These cards, inspired by Material UI's design, will display the word, its pronunciation, and a brief definition[1].

For example, one card might feature:

Benevolent /bɪˈnɛvələnt/ adjective Well-meaning and kindly

benevolent /bɪˈnɛvələnt/ adjective Well-meaning and kindly; charitable Example: The benevolent donor gave millions to charity.

Users can interact with these cards in two primary ways:

1. Pronunciation: Clicking on the card will trigger an audio playback of the word's correct pronunciation, allowing users to hear and mimic the sound[1].

2. Drill Mode: A dedicated button on each card activates a drill feature. This mode might present various exercises, such as:

   • Repeating the word
   • Using it in a sentence
   • Identifying synonyms or antonyms, how the english stress works, stress Patterns, etc ..

The grid layout ensures easy navigation, while the card design provides a clean, focused presentation of each word[1]. This interactive approach combines visual, auditory, and kinesthetic learning methods, catering to different learning styles and enhancing vocabulary retention and pronunciation skills.

Citations: [1] https://mui.com/material-ui/react-card/

This application combines a React frontend with a Spring Boot backend, utilizing H2 and PostgreSQL databases, RESTful APIs, and comprehensive testing with Postman, JUnit, and Jest.

Project Structure

The project is organized as a monorepo with three main branches:

• frontend-react:
  • /frontend/pronunciationAppFront: pronunciationAppFront
  • /frontend/resources: resources
• backend-spring-boot:
  • /backend/pronunciationAppBack: pronunciationAppBack
  • /backend/resources: resources
• master:
  • /management/: management
  • /PRA/: PRA

Directory Layout

Root

.
├── backend
│   ├── pronunciationAppBack
│   └── resources
├── frontend
│   ├── pronunciationAppFront
│   └── resources
├── management
│   ├── Git-gh
│   ├── installing-add-on-soft-linux
│   ├── Project-Management
│   └── Testing and Mocking
├── PRA
│   └── PRA_guide.md
└── README.md

Spring Boot Backend:

.
├── HELP.md
├── mvnw
├── mvnw.cmd
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   └── resources
│   └── test
│       └── java
└── target
    ├── classes
    │   ├── application.properties
    │   └── dev
    ├── generated-sources
    │   └── annotations
    ├── generated-test-sources
    │   └── test-annotations
    └── test-classes
        └── dev

React Frontend:

.
├── eslint.config.js
├── index.html
├── node_modules
│   ├── acorn
|   ...
│   └── yocto-queue
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Tech Stack

Our project leverages a robust set of technologies and development tools:

Here's the updated table with links for the apps and tools:

Category	Tools
Programming Languages & Frameworks	React, Spring Boot, Java, JavaScript, Material React UI
Version Control	Git, GitHub, GitHub Worktree
IDEs & Editors	Visual Studio Code, IntelliJ IDEA, MarkText, Sublime Text, Sublime Merge
Documentation	Markdown, Shields.io, GitHub README, DiagramGPT, Napkin AI
Testing	Postman, JUnit, Jest
Databases	H2 Database, PostgreSQL
Development Tools	Maven, npm, Docker
Cloud & Deployment	Heroku, AWS, Netlify

Features

• Frontend: Built with React for a responsive and interactive user interface
• Backend: Powered by Spring Boot for robust server-side operations
• Databases: Utilizes H2 for development and PostgreSQL for production
• API: RESTful API design for seamless communication between frontend and backend
• Testing: Comprehensive testing suite using Postman, JUnit, and Jest

Version Control

This project uses Git and GitHub for version control, implementing a monorepo structure with worktree. For more information on the monorepo setup and documentation, please refer to the mono-repo-docs.

Getting Started

1. Clone the repository:

   git clone https://github.com/AlbertProfe/pronunciationApp.git

2. Navigate to the project directory:

   cd pronunciationApp

3. Check out the desired branch:

   git checkout [branch-name]

4. Follow the setup instructions in the respective frontend and backend directories.

Contributing

We welcome contributions to the PronunciationApp project. Please read our contributing guidelines before submitting pull requests.

License

This project is licensed under the MIT License.

Citations: [1] https://github.com/AlbertProfe/pronunciationApp/tree/master [2] https://github.com/AlbertProfe/pronunciationApp/branches