WordWizard 🧙‍♂️

A powerful text manipulation tool built with React and Vite for the modern web.

Live Demo • Report Bug • Request Feature

---

📋 Table of Contents

• WordWizard 🧙‍♂️
  • 📋 Table of Contents
  • 🎯 About
  • ⭐ Key Features
  • 🛠️ Tech Stack
  • 🚀 Getting Started
    • Prerequisites
    • Installation Steps
    • Available Scripts
  • 📂 Project Structure
  • 🤝 Contributing
  • 👥 Contributors
  • ⚖️ License
  • 📞 Contact
    • Project Lead
    • Project Links

---

🎯 About

WordWizard is a modern, feature-rich text manipulation tool that empowers users to efficiently analyze and transform text content. Built with performance and user experience in mind, it provides a comprehensive suite of text processing features with an intuitive interface.

Why WordWizard?	Description
🚀 Lightning Fast	Built with React + Vite for optimal performance.
🎨 Customizable	Multiple themes and appearance options.
📱 Responsive	Works seamlessly across all devices.
🔐 Privacy-Focused	All text processing happens locally in your browser.

---

⭐ Key Features

Category	Feature
✍️ Text Manipulation	• Case conversion (UPPERCASE, lowercase) • Smart space management • Real-time text analysis • One-click copy to clipboard
📊 Analysis Tools	• Detailed word & character counts • Character frequency analysis • Reading time estimation • Text complexity metrics
🎨 User Experience	• Dark/Light mode with multiple themes • Instant results with no page reloads • Auto-save functionality • Smooth transitions

---

🛠️ Tech Stack

Category	Technologies
Core	React 18, Vite, Tailwind CSS
UI Components	Bootstrap 5, CSS Modules
State Management	React Context API
Dev Tools	ESLint, Prettier, Husky, lint-staged
Testing	Jest, React Testing Library

---

🚀 Getting Started

Prerequisites

• Node.js: v16 or higher
• npm: v7 or higher

Installation Steps

0. Forking the Repository:

   If you’d like to contribute to WordWizard, start by creating your own copy of the repository. Go to the WordWizard GitHub repository: https://github.com/palchhinparihar/WordWizard

   Click on the “Fork” button (top-right corner of the page). This creates a personal copy of the repository under your GitHub account.

1. Clone your forked repository:

   git clone https://github.com/palchhinparihar/WordWizard.git
   cd WordWizard

2. Add the upstream remote (original repo)

   git remote add upstream https://github.com/palchhinparihar/WordWizard.git

3. Sync your fork with the main repo:

   git pull upstream main

4. Install dependencies:

   npm install

5. Add .env file:

   Rename the provided .env-example file to .env and ensure it contains the following line:

   VITE_LANUGAGETOOL_API_URL=https://api.languagetool.org/v2/check

   Note: Never commit your personal .env file to GitHub. It should remain local for security reasons.

6. Create a New Branch

   Before making any changes, create a new branch for your contribution:

   git checkout -b <your-branch-name>

   Use a descriptive branch name, such as:

   -fix/navbar-animation

   -feature/add-dark-mode-toggle

   -docs/update-readme

7. Start the development server:

   npm run dev

Optional: Abstractive summarization server

WordWizard includes an optional small server that proxies to the OpenAI API to produce abstractive summaries (summaries in the assistant's own words).

1. Copy the example env and provide an OpenAI key:

cp server/.env.example server/.env
# then edit server/.env and set OPENAI_API_KEY

2. Install and start the server (from the project root):

cd server
npm install
npm start

3. Enable the client to use the abstractive API by creating or updating .env in the project root and adding:

VITE_USE_ABSTRACT_API=true
VITE_SUMMARIZER_API_URL=http://localhost:3001/summarize

When enabled, the Summarize buttons use the server to generate an abstractive summary in their own words. If not enabled, the app falls back to an in-browser extractive summarizer.

Available Scripts

• npm run dev: Start development server.
• npm run build: Create a production build.
• npm run test: Run the test suite.
• npm run lint: Lint the codebase.

---

📂 Project Structure

wordwizard/
├── public/                  # Static assets
├── src/
│   ├── assets/              # Images, fonts, etc.
│   ├── components/          # React components
│   │   ├── About.jsx
│   │   ├── Alert.jsx
│   │   ├── BackToTopButton.jsx
│   │   ├── DialogBox.jsx
│   │   ├── Footer.jsx
│   │   ├── Navbar.jsx
│   │   ├── SummaryCard.jsx
│   │   ├── TextForm.jsx
│   │   ├── Toolbar.jsx
│   │   └── Welcome.jsx
│   ├── data/                # Static data
│   │   ├── accordionItems.js
│   │   ├── navbarContent.js
│   │   ├── textUtils.js
│   │   └── themes.js
│   ├── i18n/               # Internationalization
│   │   ├── en.json
│   │   ├── hi.json
│   │   └── index.jsx
│   ├── App.jsx             # Main App component
│   ├── index.css           # Main App style
│   ├── main.jsx            # Entry point
│   └── utils.js            # Utility functions
├── .env-example            # Environment variables
├── index.html              # HTML entry point
├── package.json            # Dependencies and scripts
├── tailwind.config.js      # Tailwind configuration
└── vite.config.js          # Vite configuration

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for more details on how to get started.

🎉 Hacktoberfest 2025: We are excited to participate in Hacktoberfest! Look for issues tagged with hacktoberfest, good-first-issue, or help-wanted.

---

👥 Contributors

Thanks to these wonderful people who have contributed to WordWizard:

---

⚖️ License

This project is licensed under the MIT License. See the LICENSE file for details.

---

📞 Contact

Project Lead

Palchhin Parihar

Project Links

• GitHub Repository
• Report Issues
• Live Demo

---

Made with ❤️ by the WordWizard Team