https://github.com/shahalimshompod/movie-sphere-client
MovieSphere – A platform to explore, manage, and enjoy movie gossips with an intuitive interface and powerful features.
https://github.com/shahalimshompod/movie-sphere-client
css3 expressjs firebase-auth html javascript mongodb-atlas nodejs reactjs rest-api tailwindcss
Last synced: about 2 months ago
JSON representation
MovieSphere – A platform to explore, manage, and enjoy movie gossips with an intuitive interface and powerful features.
- Host: GitHub
- URL: https://github.com/shahalimshompod/movie-sphere-client
- Owner: shahalimshompod
- Created: 2025-02-05T18:02:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-05T18:35:22.000Z (4 months ago)
- Last Synced: 2025-02-05T19:46:28.558Z (4 months ago)
- Topics: css3, expressjs, firebase-auth, html, javascript, mongodb-atlas, nodejs, reactjs, rest-api, tailwindcss
- Language: JavaScript
- Homepage: https://moviesphere.surge.sh/
- Size: 470 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎬 MovieSphere
Welcome to **MovieSphere**, a comprehensive platform designed to help you explore, manage, and enjoy your favorite movie gossips. With an intuitive user interface and powerful features, MovieSphere makes movie discovery easier than ever.
## 📸 Screenshot
## 🚀 Technologies Used
MovieSphere is built using modern web technologies to ensure a smooth and interactive user experience.
- **Frontend:** React, React Router, React Hook Form
- **UI & Styling:** Tailwind CSS, DaisyUI, React Icons, React Responsive Carousel
- **Authentication & Backend:** Firebase
- **State Management & Utilities:** React Simple Star Rating, React Rating, SweetAlert2
- **Build & Development:** Vite, ESLint, PostCSS
## 🌟 Features
✅ Browse and search for movies effortlessly
✅ User-friendly interface with a responsive design
✅ Movie ratings and reviews system
✅ Carousel and interactive UI elements for a better experience
✅ Secure authentication with Firebase
✅ Smooth navigation using React Router
## 📦 Dependencies
### Main Dependencies:
```json
{
"firebase": "^11.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.2",
"react-icons": "^5.4.0",
"react-rating": "^2.0.5",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^7.0.2",
"react-simple-star-rating": "^5.1.7",
"sweetalert2": "^11.14.5"
}
```
### Development Dependencies:
```json
{
"@eslint/js": "^9.15.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.14",
"eslint": "^9.15.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"vite": "^6.0.1"
}
```
# 🛠 Installation & Setup
**Follow these steps to set up and run MovieSphere locally:**
**1️⃣ Clone the Repository**
```sh
git clone https://github.com/your-username/moviesphere.git
cd moviesphere
```
**2️⃣ Install Dependencies**
```sh
npm install
```
**3️⃣ Set Up Firebase**
- Create a Firebase project in the [Firebase Console](https://console.firebase.google.com/)
- Add a .env file in the root directory and configure your Firebase credentials:
```env
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id
```
**4️⃣ Start the Development Server**
```sh
npm run dev
```
**5️⃣ Build for Production**
```sh
npm run build
```
# 🔗 Live Demo
- Live Project: [Click Here](https://moviesphere.surge.sh/)
# Enjoy exploring movies with MovieSphere! 🎥✨