🍿 Let's watch?

💎 Roadmap   |   🛸 Techs   |   ⚠️ Prerequisites   |  ❔ How To Use   |   🔖 Badges   |   🔐 License   |   ☎ Contact Me

💎 Roadmap

📂 Header

🕹️^🤏

• 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

📂 Header > mob

• Open menu

📂 Footer

• Code repository anchor

📃 Catalogue

🕹️^🤏

• Scroll to the catalogue section
• List movies
  • Carousel
    • Change carousel card movie scale/effect with mouse hover
  • Catalogue list
• Filter buttons by:
  • Genre
  • Layout
  • Close filter accordion with outside element click
• Load more button

📃 Selected movie

🕹️^🤏

• List movie details
• Video player
  • Fix some movie id that doesn't work
  • Captions
  • Settings
  • TV share
  • Full screen
  • Watch on YouTube
  • ...

📃 404

• Custom error page

⚙️ Others

🕹️^🤏

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

🛸 Techs

dependencies	devDependencies	Others
Axios	Commitlint	React Developer Tools
Animate.css	Commitizen	Vs Code Debugger
Hamburger-react	CZ-customizable
Hover.css	ESLint
LottieFiles	ESlint-plugin-import-helpers
Material UI	Husky
Next.js	Prettier
Polished	SVGR
React	TypeScript
React-icons
React-responsive
React-multi-carousel
Styled-components
Vercel

⚠️ Prerequisites

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.

❔ How To Use

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! ;)

🔖 Badges

🔐 License

Copyright © 2021 Suno Movies, MIT .

This project is under the ^MIT license. See the license for more information.

---

“Always running in search of the goals!”
Done with ♥ by myself 👇 Get in touch!

☎ Contact Me