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.
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
- General
- The navigation menu should be fixed to the left for larger screens. Use the "Desktop - Home" page in the design as a visual reference.
- Home
- The trending section should scroll sideways to reveal other trending shows
- Any search input should search through all shows (i.e. all movies and TV series)
- Movies
- This page should only display shows with the "Movie" category
- Any search input should search through all movies
- TV Series
- This page should only display shows with the "TV Series" category
- Any search input should search through all TV series
- Solution URL: Repository Project
- Live Site URL: Result Live
- Semantic HTML5 markup
- SEO Basic(metatags, OpenGraph)
- Acessibilidade HTML with arias attributers and roles
- CSS(Flexbox, CSS Grid, Bem Metodolody CSS Architecture)
- Normalize - Normalize CSS
- Responsive Web Design(RWD)
- Mobile-first workflow
- Typescript
- NPM
- React - JS library
- hooks
- Next.js - React framework version 13.4.3
- Server Components
- Client Components
- Metadatas Static, and dinamic
- Loading UI, and UI Optimist
- Route Handles
- Page Error Handling
- Fetch data on the server using Server Components.
- Fetch datas with client components with useSWR hook consumed endpoint API
- CSS Modules - For styles
- SWR - Fetch Datas Client
- API TMDB - API TMDB
- Website - Portfolio Web
- Frontend Mentor - @samuel-amaro
This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.