Git Product home page Git Product logo

bharatbhusal / netflix-clone Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 50 KB

This project is a front-end clone of the popular streaming service Netflix, built using React. It features a responsive user interface with various sections showcasing different categories of movies and a banner section highlighting a random movie from Netflix Originals.

HTML 2.25% CSS 33.29% JavaScript 64.46%

netflix-clone's Introduction

Netflix Clone React App

Welcome to the Netflix Clone React App! This project is a front-end clone of the popular streaming service Netflix, built using React. It features a responsive user interface with various sections showcasing different categories of movies and a banner section highlighting a random movie from Netflix Originals.

Table of Contents

Features

  • Fetches movie data from The Movie Database (TMDb) API.
  • Displays Netflix Originals, Trending Now, Action, Comedy, Horror, Romance, and Documentaries categories.
  • Banner section with a randomly selected movie from Netflix Originals.
  • Responsive navigation bar with Netflix logo and user avatar.
  • Hover effects on movie posters and buttons.

Getting Started

Follow these steps to get started with the Netflix Clone React App:

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repository to your local machine.

    git clone https://github.com/bharatbhusal/netflix-clone.git
  2. Navigate to the project directory.

    cd netflix-clone
  3. Install the project dependencies.

    npm install

Project Structure

The project structure is organized as follows:

  • src/: Contains the source code of the React app.
    • App.js: The main React component that renders the Netflix Clone app.
    • index.js: Entry point for rendering the React app.
    • App.css: Stylesheet for styling the components.
    • images/: Directory containing image assets used in the project.
    • utils/: Utility functions, including validateEnv for handling environment variables.

How to Run

  1. After installing the dependencies, start the development server.

    npm start
  2. Open your browser and navigate to http://localhost:3000.

  3. Explore the Netflix Clone React App and enjoy the movie categories and banner section!

Customization

Feel free to customize the project to suit your preferences. You can update the API key, base URL, and other environment variables in the validateEnv utility. Additionally, you can modify the styles in the App.css file to change the look and feel of the app.

Contributing

Contributions are welcome! If you find any issues or have improvements to suggest, please open an issue or submit a pull request.

netflix-clone's People

Contributors

bharatbhusal avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.