WIN25995-Login&Register finalized after all the deployments

README.md

@@ -1,130 +1,245 @@
-# Vi-Notes
+## 🌐 Live Application
 
-**Vi-Notes** is an authenticity verification platform designed to distinguish genuine human-written content from AI-generated or AI-assisted text. The system focuses on analyzing **writing behavior** alongside **statistical and linguistic characteristics** of the text to establish reliable authorship verification.
+- Frontend deployed on Vercel:
+  - https://vi-notes-mernstack-login-vercel-ren-five.vercel.app
+  ---
 
-This repository represents the **design and conceptual foundation** for the Vi-Notes system.
+## 🎥 Demo Video
+
+- Watch the project demo here:  
+  https://drive.google.com/file/d/1gC4xZYxaxT8E78etxju7U33xDB-k9gXC/view?usp=sharing
 
 ---
+# BACKEND
+
+## MONGODB.js
 
-## Motivation
+### dotenv
+- All sensitive information is saved in `.env` file.
+- `dotenv` helps us retrieve those values using `process.env`.
+- This prevents exposing secrets like database password or JWT secret in code.
 
-With the widespread availability of AI writing tools, verifying true human authorship has become increasingly challenging. Most existing detection methods rely primarily on textual analysis, which can be inconsistent and easy to bypass.
+---
 
-Vi-Notes approaches this problem by combining:
-- Behavioral signals from the writing process
-- Statistical analysis of the written content
-- Correlation between how content is written and what is written
+### CORS
+- CORS is a browser security feature that controls which frontends are allowed to access backend APIs.
+- In this project, only our frontend URLs are allowed to access the backend.
 
 ---
 
-## Core Idea
+### express.json()
+- HTTP only sends text (string) or binary.
+- `express.json()` converts incoming JSON data into a JavaScript object so the backend can use it.
 
-Human writing naturally includes:
-- Variable typing speeds
-- Pauses during thinking
-- Revisions during idea formation
-- Irregular sentence structures
-- A relationship between content complexity and editing frequency
+---
 
-AI-generated or pasted text often lacks these behavioral signatures.
+## MONGO (Mongoose)
 
-Vi-Notes is designed to capture and analyze these characteristics to assess authorship authenticity.
+- `mongoose.connect()` → connects to MongoDB Atlas cluster  
+- `mongoose.Schema()` → defines the structure of the database  
+- `mongoose.model()` → creates a model based on schema  
+- `findOne()` → finds a document based on condition  
+- `create()` → creates a new document in database  
 
 ---
 
-## Key Features
+## Google Authentication - Login
 
-### Writing Session Monitoring
-- Capture keystroke timing metadata (not raw key content)
-- Track pauses, deletions, edits, and writing flow
-- Detect pasted or externally inserted text blocks
+- First, we create a Google OAuth client using the client ID stored in `.env`.
+- We take the token from the request body sent by the frontend.
+- We verify this token using Google’s authentication service.
+- After verification, we extract user details such as:
+  - email
+  - name
+  - profile picture
 
-### Behavioral Pattern Analysis
-- Pause distribution before sentences and paragraphs
-- Typing speed variance
-- Revision frequency relative to text complexity
-- Micro-pauses around punctuation and structural boundaries
+- Then we check in the database:
+  - If user already exists → login is successful
+  - If user does not exist → create a new user with `isGoogleUser = true`
+
+- Finally, we generate a JWT token and send it to the frontend.
+
+---
 
-### Textual Statistical Analysis
-- Sentence length variation
-- Vocabulary diversity metrics
-- Stylistic consistency analysis
-- Linguistic irregularities typical of human writing
+## JWT TOKEN
 
-### Cross-Verification Engine
-- Correlate keyboard behavior with text evolution
-- Identify mismatches between behavioral data and content
-- Flag suspicious uniformity patterns
+- JWT (JSON Web Token) is used to keep the user logged in for a certain time (1 hour).
+- Without JWT, the server cannot remember the user between requests.
 
-### Authenticity Reports
-- Confidence score for human authorship
-- Highlighted suspicious segments
-- Supporting behavioral and textual indicators
-- Shareable verification summaries
+- JWT works using:
+  - payload (userId)
+  - secret key
+  - expiry time
+
+- The generated token is sent to the frontend and stored there for future authentication.
 
 ---
 
-## Tech Stack (MERN Architecture)
+## Manual Login
+
+- User enters email and password.
+- Backend checks if the email exists in MongoDB.
+- Password is verified using bcrypt.
+
+- Important:
+  - bcrypt does NOT decrypt passwords.
+  - It compares hashed values securely.
 
-### Frontend
-- React
-- TypeScript
-- Electron for desktop-level keyboard event access
+- If password matches → login success + JWT token  
+- If not → error message  
 
-### Backend
-- Node.js
-- Express.js
-- RESTful APIs for session handling and analysis
+---
+
+## Register (Required for Manual Login)
 
-### Database
-- MongoDB
-- Encrypted storage for writing sessions, keystroke metadata, and reports
+- User sends email and password from frontend.
+- Backend checks if user already exists:
+  - If yes → return error message
+  - If no → create a new user
 
-### Machine Learning
-- TensorFlow / PyTorch
-- Supervised learning for human vs AI-assisted writing
-- Unsupervised anomaly detection
-- NLP-based statistical signature analysis
+- Password is hashed using bcrypt before storing.
+- This ensures security of user credentials.
 
 ---
 
-## Privacy & Ethics
+# FRONTEND
 
-Vi-Notes is designed with privacy-first principles:
+## login.tsx
 
-- No storage of raw keystroke content
-- Only timing, frequency, and structural metadata is collected
-- Encrypted data storage
-- User-controlled session tracking
-- Monitoring limited strictly to active writing sessions
+- Displays login UI.
+- Takes input:
+  - email
+  - password
+- Includes:
+  - Manual login button
+  - Google login button
 
 ---
 
-## Project Goals
+### Manual Login Flow
+
+- Validates email using regex.
+- Sends a POST request to backend `/login`.
+- Request includes:
+  - headers (Content-Type: application/json)
+  - body (email and password converted to JSON string)
 
-- Restore trust in written content authenticity
-- Differentiate between human-written, AI-assisted, and AI-generated text
-- Adapt detection methods as AI writing tools evolve
-- Maintain ethical, transparent, and privacy-conscious verification
+- Receives response from backend.
+- If login is successful:
+  - Stores JWT token in localStorage.
 
 ---
 
-## Repository Scope
+### Google Login Flow
 
-This repository currently serves as:
-- A design reference
-- A research and experimentation space
-- A foundation for future MERN-based implementation
+- User clicks Google login button.
+- Google returns a credential token.
+- This token is sent to backend `/auth/google`.
+
+- Backend verifies the token and returns JWT.
+- Token is stored in localStorage.
+
+---
+
+## register.tsx
+
+- Displays register UI.
+- Takes:
+  - email
+  - password
+  - confirm password
+
+- Validates:
+  - email format
+  - password matches confirm password
+
+- Sends POST request to backend `/register`.
+- Displays success or error message.
 
 ---
 
-## Contributing
+## App.tsx
+
+- Contains Navbar (common across all pages)
+  - Links to Login and Register
+
+- Uses React Router for navigation between pages.
 
-Contributions are welcome, especially for **feature requests and their implementation**.  
-If you are interested in working on an existing feature request or proposing a new one, please open or comment on an issue to start the discussion.
+- Uses Lazy Loading:
+  - Components are loaded only when needed.
+
+- Uses Suspense:
+  - Displays loading text until component loads.
+
+- Uses ErrorBoundary:
+  - Prevents entire app from crashing
+  - Only the component with error stops working
 
 ---
 
-## License
+# DEPLOYMENT
+
+## Database - MongoDB Atlas
+
+- Created a cluster.
+- Created a database user.
+- Allowed network access (0.0.0.0/0).
+- Generated connection string used in backend.
+
+---
+
+## Backend - Render
+
+- Uploaded backend code to GitHub.
+- Imported repository into Render.
+- Added environment variables:
+  - MONGO_URI
+  - JWT_SECRET
+  - client_id
+
+- Render generates a backend URL used by frontend.
+
+---
+
+## Frontend - Vercel
+
+- Uploaded frontend code to GitHub.
+- Imported repository into Vercel.
+- Added environment variable:
+  - VITE_API_URL (backend URL)
+
+- Vercel generates the live frontend URL.
+
+---
+
+# GOOGLE AUTHENTICATION (SETUP)
+
+- Go to Google Cloud Console.
+- Create an OAuth Client ID.
+- Add authorized origins:
+  - http://localhost:5173
+  - Vercel frontend URL
+
+- Copy the Client ID and store it in `.env`.
+
+---
+
+# IMPORTANT NOTES
+
+- Never push `.env` file to GitHub.
+- Always hash passwords before storing.
+- JWT should have an expiry time.
+- Use HTTPS in production.
+- Validate user inputs on frontend.
+
+---
+
+# CONCLUSION
+
+This project implements a complete MERN stack authentication system with:
 
-This project is licensed under the MIT License.
+- Manual login and registration
+- Google OAuth login
+- Secure password storage using bcrypt
+- Session management using JWT
+- Deployment using MongoDB Atlas, Render, and Vercel# Vi-notes-mernstack-login-vercel_render