Frontend Mentor - Entertainment web app solution

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
  • Continued development
  • Useful resources
• 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
• Bonus: Build this project as a full-stack application
• Bonus: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/entertainment-web-app-nextjs-14-prisma-mongodb-swiperjs-t9QfzP1X1-
• Live Site URL: https://fm-entertainment-web-app-gamma.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework

What I learned

I chose to try the new app router in Next.js 13.

• I liked the inheritance of the layout.
• Understanding how to work with server actions and RSC took a bit more work.

Continued development

• Add more testing.
• Look at possibly using Playwright in future projects, or when updating existing projects.

Useful resources

• Write good scrum tickets
• My notes on user stories
• How to Test User Interactions Using the React Testing Library
• NextJS 12 & 13 SVG Embed.md
• [Next.js 13.3.0] Upgrade breaks @svgr/webpack in appDir
• Next.JS: Testing
• How To Set Up Next.JS With Jest, React Testing Library and Playwright
• Caching dependencies to speed up workflows
• Jest With GitHub Actions
• Continuous Integration with Jest Tests and Github Actions
• Run your GitHub Actions locally 🚀
• Jest - SVGR
• Avoid jest svg failures using NextJS + @svgr/webpack
• Avoiding React act warning when accessibility testing next/link with jest-axe
• How to Debounce and Throttle Callbacks in React
• How to debounce and throttle in React without losing your mind
• Debouncing with React Hooks
• next-router-mock
• next-router-mock: Support Next 13 'next/navigation' router
• How to Write Unit Tests with React Testing Library in Next.js
• Swiper nested inside display:grid css
• Prevent content from expanding grid items
• Why does minmax(0, 1fr) work for long elements while 1fr doesn't?
• Hidden content for better a11y

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus