Sinopsisp

Professional Film & Game Analysis Blog

A modern, elegant blog dedicated to in-depth film reviews, game analysis, and pop culture insights.

Live Demo • Instagram • Report Bug

---

🎬 About Sinopsisp

Sinopsisp is a premium blog platform that combines sophisticated design with comprehensive content analysis. Built for film enthusiasts and gamers who appreciate thoughtful, well-researched reviews and insights. Our platform features real-time data integration from TMDB and RAWG APIs, ensuring you always have access to the latest information about movies and games.

✨ Key Features

• 🎨 Premium Design: Clean, modern interface inspired by professional media outlets like Bloomberg
• ⚡ Lightning Fast: Built with Next.js 14 and App Router for instant navigation
• 📱 Fully Responsive: Perfect display across all devices from desktop to mobile
• 🌙 Dark Mode: Eye-friendly dark theme for comfortable reading
• 💬 GitHub Comments: Giscus-powered comment system integrated with GitHub Discussions
• 🔍 Advanced Search: Real-time search functionality with debounced input
• 📊 Real-time Data: Live integration with TMDB and RAWG APIs
• 📈 SEO Optimized: Comprehensive metadata configuration for search engine visibility
• 🎯 Social Sharing: Built-in social media sharing capabilities
• 📱 Progressive Web App: Fast, reliable, and engaging user experience

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• ShadCN UI - Beautiful, accessible components

APIs & Data

• TMDB API - Movie and TV show data
• RAWG API - Video game database
• Giscus - GitHub Discussions-based comments

Deployment & Analytics

• Vercel - Hosting and deployment platform
• Vercel Analytics - Performance monitoring
• Speed Insights - Core Web Vitals tracking

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/xFalzz/sinopsisp.git
   cd sinopsisp

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

   Add your API keys to .env.local:

   TMDB_API_KEY=your_tmdb_api_key_here
   RAWG_API_KEY=your_rawg_api_key_here
   GISCUS_REPO=your_github_repo_here
   GISCUS_CATEGORY=Announcements
   GISCUS_CATEGORY_ID=your_category_id_here

4. Run the development server

   npm run dev
   # or
   yarn dev

5. Open your browser

   Navigate to http://localhost:3000 to see the application.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript compiler check

📁 Project Structure

sinopsisp/
├── src/
│   ├── app/                 # Next.js App Router pages
│   │   ├── movies/         # Movie-related pages
│   │   ├── games/          # Game-related pages
│   │   ├── about/          # About page
│   │   ├── contact/        # Contact page
│   │   └── globals.css     # Global styles
│   ├── components/         # Reusable React components
│   │   ├── ui/            # ShadCN UI components
│   │   ├── Header.tsx     # Navigation header
│   │   ├── Footer.tsx     # Site footer
│   │   └── ...
│   ├── lib/               # Utility functions and configurations
│   │   ├── tmdb.ts        # TMDB API utilities
│   │   ├── rawg.ts        # RAWG API utilities
│   │   └── utils.ts       # Helper functions
│   └── hooks/             # Custom React hooks
├── public/                # Static assets
└── ...

🎯 Features in Detail

Real-time Data Integration

• TMDB Integration: Live movie and TV show data with posters, ratings, and cast information
• RAWG Integration: Comprehensive game database with screenshots, ratings, and release dates
• Caching Strategy: Optimized data fetching with proper caching mechanisms

User Experience

• Smooth Animations: Framer Motion-powered page transitions and micro-interactions
• Loading States: Skeleton loaders and progressive loading for better perceived performance
• Search Functionality: Debounced search with real-time results
• Social Sharing: One-click sharing to major social media platforms

Performance Optimizations

• Image Optimization: Next.js Image component with automatic optimization
• Code Splitting: Automatic route-based code splitting
• Static Generation: Pre-rendered pages for optimal performance
• CDN Integration: Global content delivery for fast loading worldwide

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all linting checks pass

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• TMDB for providing comprehensive movie and TV show data
• RAWG for their extensive video game database
• Vercel for hosting and deployment services
• ShadCN for the beautiful UI components
• Next.js Team for the amazing framework

📞 Contact & Support

• Instagram: @sinopsisp
• Developer: Nawfal (xFalzz)
• Issues: GitHub Issues
• Live Site: sinopsisp.vercel.app

---

Made with ❤️ by Nawfal