Study Beast - Online Learning Platform

A comprehensive online learning platform with secure user authentication and session management.

Features

🔐 Secure Authentication

  • User login with predefined credentials
  • 48-hour session duration
  • Automatic session expiry with visual countdown

⏱️ Session Timer

  • 48-hour login duration: Users remain logged in for exactly 48 hours
  • Visual countdown: Real-time display of remaining session time
  • Progress bar: Thin colored strip below footer showing session progress
    • Green → Yellow → Red gradient indicating time remaining
  • Automatic logout: Session expires automatically after 48 hours
  • Persistent sessions: Login state persists across browser refreshes

📚 Course Management

  • Browse featured courses
  • Search functionality
  • Course details with pricing and instructor information
  • Direct enrollment links

🎨 User Interface

  • Responsive design with Tailwind CSS
  • Clean, modern interface
  • Mobile-friendly layout
  • Fixed timer strip at bottom of screen

Technical Implementation

Session Management

  • Login timestamp stored in localStorage
  • Real-time countdown using React hooks
  • Automatic cleanup on session expiry
  • Cross-tab session synchronization

Timer Component

  • Updates every second
  • Shows time in hours, minutes, seconds format
  • Color-coded progress bar (green to red gradient)
  • Fixed position below footer
  • Minimal height (thin strip design)

Security Features

  • No sensitive data in localStorage
  • Automatic session cleanup
  • User notification on session expiry

Usage

  1. Login: Use provided credentials to access the platform
  2. Browse: Explore available courses and use search functionality
  3. Monitor: Keep track of remaining session time via the bottom timer
  4. Logout: Manual logout or automatic after 48 hours

Timer Display

The session timer appears as a thin strip at the bottom of the screen with:

  • Dark background showing remaining time
  • Colored progress bar indicating session progress
  • Real-time updates every second
  • Automatic session termination when time expires

User Credentials

The platform includes predefined user accounts (vk, user002-user040) with secure passwords for demonstration purposes.