ScyDB Website

A modern, minimalist movie database platform designed for true cinema enthusiasts. ScyDB combines sleek design with powerful functionality to create the ultimate movie discovery and management experience.

🎬 Overview

ScyDB is a comprehensive movie database website that allows users to discover, review, and manage their favorite films. Built with a focus on user experience and modern web standards, it features a clean aesthetic with robust functionality for both casual users and administrators.

✨ Key Features

🎯 Core Functionality

• Movie Discovery: Browse an extensive collection of movies with advanced search and filtering
• User Reviews & Ratings: Write detailed reviews and rate movies with a 10-star system
• Personal Watchlists: Save movies to watch later and organize your viewing preferences
• Advanced Search: Filter by genre, year, director, cast, rating, and duration
• Responsive Design: Optimized for desktop, tablet, and mobile devices

🎨 User Experience

• Dark/Light Mode: Seamless theme switching with user preference persistence
• Smooth Animations: AOS (Animate On Scroll) integration for engaging interactions
• Modern UI: Clean, minimalist design with cinematic aesthetics
• Fast Loading: Optimized performance with lazy loading and efficient API calls

👥 User Management

• User Authentication: Secure login/signup system with password strength validation
• Profile Management: Customizable user profiles with avatar support
• Role-Based Access: Different permission levels (Member, Admin)
• Account Security: Password change functionality with validation

🛠️ Administrative Features

• Admin Dashboard: Comprehensive control panel with analytics and charts
• Content Management: Add, edit, and delete movies, genres, and user roles
• User Management: Monitor user activity and manage account permissions
• System Analytics: Visual charts showing user roles, genre distribution, and activity metrics

🏗️ Technical Architecture

Frontend Technologies

• HTML5: Semantic markup with modern web standards
• CSS3 & Tailwind CSS: Utility-first CSS framework for rapid styling
• DaisyUI: Component library built on Tailwind CSS
• JavaScript (ES6+): Modern JavaScript with async/await patterns
• Font Awesome: Comprehensive icon library
• Chart.js: Interactive charts for admin dashboard

Responsive Design

• Mobile-First: Designed for mobile devices and scaled up
• Grid & Flexbox: Modern CSS layout techniques
• Breakpoint System: Tailored experiences across all device sizes

Performance Optimizations

• Lazy Loading: Images and content loaded on demand
• Modular JavaScript: Organized code structure with separate concerns
• CSS Optimization: Minified stylesheets and efficient selectors
• API Caching: Smart caching strategies for better performance

🔗 Related Repositories

• scydb-api – The Express.js backend powering ScyDB

📂 Project Structure

├── pages/
│   ├── auth/
│   │   ├── login.html           # User login page
│   │   ├── signup.html          # User registration page
|   |   ├── verify-email.html    # Email verification page
|   |   ├── verify-link.html     # Link Verification page
|   |   ├── email-verified.html  # Verification success page
|   |   ├── forgot-password.html # Forgot your password page
|   |   └── reset-password.html  # Change user password page
│   ├── movies/
│   │   ├── index.html           # Movie browsing with filters
│   │   ├── details.html         # Individual movie details
│   │   ├── create.html          # Add new movie (admin)
│   │   └── edit.html            # Edit movie (admin)
│   ├── users/
│   │   ├── profile.html         # User profile management
│   │   ├── watchlist.html       # Personal watchlist
│   │   └── dashboard.html       # Admin dashboard
│   ├── about.html               # About ScyDB
│   ├── contact.html             # Contact form
│   ├── privacy.html             # Privacy policy
│   ├── tos.html                 # Terms of service
│   └── index.html               # Homepage
├── assets/
│   ├── css/
│   │   ├── dist.css             # Main stylesheet
│   │   ├── dash.css             # Dashboard-specific styles
|   |   ├── reset-pass.css       # Additional component styles
|   |   ├── forgot-pass.css      # Additional component styles
│   │   └── style.css            # Additional component styles
│   ├── js/
│   │   ├── auth.js              # Authentication logic
│   │   ├── movies.js            # Movie-related functionality
│   │   ├── admin.js             # Admin panel features
│   │   ├── users.js             # User management
|   |   ├── reset-pass.js        # Reset password functionality
|   |   ├── forgot-pass.js       # Page specific functionality
|   |   ├── watchlist.js         # Movie watchlist management
│   │   ├── dashboard.js         # Dashboard charts & analytics
│   │   ├── navbar.js            # Navigation functionality
│   │   ├── main.js              # Core utilities
│   │   └── footer.js            # Footer interactions
│   └── images/
│       └── favicon.ico          # Site favicon
└── 404.html                     # Custom 404 error page

🎨 Design Philosophy

Visual Identity

• Color Palette: Warm, cinematic colors with #F76F53 as the primary accent
• Typography: Modern, readable fonts with appropriate hierarchy
• Spacing: Generous whitespace for clean, uncluttered layouts
• Contrast: High contrast ratios for accessibility compliance

User Interface Principles

• Consistency: Uniform design patterns across all pages
• Intuitive Navigation: Clear, logical information architecture
• Feedback: Visual feedback for all user interactions
• Accessibility: WCAG compliant with keyboard navigation support

🔒 Security Features

• Input Validation: Client-side and server-side validation
• Password Security: Strong password requirements with strength indicators
• Role-Based Access Control: Different permission levels for various user types
• Secure Authentication: JWT-based authentication system
• Data Protection: Privacy-focused data handling practices

📱 Responsive Breakpoints

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px - 1440px
• Large Desktop: 1440px+

🎯 Target Audience

• Movie Enthusiasts: Users passionate about cinema and film discovery
• Content Curators: Users who like to organize and rate their viewing experiences
• Community Members: Users who enjoy sharing reviews and recommendations
• Administrators: Content managers and system administrators

🤝 Contributing

While this is a showcase project, the codebase demonstrates best practices for:

• Modern frontend development
• Responsive web design
• User experience optimization
• Administrative dashboard implementation
• Security-conscious development

📄 License

This project serves as a portfolio demonstration of modern web development capabilities, showcasing proficiency in frontend technologies, user experience design, and full-stack web application architecture.

ScyDB - Crafted with passion for cinema 🎬*