CuddleScreen

Movie recommendation web app — A clean, responsive React application that recommends movies and TV shows. Built with Redux Toolkit for predictable state management and implements infinite scroll to browse long lists. Live demo: https://cuddle-screen.vercel.app/

---

Table of contents

• About

• Demo

• Key features

• Tech stack

• Getting started

  • Prerequisites
  • Clone & install
  • Environment variables
  • Run locally

• Available scripts

• Project structure

• State management (Redux Toolkit)

• Infinite scroll implementation

• Contributing

• License

---

About

CuddleScreen is a React-based movie recommendation web app that aggregates trending and popular movies/TV shows and presents them with an infinite-scroll browsing experience. The app is intended to be fast, responsive, and easy to extend with new data sources and features.

Demo

Live demo: https://cuddle-screen.vercel.app/

Key features

• Home page with aggregated trending content
• Dedicated pages for Trending, Popular, Movies, and TV Shows
• Infinite scroll for large lists (load more on demand)
• Redux Toolkit for predictable state management and caching
• Client-side routing for fast navigation
• Loading skeletons and graceful error states

Tech stack

• React (functional components + hooks)
• Redux Toolkit (slices + async thunks / RTK Query)
• React Router for navigation
• Intersection Observer API for infinite scroll
• Fetch/Axios for API requests
• Vercel for hosting (deployed)

Getting started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

Clone & install

git clone <your-repo-url>
cd cuddle-screen
npm install
# or
# yarn

Environment variables

Create a .env.local in the project root and add the variables your project expects. Example (adjust names to your code):

VITE_TMDB_BEARER=

Run locally

npm run dev
# or
# yarn dev

Open http://localhost:3000 (or the port printed by Vite/CRA).

Available scripts

(Examples — update to match your package.json)

• npm run dev — start development server
• npm run build — create production build
• npm run preview — preview production build locally
• npm run lint — run linter
• npm run test — run tests

Project structure (suggested)

src/
├─ components/        # Reusable UI components (Card, Header, Loader)
├─ features/          # Redux slices (trending, movies, tv, popular)
├─ pages/             # Page components (Home, Trending, Popular, Movies, TV)
├─ services/          # API clients and fetch helpers
├─ hooks/             # Custom hooks (useInfiniteScroll, useDebounce)
├─ routes/            # App routing config
├─ App.jsx
└─ index.jsx

State management (Redux Toolkit)

• Organize domain logic into feature slices (e.g., trendingSlice, moviesSlice).

• Each slice commonly stores:

  • items — array of results
  • page or cursor — pagination state
  • hasMore — whether more pages are available
  • loading / error — request states

• Use async thunks to fetch paginated data and take advantage of built-in caching.

Infinite scroll implementation

Recommended approach:

1. Use the API's pagination (page or cursor) to fetch chunks of data.
2. Maintain page and hasMore in Redux slice state.
3. Render a sentinel element after the list and observe it with IntersectionObserver.
4. When the sentinel becomes visible and loading === false and hasMore === true, dispatch the next-page fetch action.

Contributing

1. Fork the repo
2. Create a branch: git checkout -b feat/your-feature
3. Make changes and add tests
4. Open a PR with a clear description and screenshots if UI changed

Commit message suggestions:

• feat(...) — new feature
• fix(...) — bug fix
• chore(...) — maintenance
• docs(...) — documentation

License

This project is available under the MIT License.