Welcome to Sin E Spoiler — your go-to React 19 🎉 frontend app for spoiler-free, AI-powered movie reviews 🤖⭐, augmented reality posters 📱✨, and exclusive premiere giveaways 🎟️🎁. Inspired by top cinemas like Cineplanet and TGV Cinemas, powered by TMDB 🎞️ data.
- 🎬 Now Showing: Browse latest movies with posters, genres, and detailed info
- ⭐ AI Ratings: Spoiler-free, trusted AI-generated star ratings
- 🎟️ My Tickets: Easy ticket management and viewing
- 🏛️ Cinemas & Promotions: Discover theaters & exciting offers
- 🖼️ Augmented Reality Posters: Interactive movie posters to explore!
- 📱 Fully Responsive: Mobile-first design for all devices
- ⚡ Blazing Fast: Built with React 19 + Vite for instant reloads
- 🎨 Clean Styling: Modular BEM CSS for maintainable UI
- 🔥 Node.js v18+
- 📦 npm (comes with Node.js)
1️⃣ Clone this repo
2️⃣ Install dependencies:
npm install3️⃣ Launch the dev server:
npm run dev4️⃣ Open your browser & go to: 🌐 http://localhost:5173
sin-e-spoiler-frontend/
├── public/ # 🖼️ Static assets: logos, favicon, images
├── src/
│ ├── components/
│ │ ├── layouts/ # 🧩 Header, Footer components
│ │ ├── modules/ # 🚀 Hero, MovieList modules
│ │ ├── widgets/ # 🎴 MovieCard, Rating reusable widgets
│ ├── css/ # 🎨 Modular CSS stylesheets with BEM
│ ├── data/ # 📊 Static or mock movie data utils
│ ├── App.jsx # 🏗️ Main React app component
│ └── main.jsx # ⚙️ React entry point with StrictMode
├── index.html # 🌐 Main HTML template
├── package.json
├── vite.config.js
└── README.md| Library | Purpose |
|---|---|
| react | ⚛️ Build UI components & manage app state |
| react-dom | 🏗️ Render React components to the DOM |
Built with the best modern tools for speed, reliability, and maintainability! 🚀✨
- 🛠️ Use React Developer Tools extension for Chrome/Firefox
- 🔍 Open DevTools (
F12orCmd+Option+I) and explore the Components tab - 🧩 Inspect props, state, and component tree effortlessly
- 🚦 Check console for warnings/errors, fix promptly
- 💨 Use
npm run devfor live reload during development
Take your app to the next level with these challenges:
1️⃣ Genre Filter Component Filter movies by genre to personalize browsing.
2️⃣ Featured Movie Banner Showcase top picks with big visuals and "Book Now" CTA.
3️⃣ Movie Search Bar Let users find movies fast by title keywords.
4️⃣ Promotional Banner Highlight current promos and special offers.
5️⃣ Coming Soon Section Display upcoming releases with release dates.
Try building these to practice React props, state, and modular CSS!
- 📁 Component Organization: Single responsibility, reusable UI parts
- 🔄 Data Management: Separate data logic from UI components
- 🎨 CSS Structure: Follow BEM convention, modular styles, CSS variables
- 📱 Responsive Design: Mobile-first with flexible grid layouts
- 📖 React Official Docs – Learn React fundamentals
- 📜 React Blog – Stay updated on React features
- 🖼️ TMDB API Documentation – Movie data API
- 🎨 BEM CSS Methodology – CSS naming conventions
- 🛠️ CSS Custom Properties – Theming with CSS variables
If you get stuck or want to learn more:
- 💬 Join React communities on Discord & Stack Overflow
- 📚 Explore tutorials on freeCodeCamp
Learning is a journey—don’t hesitate to ask or experiment! 🚀✨