FlickFix

---

Quick Links

• Overview
• Features
• Screenshots
• Repository Structure
• Modules
• Getting Started
  • Installation
  • Running FlickFix
  • Tests
• Project Roadmap
• Contributing
• License
• Acknowledgments

---

📍 Overview

This Movie Streaming App, built with Next.js, provides a seamless platform for users to explore and enjoy movie trailers. It offers an immersive experience for movie enthusiasts to discover new releases, popular titles, and watch trailers on-demand.

---

📦 Features

	Feature	Description
⚙️	Architecture	The project is built using Next.JS. Next.JS also supports server-side-rendering built on React .
🔩	Code Quality	The codebase is well-structured and follows best practices. It utilizes TypeScript for type safety and has consistent coding style.
🎞📣🎞	Browse Movies	Explore a diverse collection of movies genres, top rated movies, latest realeases.
🎬	Search Functionality	Easily find specific movies using the search feature.
🎥	WishList	Save movies to a watchlist for future viewing.
💎	Responsive Design	Enjoy a consistent and engaging experience across various devices.
🔌	Integrations	The project integrates with external api's, and react libraries.
🧩	Modularity	The codebase appears to be modular and reusable, with components like MovieCard.tsx, CastCard.tsx, and SliderComponent.tsx providing clear separation of concerns.
⚡️	Performance	The projects follows best practices for better Search Engine Optimization. It achieves great core web-vitals scores throughout the project.
📦	Dependencies	The project has dependencies on libraries such as react-slick, tailwind, redux-toolkit.

---

📸 Screenshots

Home Page

Movie Page

Search Page

Subscription Page

Support Page

Repository Structure

└── StreamJet/
    ├── app
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── Movies
    │   │   └── page.tsx
    │   ├── not-found.tsx
    │   ├── page.tsx
    │   ├── search
    │   │   └── page.tsx
    │   ├── StoreProvider.tsx
    │   ├── subscription
    │   │   └── page.tsx
    │   ├── support
    │   │   ├── page.tsx
    │   │   └── QuestionCard.tsx
    │   └── watch
    │       ├── genre
    │       └── movie
    ├── components
    │   ├── Footer.tsx
    │   ├── Genre
    │   │   └── GenrePage.tsx
    │   ├── GenreCard.tsx
    │   ├── Homepage
    │   │   ├── Category.tsx
    │   │   ├── Devices.tsx
    │   │   ├── HomePage.tsx
    │   │   └── WatchNow.tsx
    │   ├── MovieComponents
    │   │   ├── CastCard.tsx
    │   │   ├── MovieCard.tsx
    │   │   └── MoviePage.tsx
    │   ├── Navbar
    │   │   └── Navbar.tsx
    │   ├── Slider
    │   │   ├── BannerSlider.tsx
    │   │   ├── SliderButtons.tsx
    │   │   └── SliderComponent.tsx
    │   └── utils.tsx
    ├── lib
    │   ├── hooks.ts
    │   └── store
    │       ├── movieSlice.tsx
    │       ├── service.tsx
    │       └── store.tsx
    ├── next.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   ├── fonts
    │   │   ├── Horror.ttf
    │   │   └── Misto.ttf
    ├── tailwind.config.ts
    ├── tsconfig.json
    └── types
        └── index.ts

---

Modules

.

File	Summary
.gitignore	Manages the files and directories to be ignored by Git version control.
next.config.js	Configuration file for Next.js, likely containing settings for your Next.js application.
package-lock.json	Auto-generated file specifying the exact version of each installed npm package.
package.json	Manifest file for Node.js projects, containing project metadata and dependencies.
tailwind.config.ts	Configuration file for Tailwind CSS, a utility-first CSS framework.

app

File	Summary
layout.tsx	Layout component that provides a consistent structure for pages.
not-found.tsx	Component or page for handling 404 errors.
page.tsx	Root page for the application
StoreProvider.tsx	Component responsible for providing application state using Redux.

app.Movies

File	Summary
page.tsx	This page shows the main movie page with trending, latest, top rated and genres section.

app.search

File	Summary
page.tsx	This components shows the results for the search query.

app.subscription

File	Summary
page.tsx	This page shows the details related to the subscription

app.support

File	Summary
page.tsx	This renders the support page for the web application
QuestionCard.tsx	Faq Card Component

app.watch.genre.[slug]

File	Summary
page.tsx	This page contains the code for the genres page which will show all the movies with respective genre.

app.watch.movie.[slug]

File	Summary
page.tsx	This is movie page for a specific movie with the details of the movie like cast, crew, director etc

components

File	Summary
Footer.tsx	Component for the application footer.
GenreCard.tsx	Component for displaying information about a genre in other components.
utils.tsx	Utility functions for components.

components.Genre

File	Summary
GenrePage.tsx	Component for displaying detailed information about a genre.

components.Homepage

File	Summary
Category.tsx	Component for displaying content genres on the homepage.
Devices.tsx	Component for displaying supported devices.
HomePage.tsx	Component for the main homepage.
WatchNow.tsx	Component for prompting users to watch content.

components.MovieComponents

File	Summary
CastCard.tsx	Component for displaying information about the cast.
MovieCard.tsx	Component for displaying information about a movie.
MoviePage.tsx	Component for displaying detailed information about a movie.

components.Navbar

File	Summary
Navbar.tsx	Component for the application navbar.

components.Slider

File	Summary
BannerSlider.tsx	Component for displaying a banner slider.
SliderButtons.tsx	Component for navigation buttons in a slider.
SliderComponent.tsx	Generic component for displaying a slider.

---

Getting Started

Requirements

Ensure you have the following dependencies installed on your system:

• TypeScript: npm install -g typescript
• Node.js: npm install -g node

Installation

1. Clone the StreamJet repository:

git clone https://github.com/sachin492002/StreamJet

2. Change to the project directory:

cd FlickFix

3. Install the dependencies:

npm install

Running FlickFix

Use the following command to run FlickFix:

npm run dev

Tests

To execute tests, run:

npm test

---

Contributing

Contributions are welcome! Here are several ways you can contribute:

• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.
• Report Issues: Submit bugs found or log feature requests for Streamjet.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your GitHub account.
2. Clone Locally: Clone the forked repository to your local machine using a Git client.

   git clone https://github.com/sachin492002/StreamJet

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to GitHub: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.

Once your PR is reviewed and approved, it will be merged into the main branch.

---

License

This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.

---

Acknowledgments

• List any resources, contributors, inspiration, etc. here.

Return

---