🎌 AnimeWatch

AnimeWatch is a modern React-based web application that allows users to discover, review, and manage their favorite anime. The platform provides a seamless browsing experience with authentication, detailed anime pages, ratings, and review functionality powered by Firebase.

🔗 Live Demo: https://animationreview.netlify.app/
📂 Repository: https://github.com/hds05/aniwatch.git

---

✨ Features

🔐 Authentication

• User registration and login
• Secure authentication using Firebase

🎥 Anime Discovery

• Browse a collection of anime
• Clean and responsive card-based UI
• View detailed information for each anime

⭐ Reviews & Ratings

• Submit reviews for anime
• Interactive star rating system
• Share opinions with other users

➕ Anime Management

• Add new anime entries to the platform
• Store anime data using Firebase

📱 Responsive Design

• Optimized for desktop, tablet, and mobile devices
• Modern UI built with Material UI and Bootstrap

---

🛠️ Tech Stack

Frontend

• React.js
• React Router DOM v6

UI & Styling

• Material UI (MUI)
• React Bootstrap
• Custom CSS

Backend & Database

• Firebase Authentication
• Firebase Firestore / Realtime Database

Additional Libraries

• SweetAlert2
• React Stars
• React OTP Input
• React Phone Input 2
• React Loader Spinner

---

📂 Project Structure

src/
├── Addanime.jsx          # Add new anime
├── Addanime.css
├── App.js                # Main application and routes
├── App.css
├── Cards.jsx             # Anime card component
├── Detail.jsx            # Anime details page
├── Detail.css
├── Headr.jsx             # Navigation/Header component
├── Headr.css
├── Layout.jsx            # Common layout wrapper
├── Login.jsx             # Login page
├── Login.css
├── Review.jsx            # Review component
├── Signup.jsx            # Signup page
├── Signup.css
└── firebase/             # Firebase configuration

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v16 or later recommended)
• npm

Check your installation:

node -v
npm -v

---

Installation

1. Clone the repository

git clone https://github.com/hds05/aniwatch.git
cd aniwatch

2. Install dependencies

npm install

3. Configure Firebase

Create your Firebase project and add your configuration inside the Firebase setup file.

Example:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};

4. Start the development server

npm start

The application will be available at:

http://localhost:3000

---

📜 Available Scripts

Command	Description
npm start	Runs the app in development mode
npm test	Launches the test runner
npm run build	Creates a production build
npm run eject	Ejects CRA configuration (irreversible)

---

---

🔮 Future Enhancements

• Search anime by title
• Advanced filtering and sorting
• User profile dashboard
• Watchlist and favorites
• Anime trailers and recommendations
• Light/Dark mode support
• Pagination
• Social sharing features
• Edit functionality

---

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create a feature branch

git checkout -b feature/new-feature

3. Commit your changes

git commit -m "Add new feature"

4. Push to GitHub

git push origin feature/new-feature

5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Developed by Himanshu...😁

GitHub: https://github.com/hds05