Frontend Mentor - Entertainment web app solution

This is a Next.js project bootstrapped with create-next-app.

This is a solution to the Entertainment web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic project.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
• Add/Remove bookmarks from all movies and TV series
• Search for relevant shows on all pages

Expected Behaviour

• :heavy_check_mark: General
  • :heavy_check_mark: The navigation menu should be fixed to the left for larger screens. Use the "Desktop - Home" page in the design as a visual reference.
• :heavy_check_mark: Home
  • :heavy_check_mark: The trending section should scroll sideways to reveal other trending shows
  • :heavy_check_mark: Any search input should search through all shows (i.e. all movies and TV series)
• :heavy_check_mark: Movies
  • :heavy_check_mark: This page should only display shows with the "Movie" category
  • :heavy_check_mark: Any search input should search through all movies
• :heavy_check_mark: TV Series
  • :heavy_check_mark: This page should only display shows with the "TV Series" category
  • :heavy_check_mark: Any search input should search through all TV series
• :heavy_check_mark: Bookmarked Shows
  • :heavy_check_mark: This page should display all bookmarked shows from both categories
  • :heavy_check_mark: Any search input should search through all bookmarked shows

Screenshot

Links

• Live Site URL: (https://devubong-entertainment.vercel.app/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties/vars
• TailwindCSS
• Mobile-first workflow
• React/Next.js
• Typescript
• Redux Toolkit
• Local Storage
• TMDB API

What I learned

• Typescript: First time using it
  • Types/Interfaces
  • Handling Events
  • Handling Props
• Redux Toolkit
• Brushed up on my tailwindCSS

Author

• Website - Ubong Sylvester