Advanced-Word-Processor-System-using-React-NodeJS-frontend-MongoDB-for-Backend

A full-stack word-processing web application with user authentication, MongoDB logging, Syncfusion DocumentEditor, text-to-speech, sentiment analysis, and more.

📁 Repository Structure

word-document-in-react/
├── backend/ # Node.js + Express API, MongoDB logging
│ ├── package.json
│ └── server.js
└── frontend/ # React + Syncfusion DocumentEditor client
├── package.json
├── tsconfig.json
├── public/
│ └── index.html
└── src/
├── index.tsx # React entry point
├── App.tsx # App root: shows Login or Editor
├── AuthPage.tsx # Signup / Login UI
├── Default.tsx # Main editor UI
├── title-bar.ts # Syncfusion TitleBar helper
└── App.css # Global styles

🔧 Prerequisites

• Node.js ≥ 16.x

• npm ≥ 8.x

• MongoDB running locally on default port (27017)

• A Syncfusion license key (free for community)

  🚀 Getting Started

1. Clone the repo

git clone https://github.com/Kushcodingexe/Advanced-Word-Processor-System-using-React-NodeJS-frontend-MongoDB-for-Backend.git
cd Advanced-Word-Processor-System-using-React-NodeJS-frontend-MongoDB-for-Backend

2. Backend Setup (Ensure MongoDB service is running on your system by running net start MongoDB on your elevated cmd/powershell)

cd backend
npm install
npm start

By default, the server will listen on http://localhost:5000 and connect to mongodb://localhost:27017/wordProcessorLogs.

POST /api/auth/signup

Body: { username, email, password }

Creates a new user (password hashed with bcrypt), returns JWT & user info.

POST /api/auth/login

Body: { username, password }

Verifies credentials, logs an attempt, returns JWT & user info.

GET /api/admin/users

(Protected) Lists all users and login-attempt logs.

3. Frontend Setup

cd ../frontend
npm install
npm start

The client will start on http://localhost:3000 and talk to the backend at http://localhost:5000.

⚙️ Usage Sign Up (first time) or Log In

Supply username, email & password to sign up.

Supply username & password to log in.

Main Editor:

Upon successful auth, you’ll see the Syncfusion DocumentEditor loaded with a “Getting Started” template.

Toolbar: formatting, import/export, spell-check, etc.

Read Aloud: Select text → ▶️ “Read Aloud”

Stop: 🛑

Sentiment: 🧠 shows positive/neutral/negative.

Logout:

Click the “Logout” button in the top toolbar to return to the auth screen.

This login interface implements a secure authentication gateway for our Advanced Word Processing System and shows the email and password fields for user verification. The dual-option approach here allows both existing users to authenticate and new users to navigate to registration, ensuring comprehensive access control to the document management system.

The registration interface has the sign up approach and it allows to have new users to create their profiles by entering their name, email address and password.

This is the case of the user trying to log in while entering an invalid password or username and we can see that there is an error shown by the red colour. This feature ensures that the user will have to enter the correct details to log into our application.

This is the case of the user trying to sign-up form shows an error message in red text, alerting users that required fields must be completed before registration can proceed. This validation feature prevents incomplete account creation and ensures all necessary user information is collected for proper system access

This is the case where the sign-up form shows a duplicate account detection feature, as seen in the red error message "User already exists" when attempting to register with an email which is already in the system. This security feature prevents account duplication and protects the existing user data.

The word processor interface presents a formatting toolbar with text styling, layout, and document structure options for efficient document creation. The right panel provides a detailed text formatting controls for font properties, color selection and paragraph settings, which enables the users to customize their documents according to specific requirements.

This image shows that we can insert formatted tables, images and the highlighted green text shows that the interface allows real-time text formatting and can simultaneously handle text styling and multimedia content integration.

The file management dialog overlay provides document browsing functionality, displaying folders and files with timestamps and size information. The integration allows users to access their document repository directly within the editing interface and facilitates the file opening and saving operations without leaving the application environment.

The system implements sentiment analysis functionality, evaluating text content and displaying a positive emotional assessment with "Positive" indicator above the document. The interface processes the phrase "Hello there you are wonderful!" to determine the sentiment tone, showing the advanced text analysis ability integrated within the document editing environment.

This screenshot showcases the Header editing feature in the Advanced Word Processing and Formatting System. Users can insert and customize headers, including positioning and page-specific settings such as "Different First Page" and "Different Odd & Even Pages." This allows for professional document formatting and greater control over page layout.

This image highlights the commenting and search and find features of the system. The user can search for specific words using the Navigation panel and view or add comments for collaboration on the right. This enables real-time feedback and efficient document review during multi-user editing.

This image shows the "Page Setup" dialog box from a word processing application, such as Google Docs or a similar editor. It allows users to configure various settings for how their document pages are formatted.

This image shows the "Page Setup" dialog box with the "PAPER" tab selected. It allows users to configure the size of the page for their document. This screenshot shows the "Page Setup" dialog box with the "LAYOUT" tab selected. This tab allows customization of how the page content is laid out, especially for headers, footers, and different page styles. The editor is displaying a document with text and an endnote, where editing is being restricted by setting the document to "Read only" mode. The editor is allowing only 1 character in a line using the line width section, this can be adjusted to required number of characters. This editor includes text formatting, track changes, comments, and restriction controls for collaborative editing. It also offers accessibility tools like read aloud, grammar check, and sentiment analysis. This image shows the "Borders and Shading" dialog box in the editor, allowing the user to apply border styles to selected text or paragraphs. Users can choose border types (None, Box, All, Custom), set style, width, and colour, with a preview displayed on the right. This image shows the document editor with paragraph marks (¶) enabled, revealing all line breaks and paragraph endings. The text "I stay in 1st floor" is typed in the center, followed by multiple paragraph breaks, and the formatting sidebar is open for font and paragraph styling. The image shows a document editor where the text “I stay in 1st floor” is typed and a numbered list is added below it. The image shows the "Columns" settings dialog with the "Two Columns" preset selected and equal column widths enabled. The image shows the terminal output of a JEST test run where the file has passed all 6 unit tests successfully. It verifies component behavior such as rendering toolbar buttons, handling logout, and generating alerts for speech and grammar checks.