Skip to content

adilrza0/Flixwave

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flixwave

Flixwave is a responsive React app that allows users to discover and explore details about their favorite movies. It uses the TMDb API to fetch and display movie information, offering an intuitive and visually appealing user interface.


Features

  • Search Functionality: Find movies by title quickly and easily.
  • Movie Details: View detailed information such as ratings, overviews, genres, release dates, and more.
  • Responsive Design: Fully optimized for devices of all sizes, including mobile, tablet, and desktop.
  • Popular and Trending Movies: Stay updated with the latest trends and popular titles.

Tech Stack

  • Frontend: React, React Router, CSS (Tailwind CSS or Styled Components for styling)
  • API: TMDb API
  • Deployment: Vercel/Netlify (or your chosen platform)

Installation

Prerequisites

  • Node.js installed on your system.
  • An API key from TMDb.

Steps

  1. Clone the Repository
    git clone https://github.com/yourusername/flixwave.git  
    cd flixwave
  2. Install Dependencies
    npm install
  3. Set Up API Key
    • Sign up for a free account at TMDb and get an API key.
    • Create a .env file in the root of the project and add:
      REACT_APP_TMDB_API_KEY=your_api_key
      
  4. Run the Development Server
    npm start

The app will be available at http://localhost:3000/.


Scripts

  • npm start: Runs the app in development mode.
  • npm run build: Builds the app for production.
  • npm test: Launches the test runner.

Folder Structure

flixwave/  
├── public/        # Static assets  
├── src/  
│   ├── components/ # Reusable components  
│   ├── pages/      # Page components (e.g., Home, MovieDetails)  
│   ├── services/   # API calls  
│   ├── styles/     # CSS or styling utilities  
│   ├── App.js      # Main app component  
│   └── index.js    # Entry point  
├── .env           # API key configuration  
├── package.json   # Dependencies and scripts  
└── README.md      # Project documentation