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
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