169
README.md
169
README.md
@@ -1,70 +1,163 @@
|
||||
# Getting Started with Create React App
|
||||
# dios.website 🙏
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
A multilingual Bible reading web application with interactive typing effects and text-to-speech functionality. Experience sacred texts in 40+ languages with modern web technology.
|
||||
|
||||
## Available Scripts
|
||||
## 🌟 Features
|
||||
|
||||
In the project directory, you can run:
|
||||
- **📖 Multilingual Bible Text**: Support for 40+ languages including Arabic, Chinese, English, Spanish, French, German, and many more
|
||||
- **🎭 Typewriter Effect**: Beautiful animated text display using React Typed
|
||||
- **🔊 Text-to-Speech**: Listen to Bible verses with customizable voice settings
|
||||
- **🎛️ Voice Controls**:
|
||||
- Multiple voice selection
|
||||
- Adjustable speech speed
|
||||
- Play/pause functionality
|
||||
- **🌍 Auto Language Detection**: Automatically detects user's preferred language
|
||||
- **📱 Responsive Design**: Works seamlessly on desktop and mobile devices
|
||||
- **♿ Accessibility**: ARIA labels and semantic HTML for screen readers
|
||||
- **⚡ Auto-scroll**: Automatic scrolling as text is displayed
|
||||
|
||||
### `npm start`
|
||||
## 🚀 Quick Start
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
### Prerequisites
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
- Node.js (v14 or higher)
|
||||
- npm or yarn
|
||||
|
||||
### `npm test`
|
||||
### Installation
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd god
|
||||
```
|
||||
|
||||
### `npm run build`
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
3. Start the development server:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
4. Open your browser and navigate to `http://localhost:3000`
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
## 📋 Available Scripts
|
||||
|
||||
### `npm run eject`
|
||||
- `npm start` - Runs the app in development mode
|
||||
- `npm build` - Builds the app for production
|
||||
- `npm test` - Launches the test runner
|
||||
- `npm run eject` - Ejects from Create React App (one-way operation)
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
## 🗣️ Supported Languages
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
The application supports Bible texts in the following languages:
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
| Language | Code | Language | Code | Language | Code |
|
||||
|----------|------|----------|------|----------|------|
|
||||
| Arabic | ar | Azerbaijani | az | Bulgarian | bg |
|
||||
| Bengali | bn | Catalan | ca | Czech | cs |
|
||||
| Danish | da | German | de | Greek | el |
|
||||
| English | en | Esperanto | eo | Spanish | es |
|
||||
| Estonian | et | Basque | eu | Persian | fa |
|
||||
| Finnish | fi | French | fr | Irish | ga |
|
||||
| Galician | gl | Hebrew | he | Hindi | hi |
|
||||
| Hungarian | hu | Indonesian | id | Italian | it |
|
||||
| Japanese | ja | Korean | ko | Lithuanian | lt |
|
||||
| Latvian | lv | Malay | ms | Norwegian | nb |
|
||||
| Dutch | nl | Polish | pl | Portuguese | pt |
|
||||
| Romanian | ro | Russian | ru | Slovak | sk |
|
||||
| Slovenian | sl | Albanian | sq | Swedish | sv |
|
||||
| Thai | th | Filipino | tl | Turkish | tr |
|
||||
| Ukrainian | uk | Urdu | ur | Chinese | zh |
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
## 🏗️ Project Structure
|
||||
|
||||
## Learn More
|
||||
```
|
||||
src/
|
||||
├── components/ # React components
|
||||
│ ├── BibleDisplay.js # Main text display component
|
||||
│ ├── Header.js # Application header
|
||||
│ ├── Footer.js # Application footer
|
||||
│ ├── SpeechControls.js # Speech play/pause controls
|
||||
│ ├── SpeedControls.js # Speech speed adjustment
|
||||
│ ├── VoiceControls.js # Voice selection controls
|
||||
│ └── LoadingSpinner.js # Loading state component
|
||||
├── hooks/ # Custom React hooks
|
||||
│ ├── useBibleText.js # Bible text loading logic
|
||||
│ ├── useSpeechControl.js # Speech synthesis logic
|
||||
│ ├── useVoiceSelection.js # Voice selection logic
|
||||
│ └── useAutoScroll.js # Auto-scrolling functionality
|
||||
├── biblia/ # Bible text files (40+ languages)
|
||||
├── constants/ # Application constants
|
||||
├── i18n.js # Internationalization configuration
|
||||
└── App.js # Main application component
|
||||
```
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
## 🔧 Core Technologies
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
- **React 19** - Modern React with hooks
|
||||
- **i18next** - Internationalization framework
|
||||
- **React Typed** - Typewriter effect animations
|
||||
- **Web Speech API** - Text-to-speech functionality via react-text-to-speech
|
||||
- **CSS3** - Modern styling and responsive design
|
||||
|
||||
### Code Splitting
|
||||
## 🎨 How It Works
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
1. **Language Detection**: The app automatically detects the user's browser language
|
||||
2. **Text Loading**: Loads the corresponding Bible text file for the detected language
|
||||
3. **Typewriter Effect**: Displays verses with a beautiful typing animation
|
||||
4. **Speech Synthesis**: Converts text to speech using the Web Speech API
|
||||
5. **Interactive Controls**: Users can control playback speed, voice selection, and navigation
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
## 🎛️ User Interface
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
### Controls Available:
|
||||
- **Play/Pause Button**: Start or stop text-to-speech
|
||||
- **Speed Slider**: Adjust typing and speech speed
|
||||
- **Voice Selector**: Choose from available system voices
|
||||
- **Auto-scroll**: Automatically scrolls as text progresses
|
||||
|
||||
### Making a Progressive Web App
|
||||
## 🌐 Browser Compatibility
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
- Chrome 80+
|
||||
- Firefox 75+
|
||||
- Safari 13+
|
||||
- Edge 80+
|
||||
|
||||
### Advanced Configuration
|
||||
*Note: Text-to-speech functionality depends on browser support for the Web Speech API*
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
## 📱 Mobile Support
|
||||
|
||||
### Deployment
|
||||
The application is fully responsive and optimized for mobile devices with touch-friendly controls and adaptive layouts.
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
## 🔒 Privacy
|
||||
|
||||
### `npm run build` fails to minify
|
||||
This application runs entirely in the browser. No personal data is collected or transmitted to external servers. Bible texts are served locally.
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
## 🤝 Contributing
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch: `git checkout -b feature/new-feature`
|
||||
3. Commit your changes: `git commit -m 'Add new feature'`
|
||||
4. Push to the branch: `git push origin feature/new-feature`
|
||||
5. Submit a pull request
|
||||
|
||||
## 📝 License
|
||||
|
||||
This project is open source. Please check the license file for details.
|
||||
|
||||
## 🙏 Acknowledgments
|
||||
|
||||
- Bible texts from various public domain sources
|
||||
- React community for excellent libraries
|
||||
- Web Speech API for enabling text-to-speech functionality
|
||||
|
||||
## 📞 Support
|
||||
|
||||
For support, please open an issue on the GitHub repository or visit [manalejandro.com](https://manalejandro.com).
|
||||
|
||||
---
|
||||
|
||||
*"In the beginning was the Word..."* - Experience sacred texts like never before with dios.website
|
||||
|
||||
Referencia en una nueva incidencia
Block a user