Study-Sync AI - Frontend

A modern, high-performance JSF-based frontend for the Study-Sync AI learning platform, featuring a premium dark-themed UI.

🚀 Quick Start

Prerequisites

• Java 11+
• Maven 3.6+

Run Development Server

1. Open a terminal in the project root.
2. Run the Jetty server:

   mvn clean jetty:run

3. Once started, open your browser to: 👉 http://localhost:8080/pages/login.xhtml

Login Info

• Username: admin (or any string)
• Password: password (or any string)
• Note: The application uses mock authentication for demonstration purposes.

---

🛠️ Technology Stack

• Framework: JavaServer Faces (JSF) 2.2 (Mojarra)
• Server: Eclipse Jetty 9 (Embedded via Maven)
• Container: Servlet 3.1
• Bean Management: Native JSF @ManagedBean (No CDI/Weld dependency for lightweight deployment)
• Styling: Custom CSS with Glassmorphism & Neon accents (No heavy CSS frameworks)

---

📂 Project Structure

src/main/
├── java/com/studysync/beans/
│   ├── UserSession.java      # Session scope state
│   ├── LoginBean.java        # Authentication logic
│   ├── DashboardBean.java    # Document management
│   ├── ChatBean.java         # AI chat & formatting
│   ├── FlashcardBean.java    # Flashcard generation logic
│   └── UploadBean.java       # File upload handling
│
└── webapp/
    ├── WEB-INF/
    │   ├── templates/
    │   │   ├── layout.xhtml  # Master page template
    │   │   ├── header.xhtml  # Navigation bar
    │   │   └── footer.xhtml  # Footer area
    │   ├── web.xml           # Servlet configuration
    │   └── faces-config.xml  # Navigation rules
    │
    ├── pages/
    │   ├── login.xhtml       # Authentication page
    │   ├── dashboard.xhtml   # Main user dashboard
    │   ├── chat.xhtml        # Interactive AI chat
    │   └── flashcards.xhtml  # Study flashcards
    │
    ├── components/
    │   ├── upload-component.xhtml
    │   └── flashcard.xhtml
    │
    └── resources/
        ├── css/
        │   ├── styles.css        # Core design system
        │   ├── chat.css          # Chat interface styles
        │   ├── flashcards.css    # 3D animations
        │   └── ui-components.css # Reusable UI components
        └── js/
            └── ui-utils.js       # Client-side interactions

---

🎯 Features

Feature	Description
Authentication	Secure-feeling login with validation and session management.
Smart Dashboard	Grid view of study documents with status badges and filtering.
Document Upload	Drag-and-drop interface with progress feedback.
AI Chat Assistant	Interactive chat with "Viva Mode" for oral exam simulation.
Interactive Flashcards	3D-animated study cards with difficulty rating system.

---

🎨 Design System ("Dark Luxury")

The application uses a custom design system inspired by modern "Data Glass" aesthetics:

• Colors: Deep midnight blues (#0a0a0f) with neon cyan (#00f5d4) and amber (#ffbe0b) accents.
• Typography: Clash Display for headers and General Sans for UI text.
• Effects: Heavy use of backdrop-filter blurring (glassmorphism), glows, and smooth transitions.
• Responsiveness: Fully responsive grid layouts using CSS Grid and Flexbox.

---

🔌 Integration & Testing

API Contracts

See docs/integration-contracts.md for backend API details.

Testing

To build the WAR file without running the server:

mvn clean package

---

📋 Browser Support

• Chrome / Edge (Recommended for best backdrop-filter support)
• Firefox (Latest)
• Safari