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.