https://github.com/mahmud-r-farhan/typing-app-docx-web
Boost your typing speed and accuracy with our interactive typing web app. Practice typing lessons, track your progress, and improve your skills through fun and engaging exercises. Perfect for all skill levels, from beginners to experts!
https://github.com/mahmud-r-farhan/typing-app-docx-web
application deployment docs helmet react react-seo reactjs seo seo-optimization sheet tailwindcss type-application
Last synced: 2 months ago
JSON representation
Boost your typing speed and accuracy with our interactive typing web app. Practice typing lessons, track your progress, and improve your skills through fun and engaging exercises. Perfect for all skill levels, from beginners to experts!
- Host: GitHub
- URL: https://github.com/mahmud-r-farhan/typing-app-docx-web
- Owner: mahmud-r-farhan
- License: mit
- Created: 2024-12-17T17:31:13.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-17T18:07:17.000Z (5 months ago)
- Last Synced: 2025-01-21T16:36:18.608Z (4 months ago)
- Topics: application, deployment, docs, helmet, react, react-seo, reactjs, seo, seo-optimization, sheet, tailwindcss, type-application
- Language: JavaScript
- Homepage: https://docxs.netlify.app/
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DOG Docxs (Typing Web App)
**Check out now**
```
https://docxs.netlify.app/
```
## Table of Contents
1. **Overview**
2. **Features**
3. **Tech Stack**
4. **Folder Structure**
5. **Setup and Installation**
6. **Usage**
7. **Components**
8. **SEO Implementation**
9. **Dark and Hacker Mode**
10. **Customization Options**
11. **Future Enhancements**
12. **Contributing**
13. **License**
----------
## 1. Overview
The Typing Web Application is an interactive text editor that allows users to type and style text with various customization options. The application includes features such as text formatting, font size and family adjustment, theme switching (light/dark modes), and the ability to save the typed content in different formats (e.g., `.txt`, `.docx`). Additionally, it provides a "Hacker Mode" for users who prefer a retro-styled UI with a dark background and green text, mimicking the classic "green screen" terminal look.
----------
## 2. Features
- **Text Styling**:
- Font size and font family adjustment.
- Text colour input for customization.
- Support for bold, italic, underline, strikethrough, and text alignment.
- **Themes**:
- Light and Dark Mode.
- Hacker Mode with a dark background and green text for a retro coding style.
- **File Download**:
- Save the typed content as `.txt` or `.docx` files.
- **Responsive Design**:
- The application is fully responsive and works on mobile, tablet, and desktop screens.
- **Typing Animation**:
- Text input with animation effects to make the typing experience more interactive.
- **Multiple Fonts**:
- Multiple font families with custom font size options.
----------
## 3. Tech Stack
- **Frontend**:
- React.js
- Tailwind CSS (for styling)
- React Icons (for toolbar icons)
- Helmet (for SEO)
- **Backend** (Optional):
- None (client-side only application)
- **Utilities**:
- FileSaver.js (for file download functionality)
- PostCSS (for compiling Tailwind CSS)
----------
## 4. Folder Structure
The folder structure for the Typing Web Application is designed for scalability, maintainability, and ease of development:
```
typing-app/
├── public/
│ ├── index.html # Main HTML file
│ ├── favicon.ico # App favicon
│ └── assets/ # Static assets (images, icons, etc.)
├── src/
│ ├── components/ # Reusable components
│ ├── styles/ # Tailwind CSS and custom styles
│ ├── utils/ # Utility functions (file saving, theme switching)
│ ├── App.js # Main App component
│ ├── index.js # Entry point
│ ├── reportWebVitals.js # Optional (performance tracking)
│ └── setupTests.js # Optional (for testing)
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── .gitignore # Files to be ignored by Git
├── package.json # Project metadata and dependencies
├── README.md # Project documentation
└── package-lock.json # Dependency lock file
```
----------
## 5. Setup and Installation
### **Prerequisites**:
Before getting started, ensure you have the following installed:
- **Node.js** (>= 14.x)
- **npm** (>= 6.x)
### **Steps**:
1. Clone the repository:
```bash
git clone https://github.com/mahmud-r-farhan/Typing-App-docx-web
cd Typing-App-docx-web
```
2. Install dependencies:
```bash
npm install
```
3. Run the application locally:
```bash
npm start
```
4. The application should now be running on [http://localhost:3000](http://localhost:3000/).
----------
## 6. Usage
Once the application is up and running, users can:
1. **Type Text**: Begin typing directly into the editor. The app provides various formatting options to enhance the text.
2. **Customize Text**: Use the toolbar to change the font size, family, and text alignment. Additional styling like bold, italic, and underline is available.
3. **Switch Themes**: Click the theme toggle button to toggle between Light, Dark, and Hacker Mode.
4. **Save Content**: After typing, users can download the text as `.txt` or `.docx` files by clicking the download button.
----------
## 7. Components
### **1. TextEditor.js**:
- This component renders the main text editor area.
- It accepts the current text and style from `App.js` as props and allows users to type in it.
- Supports dynamic styling based on the selected text style.
### **2. Toolbar.js**:
- This component provides the UI for adjusting the text style.
- Includes controls for font size, font family, and text colour.
- Also has buttons for toggling bold, italic, underline, and text alignment.
### **3. ThemeToggle.js**:
- A simple button that toggles between the three modes: Light, Dark, and Hacker Mode.
- It manages the theme state and applies the correct classes to the app.
----------
## 8. SEO Implementation
SEO is crucial for improving the discoverability of your web app. Here’s how we’ve implemented SEO in this app:
1. **Title and Meta Tags**:
- The `Helmet` component from `react-helmet` is used to set the title and meta description of the app dynamically.
Example:
```jsx
Typing Web App
```
2. **Accessible Components**:
- All buttons and controls have proper ARIA labels to enhance accessibility.
- Focus states are visible for all interactive elements.
----------
## 9. Dark and Hacker Mode
### **Light and Dark Modes**:
- **Light Mode**: Default mode with a white background and dark text.
- **Dark Mode**: Features a dark background with light text for low-light environments.
### **Hacker Mode**:
- The "Hacker Mode" mimics a terminal environment with a black background, green text, and small font for a retro coding experience.
- Users can switch to Hacker Mode using the Theme Toggle button.
----------
## 10. Customization Options
- **Font Size**: Users can select their desired font size from the toolbar.
- **Font Family**: The toolbar allows users to choose different font families.
- **Text Color**: Users can change the text colour to their preference.
- **Bold, Italic, Underline**: Easily toggle bold, italic, or underline on the selected text.
- **Text Alignment**: Change the text alignment (left, centre, right).
----------
## 11. Future Enhancements
- **Collaborative Editing**: Allow multiple users to type and collaborate in real time.
- **Speech-to-Text**: Add voice input functionality for hands-free typing.
- **Cloud Saving**: Save documents to the cloud for access across devices.
- **Version Control**: Track document changes and allow for reverting to previous versions.
----------
## 12. Contributing
We welcome contributions to this project! To contribute:
1. Fork the repository.
2. Clone your fork to your local machine.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Create a pull request describing your changes.
----------
## 13. License
This project is licensed under the MIT License
----------
### **Conclusion**
This Typing Web Application is a fully functional and customizable text editor designed for ease of use, customization, and accessibility. With features like Dark Mode, Hacker Mode, and multiple file download options, it's an excellent tool for both casual users and those needing a more focused, coding-like environment.