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
- 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
- Solution URL: [https://github.com/PioKl/Entertainment-Web-App]
- Live Site URL: [https://entertainment-web-app-five-brown.vercel.app/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Next.js - React Framework
- React - JS library
- Typescript - JS syntax
- Swiper - Modern Mobile Touch Slider
- SWR - React Hooks for Data Fetching
- SVGR - Transform SVGs into React components
- File-Loader - The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
- MUI - Material UI, React UI framework
- React-Fontawesome - Font Awesome React component using SVG with JS
Practice with: Next and React (hooks, custom hooks, useEffect, routing, navigation with next, modals, swiper, reusable components, swr fetching method, work with api, usage of layouts in next, transforming svg into component, usage of Image in next, work with iframe, pagination with mui) and Typescript (generally and types/interface), grid, flex. Working with mongodb, creating working auth, image upload and bookmarks with mongo and node.
- Clamp Calculator - To clamp fonts