Spelling and Grammar Checker Component with ReactJS + Ollama

This project is the start of the implementation of a spelling and grammar checker component using ReactJS and Ollama as the API. The project aims to mimic the web service functionality that Grammarly provides.

Project Structure

This project is structured into different folders where each folder has a specific purpose:

• src/component/: This folder contains the ControlledEditableDiv.tsx which is a primary component for the grammar and spell check.
• src/services/: This folder contains GrammarAndSpellingCheck.tsx, a service file where the spell and grammar check logic is implemented using Ollama APIs.
• src/view/: This folder holds the Project.tsx file, a UI representation of the project.
• src/: This folder contains main.tsx and App.tsx, the entry point of the application and the main App component respectively.

Getting Started

In order to run this project locally, you need to have Node.js installed along with npm (Node Package Manager).

Once those are set up, you can clone this repository using the following command in your Terminal:

git clone <repository_link>
cd <project_directory>
npm install
npm run dev

Contributing

Contributions are welcome. Please feel free to fork, clone, and submit your pull requests.

Explanation of Components

1. EditableDiv:
   • Handles rendering and user input.
   • Manages focus, keydown, and paste events.
2. ControlledEditableDiv:
   • Wraps EditableDiv and sanitizes input before passing it to onChange.
3. Input:
   • Integrates with React Hook Form using useController.
   • Updates EditableDiv content based on updatedContent.
4. Project:
   • Manages form state and handles submission.
   • Handles API call for spelling check and updates form fields accordingly.

License

This project is licensed under the MIT license.