Sagar Institute of Science Technology & Research
Ratibad, Bhopal
Session April 2025 – June 2025
Department of Computer Science
Project Report
On
MOVIESBOT
( A Website for downloading movies and web series )
Submitted By: Submitted To:
Gulshan Tiwari Khushboo Bhardwaj
Roll no : 0537CS231037
Table of Contents
1. Abstract
2. Software Requirement
Specification (SRS)
2.1 Introduction
2.2 Overall Description
2.3 Specific requirements
2.4 Technologies Used
3. Screenshots
4.Future scope
1. Abstract
This project is a web-based clone of the MOVIES_BOT streaming interface,
developed using HTML, CSS, and JavaScript, with added support for user
login, sign-up, and password reset functionalities. The goal of this project is
to simulate the frontend behaviour of an OTT platform like Hulu, focusing
on UI design, responsive layout, and basic user flow without requiring
backend services.
The interface consists of:
A modern homepage showcasing movie posters under “Trending” and
“Top Picks” sections, which redirect to an external streaming site (e.g.,
vegamovies.frl )on click.
A login page where users can enter credentials and simulate a secure
login.
A sign-up page for new user registration with password confirmation
checks.
A forgot password page that mimics sending a reset link to the entered
email.
The UI is fully responsive, lightweight, and designed using custom CSS
without frameworks, ensuring maximum learning of core web technologies.
JavaScript is used to dynamically load movie content, validate form inputs,
handle redirection, and simulate authentication logic.
This project offers a foundational understanding of:
Website layout and component structure
DOM manipulation
Form validation and event handling
Multi-page navigation
UI/UX design principles for media platforms
Though it doesn’t use backend services or databases, the design is extendable
for integration with Firebase Auth, REST APIs, or streaming servers.
🔍 Keywords:
HTML, CSS, JavaScript, OTT, UI/UX, Login System, Responsive Web Design, Frontend
Project
2.Software Requirements Specification (SRS)
1. Introduction
1.1 Purpose
The purpose of this Software Requirements Specification (SRS) is to define the
functional and non-functional requirements for the development of a Hulu
Clone Web Application. The application is a frontend simulation of a video
streaming service that allows users to view a list of movie thumbnails and
access external streaming links. It includes essential authentication features like
login, sign-up, and forgot password functionality.
1.2 Scope
This project is a browser-based application designed using HTML, CSS, and
JavaScript. It simulates the user interface of an OTT platform and allows users
to:
Register and log in to the system
Reset their password if forgotten
View trending and recommended movie posters
Click on a poster to redirect to an external website (e.g.,
https://vegamovies.frl)
1.3 Definitions, Acronyms, and Abbreviations
Term Definition
UI User Interface
UX User Experience
HTML Hyper Text Markup Language
CSS Cascading Style Sheets
JS JavaScript
OTT Over-the-Top (streaming platform)
SRS Software Requirements Specification
1.4 References
HTML5 and CSS3 documentation (MDN Web Docs)
JavaScript DOM documentation (W3Schools, MDN)
https://vegamovies.frl (for streaming redirection)
2. Overall Description
2.1 Product Perspective
This project is a standalone frontend prototype of a streaming platform and does
not connect to any backend or real database. It is intended for educational and
demonstration purposes.
2.2 Product Functions
Display trending and top-picked movie posters dynamically.
Allow users to sign up, log in, and reset passwords.
Redirect users to an external streaming site on poster click.
2.3 User Classes and Characteristics
User Type Description
Can view movie posters without
Guest User
logging in
Can log in, sign up, and access
Registered User
features
2.4 Operating Environment
Browser: Chrome, Firefox, Safari, Edge
Platform: Windows, macOS, Linux
No server or database required (frontend only)
2.5 Design and Implementation Constraints
No backend logic or database connectivity.
All authentication actions are simulated.
3. Specific Requirements
3.1 Functional Requirements
3.1.1 User Authentication
Login: Users must enter email and password to access the homepage.
Sign-Up: New users can register by entering email and matching
passwords.
Forgot Password: Users can simulate password recovery via email.
3.1.2 Movie Browsing
Home page loads movie posters dynamically.
Clicking on a poster redirects to https://vegamovies.frl in a
new tab.
3.1.3 Navigation
Navbar includes links to Home, TV Shows, Movies, and My Stuff
(static).
Footer and sections are scrollable and responsive.
3.2 Non-Functional Requirements
Requirement Description
Performance Page load should be under 3 seconds
Usability Simple and intuitive UI for beginners
Security No real data stored, but form validations are included
Availability Runs locally in any browser
Portability Fully responsive and cross-browser compatible
6. Appendix
Sample Test Login:
Email: user@hulu.com
Password: password12
Screenshots
1. Login Page:-
2.Sign up page :-
3.web page:-
4.Web Page :-
🚀 Future Scope
Although the current version of the Website is a static, frontend-only prototype,
it has strong potential for further development and real-world application. The
following points outline the possible future scope and enhancements:
🔐 1. Backend Integration
Use technologies like Node.js, Express, or Firebase to implement:
o Real user authentication (sign-up/login/logout)
o Secure password management (hashing, reset via email)
🧠 2. User Data and Profiles
Create user profiles to store personal preferences, watch history, and
favourites.
Add support for multiple user accounts per profile (e.g., like Netflix
"Kids" and "Main").
🔎 3. Search and Filter Features
Enable movie filtering based on genre, year, language, popularity, etc.
Implement a search bar with auto-suggestions and real-time search
results.
🎥 4. Media Player Integration
Embed a custom or third-party video player for real in-browser
movie/series playback.
Include subtitles, playback controls, and adaptive streaming (HLS)
🧠 5. AI-Based Recommendations
Use collaborative filtering or content-based filtering to recommend
movies based on:
o Viewing history
o Ratings and preferences
📱 6. Mobile App Version
Convert the project into a Progressive Web App (PWA) or use React
Native to build Android/iOS versions of the platform.
