Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/codewithalamin/friends-tvseries-site

Built entirely from scratch using only JavaScript – no frameworks or libraries involved. Enjoy all 'Friends' episodes.
https://github.com/codewithalamin/friends-tvseries-site

codewithalamin friends-series friends-sitcom-page frontend frontend-app javascript movie-web-app movies-streaming vanilla-javascript

Last synced: 5 days ago
JSON representation

Built entirely from scratch using only JavaScript – no frameworks or libraries involved. Enjoy all 'Friends' episodes.

Awesome Lists containing this project

README 

        



# Friends TV Series Website









[🚀Live Website](https://friends-tv-series-alamin.netlify.app)









Status



License









![Screenshot](./screenshots/friends-tv-series-preview-CodeWithAlamin.jpg)






Welcome to the Friends TV Series website! This project emerged from a simple desire: to create an ad-free platform for enjoying every episode of the iconic show "Friends." Fed up with ads and pop-ups on other streaming sites, I crafted a clean, user-friendly space for me and fellow fans to enjoy the series uninterrupted.



## Table of Contents



- [Project Overview](#project-overview)

- [Features](#features)

  - [Dynamic Content Loading](#dynamic-content-loading)

  - [Custom Routing Mechanism](#custom-routing-mechanism)

  - [Dark Mode](#dark-mode)

- [Technical Details](#technical-details)

  - [Implementation Challenges](#implementation-challenges)

  - [No Frameworks or Libraries](#no-frameworks-or-libraries)

- [How It Started](#how-it-started)

- [Contributing](#contributing)

- [Contact](#contact)



## Project Overview



This project is a single-page website that provides a user-friendly and ad-free platform to watch episodes of the "Friends" TV series. The idea behind this project was born out of frustration with other streaming sites that bombard users with ads and pop-ups, disrupting the viewing experience. The website aims to provide a clean and enjoyable way to watch the series, while also serving as a practical way to enhance JavaScript skills.



## Features



### Dynamic Content Loading



The website features dynamic content loading, allowing users to navigate through different seasons and episodes seamlessly. Each episode is presented as a card with a thumbnail, title, and release date. Clicking on an episode card updates the content on the page without requiring a full page reload.



### Custom Routing Mechanism



One of the significant challenges in building this website was implementing a custom routing mechanism for a single-page application without using any frameworks or libraries. The routing system allows users to navigate between different sections of the website while maintaining a smooth and fluid user experience.



### Dark Mode



Dark mode enhances the user experience by providing an alternative color scheme that is easier on the eyes, especially in low-light conditions. Users can toggle between light and dark mode, and their preference is remembered using local storage.



## How It Started



This project began when I started watching episodes of the "Friends" TV series online and became frustrated with the abundance of ads and pop-ups on various streaming platforms. Inspired by the desire to create a better viewing experience and hone my web development skills, I embarked on building this website from scratch.



## Technical Details



### Implementation Challenges



One of the most challenging aspects of this project was developing a custom routing mechanism. Without utilizing frameworks or libraries, I needed to meticulously handle the application's state, ensuring accurate content display as users moved across sections. I utilized JSON files to manage season and episode data. Additionally, a separate JSON file stored the video URLs, allowing flexibility for future updates.



### No Frameworks or Libraries



To further enhance my JavaScript skills, I chose to build the entire website without relying on any frameworks or libraries. This decision allowed me to gain a deep understanding of how various components work together, from event handling to dynamic content loading.



### Video source



Video links were sourced from a 3rd party public google drive shared by a user named: (hajxh1) and the drive link is https://drive.google.com/drive/folders/1JqyfZKdkhmgymOVxZbfePG6XqQGUGoZF



It is not a commercial project and the videos are not hosted on this site. The videos are streamed from the google drive directly.



## Contributing



This project was primarily developed as a personal learning experience. However, if you'd like to contribute, feel free to fork the repository, make improvements, and submit a pull request.



## Contact



Feel free to contact me with any questions or feedback!



👤 Alamin



- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)

- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)

- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)

- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)



## License



This project is licensed under the [MIT](https://github.com/CodeWithAlamin/Friends-TvSeries-Site/blob/main/LICENSE.md) License - see the LICENSE file for details.