CineSpeak is a dynamic web application that lets users explore, discuss, and analyze movies and web series. Powered by the OMDb API for movie data and Hugging Face for AI-driven sentiment analysis and summarization, CineSpeak offers a seamless, real-time experience built with React and Firebase.
- Movie Exploration: Search and browse movies using the OMDb API.
- User Messaging: Engage in real-time discussions about movies.
- AI-Powered Analysis: Analyze message sentiment and generate summaries using Hugging Face's BERT and BART models.
- Real-Time Updates: Instant updates via Firebase Realtime Database.
- Responsive Design: User-friendly interface across devices.
Experience CineSpeak at: cinespeak.vercel.app
- Node.js and npm installed
- A Firebase project with Realtime Database enabled
- A Hugging Face API key
- An OMDb API key
-
Clone the Repository
git clone https://github.com/thanosshawn/cinespeak.git cd cinespeak -
Install Dependencies
npm install
-
Configure Environment Variables Create a
.envfile in the root directory with the following:REACT_APP_FIREBASE_API_KEY=your_firebase_api_key REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com REACT_APP_FIREBASE_DATABASE_URL=https://your_project.firebaseio.com REACT_APP_FIREBASE_PROJECT_ID=your_project_id REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id REACT_APP_FIREBASE_APP_ID=your_app_id REACT_APP_HUGGINGFACE_API_KEY=your_huggingface_api_key REACT_APP_OMDB_API_KEY=your_omdb_api_key -
Start the Development Server
npm start
The app will run at
http://localhost:3000.
CineSpeak leverages Hugging Face's Inference API for AI-powered features:
- Sentiment Analysis: Uses BERT to classify user messages as positive, negative, or neutral.
- Summarization: Uses BART to generate concise summaries of long discussions.
- Workflow:
- Messages are stored in Firebase Realtime Database.
- The frontend detects new messages and sends them to Hugging Face's API.
- Analysis results are stored in Firebase and displayed in the UI.
This approach avoids Firebase Cloud Functions for cost-effective deployment.
cinespeak/
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable React components
│ ├── firebase/ # Firebase configuration and utilities
│ ├── utils/ # Helper functions (e.g., API calls)
│ ├── App.js # Main app component
│ └── index.js # Entry point
├── .env # Environment variables
├── package.json # Project dependencies
└── README.md # Project documentationTo deploy CineSpeak on Vercel:
- Install the Vercel CLI:
npm i -g vercel
- Run
vercelin the project root and follow the prompts. - Add environment variables in Vercel’s dashboard (same as
.env).
Run unit tests with:
npm testEnsure all tests pass before submitting contributions.
- Firebase Error: Verify your Firebase Realtime Database rules allow read/write:
{ "rules": { ".read": true, ".write": true } } - Hugging Face API Timeout: Check your API key and internet connection. Consider caching results for frequent queries.
- OMDb API Issues: Ensure your API key is valid and not rate-limited.
We welcome contributions! Follow these steps:
- Fork the repository.
- Create a feature branch (
git checkout -b feature/your-feature). - Commit changes (
git commit -m "Add your feature"). - Push to the branch (
git push origin feature/your-feature). - Open a pull request with a clear description.
Please adhere to:
- Code style: Use Prettier and ESLint (run
npm run lint). - Commit messages: Use clear, concise messages (e.g.,
fix: resolve API timeout issue).
This project is licensed under the MIT License.
For questions or feedback, open an issue on GitHub or reach out to thanosshawn.
Built with ❤️ by the CineSpeak team.