Skip to content

Latest commit

 

History

History
141 lines (112 loc) · 4.06 KB

README.md

File metadata and controls

141 lines (112 loc) · 4.06 KB
Raw

AniSensei

AniSensei is a feature-rich React application designed to provide users with the latest movie recommendations and suggestions, leveraging the power of the TMDB API. The application offers a seamless and engaging user experience, enhanced with Tailwind CSS, and supports multi-language features.

Features

Authentication

  • Login/Sign Up: Secure authentication system for user account management.
  • Sign In / Sign Up Forms: Easy-to-use forms with validation.
  • Redirect to Browse Page: Users are redirected to the browse page upon successful authentication.

Main Functionality

  • Browse (after authentication): Explore a wide range of movies.
  • Header: Intuitive navigation with a visually appealing header.
  • Main Movie: Display of the main highlighted movie with background trailer.
  • Trailer in Background: Embedded YouTube video for movie trailers with autoplay and mute functionality.
  • Title & Description: Detailed information about the main movie.
  • Movie or TvShow Suggestions: Personalized movie suggestions based on user preferences.
  • Movie/TvShow Lists: Multiple movie lists to explore different categories.
  • AniSensei Search Bar: Powerful search functionality for discovering new movies or TvShow , just write what is on your mind.
  • Movie Suggestions: Tailored movie suggestions based on search results.

Setup and Installation

Prerequisites

  • Node.js
  • npm or yarn
  • Firebase Account
  • TMDB API Key
  • Gemini API Key

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/anisensei.git
cd anisensei

  2. Install dependencies:

    npm install
# or
yarn install

  3. Set up environment variables: Create a .env file in the root directory and add your API keys and other necessary configuration:

    REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_TMDB_API_KEY=your_tmdb_api_key
REACT_APP_GEMINI_API_KEY=your_gemini_api_key
REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_firebase_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id

  4. Start the development server:

    npm start
# or
yarn start

Deployment

Deploy the application to your preferred hosting service. For Firebase Hosting, follow these steps:

  1. Install Firebase CLI:

    npm install -g firebase-tools

  2. Login to Firebase:

    firebase login

  3. Initialize Firebase in your project:

    firebase init

  4. Deploy the application:

    firebase deploy

Project Structure

anisensei/
├── public/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── assets/
│   ├── utils/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .env
├── .gitignore
├── package.json
└── tailwind.config.js

Key Implementations

Hooks

  • useRef Hook: For accessing DOM elements directly.
  • Custom Hooks: usePopularMovies, useNowPlayingMovies,useAniSensei

State Management

  • Redux Store: Configured with userSlice, movieSlice, anisenseiSlice.
  • Memoization: To optimize performance (used redux-store) .

API Integration

  • TMDB API: For fetching movie data.
  • Gemini API: For advanced search and recommendation functionality based on user data.

Styling

  • Tailwind CSS: For responsive and modern UI design.

Contributing

We welcome contributions! Please follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature).
  3. Make your changes and commit them (git commit -am 'Add new feature').
  4. Push to the branch (git push origin feature/your-feature).
  5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.