🚀 Thriveon - Cloud-Based Task Management System

████████╗██╗  ██╗██████╗ ██╗██╗   ██╗███████╗ ██████╗ ███╗   ██╗
╚══██╔══╝██║  ██║██╔══██╗██║██║   ██║██╔════╝██╔═══██╗████╗  ██║
   ██║   ███████║██████╔╝██║██║   ██║█████╗  ██║   ██║██╔██╗ ██║
   ██║   ██╔══██║██╔══██╗██║╚██╗ ██╔╝██╔══╝  ██║   ██║██║╚██╗██║
   ██║   ██║  ██║██║  ██║██║ ╚████╔╝ ███████╗╚██████╔╝██║ ╚████║
   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝  ╚══════╝ ╚═════╝ ╚═╝  ╚═══╝

✨ Streamline your productivity with intelligent task management ✨

🔗 Quick Access Links

📊 Project Status & Tech Stack

🎯 Introduction

Thriveon is a comprehensive cloud-based task management system built with the MERN stack (MongoDB, Express.js, React.js, Node.js). Designed for individuals and teams who want to boost their productivity, Thriveon offers intuitive task organization, priority management, Gantt chart visualization, and seamless note-taking capabilities. With modern UI/UX design and real-time synchronization across devices, Thriveon makes task management effortless and engaging.

🏗️ Project Architecture

graph LR
    A[🎨 Frontend<br/>React.js + Netlify] --> B[⚙️ Backend<br/>Node.js + Express<br/>Railway]
    B --> C[🗃️ Database<br/>MongoDB Atlas]
    
    style A fill:#61DAFB,stroke:#333,stroke-width:2px,color:#000
    style B fill:#339933,stroke:#333,stroke-width:2px,color:#fff
    style C fill:#47A248,stroke:#333,stroke-width:2px,color:#fff

Simple and scalable MERN stack architecture with cloud deployment

The application follows a modern three-tier architecture:

🎨 Frontend: React.js application deployed on Netlify for fast global CDN delivery
⚙️ Backend: Node.js + Express.js RESTful API hosted on Railway for scalable server infrastructure
🗃️ Database: MongoDB Atlas for reliable cloud database management with automatic scaling

📂 Project Repositories

Component	Repository	Description
🎨 Frontend		React.js client application
⚙️ Backend		Node.js + Express.js API server

🌐 Live Deployments

🚀 Live Application

🔗 Click the badges above to access the live deployments

⚡ Tech Stack

Frontend Technologies

Backend Technologies

Deployment & Hosting

Category	Technologies
Frontend	React.js, JavaScript ES6+, HTML5, CSS3, React Router
Backend	Node.js, Express.js, JWT Authentication, bcrypt
Database	MongoDB, Mongoose ODM
Deployment	Netlify (Frontend), Railway (Backend)
Tools	Git, VS Code, Postman, MongoDB Compass

✨ Key Features

🎯 Core Task Management

✅ CRUD Operations: Create, read, update, and delete tasks with ease
✅ Priority Matrix: Organize tasks using Eisenhower Matrix (Urgent/Important)
✅ Status Tracking: Track progress with customizable task statuses
✅ Due Date Management: Set and monitor task deadlines with visual indicators

📊 Advanced Visualization

✅ Gantt Chart View: Timeline visualization for project planning and tracking
✅ Kanban Board: Drag-and-drop task management with swim lanes
✅ Dashboard Analytics: Progress metrics and productivity insights
✅ Calendar Integration: Month/week view with task scheduling

📝 Productivity Tools

✅ Smart Notes: Rich text note-taking with task association
✅ Tags & Categories: Flexible organization with custom labels
✅ Search & Filters: Quick task discovery with advanced filtering
✅ Bulk Operations: Efficient multi-task editing and management

🔐 Security & Sync

✅ User Authentication: Secure JWT-based login and registration
✅ Real-time Sync: Cross-device synchronization with cloud storage
✅ Data Backup: Automatic backups with MongoDB Atlas
✅ Responsive Design: Seamless experience across desktop and mobile

📱 Screenshots & Demo

🖥️ Dashboard Overview

┌─────────────────────────────────────────────────────────┐
│  📊 THRIVEON DASHBOARD - TASK OVERVIEW & ANALYTICS     │
│                                                         │
│  🎯 Active Tasks: 12    📅 Due Today: 3    ✅ Done: 47  │
│  ═══════════════════════════════════════════════════════ │
│  📈 Productivity Chart    📋 Recent Tasks              │
│  ┌─────────────────┐     ┌─────────────────────────────┐ │
│  │   📊 Progress   │     │ ✅ Complete UI mockups     │ │
│  │   ████████░░░   │     │ 🔄 Review API endpoints    │ │
│  │   80% Complete  │     │ ⏰ Client meeting prep     │ │
│  └─────────────────┘     └─────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

Replace with actual dashboard screenshot

📋 Task Management Interface

┌─────────────────────────────────────────────────────────┐
│  📝 CREATE & ORGANIZE TASKS - INTUITIVE INTERFACE      │
│                                                         │
│  ➕ New Task    🔍 Search    🏷️ Filter    📊 Sort       │
│  ═══════════════════════════════════════════════════════ │
│  🔴 High Priority                                       │
│  └── 📄 Design system documentation    📅 Due: Today   │
│  └── 🐛 Fix authentication bug         📅 Due: Tomorrow│
│                                                         │
│  🟡 Medium Priority                                     │
│  └── 📱 Mobile responsive updates      📅 Due: Friday  │
│  └── ✅ Code review for PR #123        📅 Due: Monday  │
└─────────────────────────────────────────────────────────┘

Replace with actual task management screenshot

🎯 Priority Matrix

┌─────────────────────────────────────────────────────────┐
│  🎯 EISENHOWER PRIORITY MATRIX - ORGANIZE BY IMPACT     │
│                                                         │
│  URGENT         │               │    NOT URGENT         │
│  ═══════════════╪═══════════════╪═══════════════════════ │
│  🔥 DO FIRST    │ 📅 SCHEDULE   │                       │
│  • Client demo  │ • Team review │                       │
│  • Bug fixes    │ • Documentation│                       │
│  ───────────────┼───────────────┼─────────────────────── │
│  📞 DELEGATE    │ ❌ ELIMINATE  │                       │
│  • Status update│ • Old reports │                       │
│  • Meeting prep │ • Unused code │                       │
└─────────────────────────────────────────────────────────┘

Replace with actual priority matrix screenshot

📊 Gantt Chart Timeline

┌─────────────────────────────────────────────────────────┐
│  📊 PROJECT TIMELINE - GANTT CHART VISUALIZATION       │
│                                                         │
│  Task Name           │ Jan │ Feb │ Mar │ Apr │ May │    │
│  ════════════════════╪═════╪═════╪═════╪═════╪═════════ │
│  🎨 UI Design        │████░│░░░░░│░░░░░│░░░░░│░░░░░│    │
│  ⚙️ Backend API      │░░░░░│████░│████░│░░░░░│░░░░░│    │
│  🔗 Integration      │░░░░░│░░░░░│░░███│███░░│░░░░░│    │
│  🧪 Testing         │░░░░░│░░░░░│░░░░░│░░███│███░░│    │
│  🚀 Deployment      │░░░░░│░░░░░│░░░░░│░░░░░│░░██░│    │
└─────────────────────────────────────────────────────────┘

Replace with actual Gantt chart screenshot

📝 Notes & Documentation

┌─────────────────────────────────────────────────────────┐
│  📝 RICH TEXT NOTES - CAPTURE IDEAS & DOCUMENTATION    │
│                                                         │
│  📂 Project Notes    📂 Meeting Notes    📂 Ideas      │
│  ═══════════════════════════════════════════════════════ │
│  📄 Latest Note: "Sprint Planning Session"             │
│                                                         │
│  🗓️ Date: 2024-01-15                                   │
│  🏷️ Tags: #planning #sprint #team                       │
│                                                         │
│  📝 Content:                                            │
│  • Discussed upcoming features                         │
│  • Assigned tasks to team members                      │
│  • Set sprint goals and deadlines                      │
│  • Reviewed previous sprint performance                │
└─────────────────────────────────────────────────────────┘

Replace with actual notes screenshot

🛠️ Installation & Setup

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v14.0 or higher)
npm or yarn package manager
MongoDB Atlas account (or local MongoDB installation)
Git for version control

🚀 Quick Start Guide

1️⃣ Clone the Repositories

# Clone the frontend repository
git clone https://github.com/astel-code/thriveon_frontend.git
cd thriveon_frontend

# Clone the backend repository  
git clone https://github.com/astel-code/thriveon_backend.git
cd thriveon_backend

2️⃣ Frontend Setup

# Navigate to frontend directory
cd thriveon_frontend

# Install dependencies
npm install

# Create environment variables file
cp .env.example .env

# Add your configuration to .env
REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_ENV=development

# Start the development server
npm start

The frontend will be available at http://localhost:3000

3️⃣ Backend Setup

# Navigate to backend directory
cd thriveon_backend

# Install dependencies
npm install

# Create environment variables file
cp .env.example .env

Configure your .env file:

PORT=5000
NODE_ENV=development

# MongoDB Configuration
MONGO_URI=mongodb+srv://username:[email protected]/thriveon

# JWT Configuration  
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRE=30d

# CORS Configuration
CLIENT_URL=http://localhost:3000

4️⃣ MongoDB Atlas Setup

Create a MongoDB Atlas account at mongodb.com/cloud/atlas
Create a new cluster and database named thriveon
Create a database user with read/write permissions
Whitelist your IP address in Network Access
Copy the connection string and update MONGO_URI in your .env file

5️⃣ Start the Backend Server

# Start the development server
npm run dev

# Or start production server
npm start

The backend API will be available at http://localhost:5000

6️⃣ Verify Installation

Open your browser and navigate to:

Frontend: http://localhost:3000
Backend Health Check: http://localhost:5000/api/health

🎉 Congratulations! Thriveon is now running locally on your machine.

🤝 Contributing

We love contributions from the community! Whether it's a bug fix, new feature, or documentation improvement, your help is appreciated.

🌟 How to Contribute

🍴 Fork the repository on GitHub

🌿 Create a feature branch from main:

git checkout -b feature/amazing-new-feature

💻 Make your changes with clear, commented code
✅ Test your changes thoroughly

📝 Commit with descriptive messages:

git commit -m "feat: add amazing new feature for task prioritization"

🚀 Push to your fork and create a Pull Request

📋 Contribution Guidelines

Follow the existing code style and conventions
Write clear commit messages using Conventional Commits
Add tests for new features when applicable
Update documentation for any new functionality
Ensure all existing tests pass before submitting

🐛 Reporting Issues

Found a bug? Have a feature request? Please open an issue with:

Clear description of the problem or feature
Steps to reproduce (for bugs)
Expected vs actual behavior
Screenshots if applicable
Environment details (OS, browser, Node.js version)

📄 License

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

MIT License

Copyright (c) 2024 Thriveon Task Management System

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🚀 Ready to boost your productivity?

⭐ Star this repository • 🍴 Fork and contribute • 🐛 Report issues

Built with ❤️ by the Thriveon Team | Made for productivity enthusiasts worldwide 🌍

astel-code/Thriveon

README