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-with-nextjs-wlAU7Jwn5g
• Live Site URL: https://entertainment-web-app-nextjs-viniciuscosta89.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
• Typescript - JavaScript with syntax for types
• Styled Components - For styles (CSS-in-JS)
• Sass - For specific styles
• Axios - Promise based HTTP client for the browser and node.js
• TanStack Query - Powerful asynchronous state management for TS/JS
• NextAuth.js - Authentication for Next.js
• supabase - Supabase is an open source Firebase alternative
• Framer Motion - Framer Motion is a simple yet powerful motion library for React
• Splide - Splide is a lightweight, flexible and accessible slider/carousel
• React Rating - Zero dependency, highly customizable rating component for React
• Nodemailer - Nodemailer is a module for Node.js applications to allow easy as cake email sending
• SendGrid - SMTP Service: Send email reliably—no email servers required.

What I learned

Mostly I wanted to improve my knowledge of Next.js and its features.

For me, it was a challenge to work with a database and authentication. But Next-auth made authentication easy. Just to set up a way to send email was hard. I chose Supabase to store user accounts because Firebase didn't help me. I found some difficulties so Supabase was easier to work with.

Framer Motion always helps me make things smooth.

Continued development

Improve performance and make unit tests.

Useful resources

• YouTube - A bunch of NextAuth, Nodemailer and SendGrid tutorials helped me a lot!

Author

• Website - Vinicius Costa
• GitHub - https://github.com/viniciuscosta89
• Frontend Mentor - @viniciuscosta89