Skip to content

README.md

Latest commit

 

History

History
125 lines (101 loc) · 5.82 KB

README.md

File metadata and controls

125 lines (101 loc) · 5.82 KB
Raw

📌 StudyFlow — AI-Powered Productivity Platform

📖 Overview

StudyFlow is an all-in-one productivity platform designed specifically to help students manage their academic life smarter, stay focused, and study more effectively. By combining productivity tools, AI assistance, and collaborative learning into a single modern platform, StudyFlow eliminates the chaos of juggling multiple apps for assignments, exams, notes, and deadlines. It helps students study smarter, stay organized, and remain consistent without feeling overwhelmed.

💻 Technologies

Frontend:

  • React.js (Hooks, Context, Router)
  • CSS Frameworks & UI Libraries: Bootstrap, React-Bootstrap, Material-UI (MUI), MDB React UI Kit
  • Styling: CSS3, Styled-components, Emotion
  • Drag & Drop & Flows: React-Beautiful-DnD, ReactFlow
  • Icons & Animations: FontAwesome, Lucide-React, Lottie-React, React-Confetti, AOS
  • Date & Time: Moment.js, Day.js, React-Big-Calendar
  • Markdown: React-Markdown, Remark-gfm, React-Syntax-Highlighter

Backend:

  • Node.js & Express.js
  • Database: MongoDB with Mongoose
  • Authentication: JSON Web Tokens (JWT) & bcrypt.js
  • Scheduling & Emails: Node-cron, Nodemailer, Resend
  • AI Integration: Groq SDK, OpenRouter API (DeepSeek Models), Sarvamai

Tools & Deployment:

  • Git & GitHub
  • Postman
  • Vercel (Frontend Deployment)
  • Render (Backend Deployment)
  • Figma (UI/UX Prototyping)

🚀 Features

  • 🤖 AI Assistant: An intelligent chatbot integrated directly into the platform providing instant doubt solving, AI-powered explanations, and Markdown-formatted responses.
  • ⏳ Pomodoro Focus Mode: Built-in focus timer with custom study sessions, break reminders, and focus tracking.
  • ✅ Task Management: A modern task manager to organize study goals with priority workflow, drag-and-drop, and status tracking.
  • 📅 Event Scheduler: Smart scheduling system with email reminders and upcoming task notifications.
  • 📚 Interactive Flashcards: For active recall learning and revision.
  • 🗺️ Mind Maps: Visual learning system using ReactFlow to connect ideas and simplify concepts.
  • 📝 Notes System: A centralized place for study material with Markdown support.
  • 🎨 Modern UI/UX: Dark-mode aesthetics, smooth animations, responsive layouts, and minimal distractions.

🛠️ The Process (How I Built It)

  1. Ideation & UI/UX Design: Identified the problem of students switching between too many apps. Used Figma to design a sleek, dark-mode, and distraction-free UI.
  2. Frontend Foundation: Scaffolded the React application and implemented core styling using Bootstrap and custom CSS for the modern aesthetic.
  3. Backend & Database: Set up the Node.js/Express server and connected it to MongoDB. Created models for Users, Tasks, Events, and Notes.
  4. Authentication: Implemented secure user authentication using bcrypt for password hashing and JWT for session management.
  5. Feature Integration:
    • Integrated react-big-calendar for the Event Scheduler.
    • Built the Pomodoro timer from scratch.
    • Used react-beautiful-dnd for the Task Management board.
    • Implemented Mind Maps using reactflow.
  6. AI Implementation: Connected the backend to Groq API and OpenRouter to power the AI study assistant, handling context and Markdown responses.
  7. Refinement & Polish: Added animations (AOS, Lottie), toast notifications, and ensured responsive design across devices.

🧠 What I Learned

  • State Management: Handling complex states across different productivity modules (tasks, timers, calendar).
  • AI Integration: Crafting effective prompts and managing AI API responses (handling streams, Markdown formatting) effectively in a full-stack environment.
  • UI/UX Principles: How subtle animations, typography, and dark mode contribute to a better, less distracting user experience for students.
  • Third-Party Libraries: Deepened my understanding of integrating complex libraries like ReactFlow and React-Beautiful-DnD seamlessly.
  • Cron Jobs & Emailing: Automating tasks like sending reminders using node-cron and email services.

🔮 How It Could Be Improved

  • Responsive Design: Optimize the layout further for mobile devices (Mobile App version in React Native is a future goal).
  • Forgot Password Feature: Implement a secure password reset flow using email verification links.
  • Real-time Collaboration: Allow students to share notes and tasks using WebSockets (Socket.io).
  • AI-Generated Content: Automatically generate quizzes and flashcards from personal notes.
  • Study Analytics: A dashboard visualizing study habits, focus hours, and task completion streaks.

⚙️ Running the Project (Local Development)

If you'd like to fork and run this project locally, follow these steps:

Prerequisites

  • Node.js installed
  • MongoDB installed or a MongoDB Atlas URI

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/studyflow.git
cd studyflow

  2. Backend Setup:

    cd server
npm install

    Create a .env file in the server directory and add your variables:

    PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
GROQ_API_KEY=your_groq_api_key
# Add other required API keys (Resend, OpenRouter, etc.)

    Start the backend server:

    npm run dev

  3. Frontend Setup:

    cd ../client
npm install

    Create a .env file in the client directory (if needed):

    REACT_APP_API_URL=http://localhost:5000/api

    Start the frontend React app:

    npm start

  4. Open your browser and navigate to http://localhost:3000.

🌐 Preview

Check out the live project here: StudyFlow Live