π RoadmapΒ Β Β |Β Β
πΈ TechsΒ Β Β |Β Β
πΉοΈπ€
- Show or hide header effect with scroll event
- Form input header search bar validation with Yup lib
- Toggle form input header search bar with Ctrl+Shift+f shortcut
- Close form input header search bar with Escape shortcut
- Get auto focus input when form input header search bar is open
- Search movie
- Different header style between home and other pages
- Open menu
- Code repository anchor
πΉοΈπ€
- Scroll to the catalogue section
- List movies
- Carousel
- Change carousel card movie scale/effect with mouse hover
- Catalogue list
- Carousel
- Filter buttons by:
- Genre
- Layout
- Close filter accordion with outside element click
- Load more button
πΉοΈπ€
- List movie details
- Video player
- Fix some movie id that doesn't work
- Captions
- Settings
- TV share
- Full screen
- Watch on YouTube
- ...
- Custom error page
πΉοΈπ€
- Responsive layout
- Back to top button
- Save movie details data on browser local storage
- Toggle theme mode, Dark default | Light | Automatic
- Shimmer skeleton lazy loading placeholder
- Button loading
- Static Generation (SSG)
- Any suggestion? Contact me!
In order to use and test this project locally, you should've already setup the development environment.
Or go to suno-movies.vercel.app to see the project in a production environment.
To clone and run this application locally, you'll need Git, Node.js v10.16 or higher + Yarn v1.13 or higher installed on your computer.
Hit me to toggle collapse: πΉοΈπ€
From your command line
follow these steps...
# Clone the project
$ git clone https://github.com/caiohenrique-developer/suno-movies.git 'Suno-Movies' && cd 'Suno-Movies'
# Install dependencies
$ yarn
# or
$ npm i
# Start the project
$ yarn dev
# You'll be able to see the URL http://localhost:{port} on your command line, so open them!
# Very well, now you can enjoy this project! ;)
Copyright Β© 2021 Suno Movies, MIT .
βAlways running in search of the goals!β
Done with β₯ by myself π Get in touch!