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:

   git clone https://github.com/mahmud-r-farhan/Typing-App-docx-web
   cd Typing-App-docx-web
   

2. Install dependencies:

   npm install
   

3. Run the application locally:

   npm start
   

4. The application should now be running on 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:

   <Helmet>
     <title>Typing Web App</title>
     <meta name="description" content=" Interactive typing web app with multiple text styling options." />
   </Helmet>

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.