Revamp README, enhance user model, add animations, and implement Magic Helper feature

Author: jeeshumittal7

README.md

@@ -1,87 +1,94 @@
-```markdown
 # PythaSpace
 
-PythaSpace is a cutting-edge platform for publishing, sharing, and discovering high-quality articles and stories across various domains. It aims to cultivate a vibrant community of writers and readers, promoting intellectual discourse and knowledge exchange.
+PythaSpace is a cutting-edge platform designed for publishing, sharing, and discovering high-quality articles and stories across various domains. It aims to foster a vibrant community of writers and readers, promoting intellectual discourse and knowledge exchange.
 
 ## Overview
 
-PythaSpace is built with a modern web stack, focusing on a seamless user experience and robust backend services. The architecture includes:
-- **Backend**: Node.js with Express framework
-- **Database**: MongoDB with Mongoose ORM for data management
-- **Frontend**: EJS for templating, Bootstrap for styling, and Vanilla JS for functionality
-- **AI Integration**: OpenAI for content moderation and writing assistance
+PythaSpace is built with a robust architecture that leverages modern web technologies to deliver an intuitive and seamless user experience. The platform is structured as follows:
 
-The project structure is organized as follows:
-- **models/**: Mongoose schemas for User and Article
-- **routes/**: Express routes for authentication, articles, and API endpoints
-- **services/**: Services for AI moderation and LLM requests
-- **utils/**: Utility functions for file uploads
-- **views/**: EJS templates for rendering pages
-- **public/**: Static files including CSS and JavaScript
+- **Backend:** Node.js with the Express framework for handling server-side logic.
+- **Database:** MongoDB managed with Mongoose ORM for efficient data storage and retrieval.
+- **Frontend:** EJS for templating, Bootstrap for responsive design, and Vanilla JS for client-side functionality.
+- **AI Integration:** OpenAI for content moderation and writing assistance.
+- **Additional Libraries:** bcrypt for password hashing, multer for file uploads, and social-share-js for social media sharing.
+
+The project structure includes:
+
+- **Models:** Mongoose schemas for User, Article, and Comment.
+- **Routes:** Express routes for authentication, article management, and API endpoints.
+- **Views:** EJS templates for rendering pages.
+- **Public:** Static files including CSS, JavaScript, and images.
+- **Services:** Helper services for AI interactions and file uploads.
+- **Middleware:** Authentication middleware for protecting routes.
 
 ## Features
 
-PythaSpace includes the following features:
-1. **User Registration and Login**:
-   - Users can register and log in using their email.
+PythaSpace offers a wide range of features to enhance the user experience:
+
+1. **User Registration and Login:**
+   - Users can register and log in using their email and password.
    - Essential for publishing, commenting, and utilizing the AI writer helper.
 
-2. **Article Publishing**:
-   - Support for multimedia content (images and videos) with specified size and format restrictions.
-   - AI-powered moderation using OpenAI, with each user's API key stored in their user profile.
-   - Articles automatically published upon passing AI moderation; issues highlighted otherwise.
+2. **Article Publishing:**
+   - Support for multimedia content (images and videos).
+   - AI-powered moderation using OpenAI.
+   - Articles can be saved as drafts or published directly.
+   - Moderation issues are highlighted for user correction.
 
-3. **Article Organization**:
-   - Categories: Technology, Science, Health & Wellness, Business & Finance, Arts & Culture, Lifestyle.
-   - Tags: Specific Topics, Writing Styles, Target Audience, Content Format.
+3. **Article Organization:**
+   - Articles are categorized into Technology, Science, Health & Wellness, Business & Finance, Arts & Culture, and Lifestyle.
+   - Tagging system for specific topics, writing styles, and content formats.
 
-4. **Commenting System**:
-   - Single-level comments on articles.
+4. **Commenting System:**
+   - Single-level comments on articles to foster discussions.
 
-5. **Social Sharing**:
-   - Integration with social-share-js for sharing articles on social media.
+5. **Social Sharing:**
+   - Integration with social-share-js for sharing articles on social media platforms.
 
-6. **AI Writer Helper ("Magic Helper")**:
-   - Offers writing suggestions based on the title and existing content.
-   - Utilizes the user's OpenAI API key stored in their profile for generating suggestions.
-   - Accessible via a modern, intuitive interface with a magic wand icon.
+6. **AI Writer Helper ("Magic Helper"):**
+   - Provides writing suggestions based on the title and existing content.
+   - Utilizes the user's OpenAI API key for generating suggestions.
 
 ## Getting started
 
 ### Requirements
 
-To run PythaSpace, you need the following technologies installed on your computer:
+To run PythaSpace, ensure you have the following technologies installed on your computer:
+
 - Node.js
 - MongoDB (or use a cloud version like MongoDB Atlas)
 
 ### Quickstart
 
-1. **Clone the repository**:
-   ```sh
+Follow these steps to set up and run the project:
+
+1. **Clone the repository:**
+   ```bash
    git clone <repository-url>
    cd PythaSpace
    ```
 
-2. **Install dependencies**:
-   ```sh
+2. **Install dependencies:**
+   ```bash
    npm install
    ```
 
-3. **Set up environment variables**:
-   - Copy `.env.example` to `.env` and fill in the required values:
-     ```sh
-     cp .env.example .env
-     ```
+3. **Set up environment variables:**
+   - Create a `.env` file in the project root using the provided `.env.example` as a template.
+   - Populate the `.env` file with your values (e.g., MongoDB URL, session secret).
 
-4. **Start the application**:
-   ```sh
+4. **Start the application:**
+   ```bash
    npm start
    ```
 
-5. **Access the application**:
-   - Open your browser and navigate to `http://localhost:3000`
+5. **Access the application:**
+   - Open your browser and navigate to `http://localhost:3000` to start using PythaSpace.
 
 ### License
 
-The project is proprietary (not open source), just output the standard Copyright (c) 2024.
+The project is proprietary (not open source), and all rights are reserved.
+
+```
+© 2024 PythaSpace.
 ```

models/User.js

@@ -2,25 +2,19 @@ const mongoose = require('mongoose');
 const bcrypt = require('bcrypt');
 
 const userSchema = new mongoose.Schema({
-  username: { type: String, unique: true, required: true },
+  email: { type: String, required: true, unique: true },
   password: { type: String, required: true },
   openaiApiKey: {
     type: String,
     default: ''
   }
 });
 
-userSchema.pre('save', function(next) {
-  const user = this;
-  if (!user.isModified('password')) return next();
-  bcrypt.hash(user.password, 10, (err, hash) => {
-    if (err) {
-      console.error('Error hashing password:', err);
-      return next(err);
-    }
-    user.password = hash;
-    next();
-  });
+userSchema.pre('save', async function(next) {
+  if (this.isModified('password')) {
+    this.password = await bcrypt.hash(this.password, 10);
+  }
+  next();
 });
 
 userSchema.virtual('articles', {

package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "@anthropic-ai/sdk": "^0.27.3",
+    "animate.css": "^4.1.1",
     "axios": "^1.7.7",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",

public/css/style.css

@@ -1,4 +1,50 @@
-/* Placeholder for custom styles */
+/* Smooth transitions for all elements */
+* {
+  transition: all 0.3s ease-in-out;
+}
+
+/* Hover effect for buttons */
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+/* Animate form inputs on focus */
+input:focus, textarea:focus, select:focus {
+  transform: scale(1.02);
+}
+
+/* Animate article cards */
+.card {
+  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+/* Animate navigation links */
+.nav-link {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: currentColor;
+  transition: width 0.3s ease-in-out;
+}
+
+.nav-link:hover::after {
+  width: 100%;
+}
+
 body {
     padding-bottom: 60px;
 }

public/js/magicHelper.js

@@ -0,0 +1,68 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const magicHelperBtn = document.getElementById('magicHelperBtn');
+  const magicHelperModal = new bootstrap.Modal(document.getElementById('magicHelperModal'));
+  const magicHelperContent = document.getElementById('magicHelperContent');
+
+  magicHelperBtn.addEventListener('click', async function() {
+    const title = document.getElementById('title').value.trim();
+    const content = quill.root.innerHTML;
+
+    if (!title) {
+      const errorMessage = document.createElement('span');
+      errorMessage.textContent = 'Please enter a title before using Magic Helper';
+      errorMessage.style.color = 'red';
+      errorMessage.style.marginLeft = '10px';
+      magicHelperBtn.parentNode.insertBefore(errorMessage, magicHelperBtn.nextSibling);
+
+      setTimeout(() => {
+        errorMessage.remove();
+      }, 3000);
+
+      return;
+    }
+
+    magicHelperContent.innerHTML = '<p>Generating suggestions...</p>';
+    magicHelperModal.show();
+
+    try {
+      const response = await fetch('/api/articles/magic-helper', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ title, content }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data.error);
+      }
+
+      displaySuggestions(data.suggestions);
+    } catch (error) {
+      console.error('Error fetching suggestions:', error);
+      magicHelperContent.innerHTML = '<p>Error fetching suggestions. Please try again.</p>';
+    }
+  });
+
+  function displaySuggestions(suggestions) {
+    let html = '<ol class="animate__animated animate__fadeIn">';
+    suggestions.forEach((heading) => {
+      html += `<li><h3 class="animate__animated animate__fadeInLeft">${heading.title}</h3><ol>`;
+      heading.subHeadings.forEach(subHeading => {
+        html += `<li><h4 class="animate__animated animate__fadeInLeft animate__delay-1s">${subHeading.title}</h4><ol>`;
+        subHeading.contentPoints.forEach(point => {
+          html += `<li class="animate__animated animate__fadeInLeft animate__delay-2s">${point}</li>`;
+        });
+        html += '</ol></li>';
+      });
+      html += '</ol></li>';
+    });
+    html += '</ol>';
+    magicHelperContent.innerHTML = html;
+  }
+});

routes/api/articleApiRoutes.js

@@ -1,7 +1,9 @@
 const express = require('express');
 const router = express.Router();
 const Article = require('../../models/Article');
+const User = require('../../models/User'); // Added to use User model for fetching user's OpenAI API key
 const { isAuthenticated } = require('../middleware/authMiddleware');
+const { sendLLMRequest } = require('../../services/llm');
 
 // Create a new article
 router.post('/', isAuthenticated, async (req, res) => {
@@ -89,4 +91,64 @@ router.delete('/:id', isAuthenticated, async (req, res) => {
   }
 });
 
+// Magic Helper endpoint
+router.post('/magic-helper', isAuthenticated, async (req, res) => {
+  try {
+    const { title, content } = req.body;
+    const user = await User.findById(req.user._id);
+
+    if (!user.openaiApiKey) {
+      return res.status(400).json({ error: 'OpenAI API key is required' });
+    }
+
+    const formattedMessage = `Based on the following article title and content, generate 2-3 captivating headings, each with 3-4 sub-headings, and 4-5 killer content ideas for each sub-heading. Format the response as a JSON object with the following structure:
+
+{
+  "suggestions": [
+    {
+      "title": "Captivating Heading",
+      "subHeadings": [
+        {
+          "title": "Engaging Sub-heading",
+          "contentPoints": [
+            "Specific and valuable content idea",
+            "Specific and valuable content idea",
+            "Specific and valuable content idea",
+            "Specific and valuable content idea",
+            "Specific and valuable content idea"
+          ]
+        },
+        // Repeat for 3-4 sub-headings
+      ]
+    },
+    // Repeat for 2-3 headings
+  ]
+}
+
+Ensure that each heading is unique and captivating, each sub-heading is engaging and relevant to its main heading, and each content idea is specific and valuable to the reader. Do not include any numbering or prefixes in the titles or content points.
+
+Title: ${title}
+
+Content: ${content}`;
+
+    const response = await sendLLMRequest('openai', 'gpt-3.5-turbo', formattedMessage, user.openaiApiKey);
+    console.log('Raw AI response:', JSON.stringify(response, null, 2));
+    const suggestions = parseSuggestions(response);
+
+    res.json(suggestions);
+  } catch (error) {
+    console.error('Error generating suggestions:', error);
+    res.status(500).json({ error: 'Error generating suggestions', message: error.message });
+  }
+});
+
+function parseSuggestions(response) {
+  if (!response || !response.suggestions || !Array.isArray(response.suggestions)) {
+    console.error('Invalid response format:', response);
+    return { suggestions: [] };
+  }
+
+  return response;
+}
+
 module.exports = router;