skreenly

skreenly is a slaeek and responsive movie discovery web app that lets users search, explore, and view trending movies using data fetched from The Movie Database (TMDB) API. Built with React.js and designed for a seamless, cinematic user experience.

Features

• Search Movies Instantly: Type and get results in real-time.

• Responsive Design: Optimized for mobile, tablet, and desktop.

• Smooth Transitions: Built with Framer Motion for elegant animations.

• Dynamic Hero Section: Displays selected movie details interactively.

• Modern UI: Simple navigation bar, responsive sidebar, and intuitive layout.

• Preloader Animation: Clean loading screen with animated text for better UX.

• Custom Styling: Styled with Tailwind CSS and Spline Sans font for a modern, polished aesthetic.

Tech Stack

Frontend:

• React.js

• Tailwind CSS

• Framer Motion

API:

• The Movie Database (TMDB)

Fonts:

• Spline Sans

🧩 Project Structure

skreenly/ │ ├── public/ │ └── index.html │ ├── src/ │ ├── components/ │ │ ├── NavBar.jsx │ │ ├── SideBar.jsx │ │ ├── Search.jsx │ │ ├── MovieCard.jsx │ │ ├── Footer.jsx │ │ └── Preloader.jsx │ │ │ ├── App.jsx │ ├── main.jsx │ └── index.css │ └── package.json

⚙️ Installation & Setup

Clone this repository

git clone [https://github.com//skreenly.git]

Navigate into the folder

cd skreenly

Install dependencies

npm install

Add your TMDB API key

Create a .env file in the project root:

VITE_TMDB_API_KEY=your_api_key_here

Run the development server

npm run dev

Open your browser

Visit: [http://localhost:5173]

💡 Future Improvements

• Add user authentication for favorites and watchlists

• Implement pagination or infinite scrolling

• Include genre filters and sorting options

• Add a “movie details” modal or page

👨‍💻 Author

Linus Godwin Mba

Medical Doctor & Frontend Developer

🌐 Portfolio

• 📧 [linusgodwin2@gmail.com] • 💼 LinkedIn • 🐙 GitHub

🪪 License

This project is licensed under the MIT License – feel free to use and modify for personal or educational purposes