FaceMovie

🎞️🎬 FaceMovie is a social network for movie lovers. Search, add, review and share your favorite movies!

Badges

Features

🖌️ Design and assets created in Figma;
📱 Mobile-First Responsive Web Design;
☀️🌙 Light mode/dark mode toggle;
🔍 Search engine that works based on incomplete information
🛠️ OMDB and NYT (Movie Reviews) APIs

Screenshots

How to access

Create your own list here.

Authors

• @Caio Cabral
• @Sayonara Crestani

APIs used

https://www.omdbapi.com/

https://developer.nytimes.com/

Still to come

• Adjust search modal header spacing
• Create animation for search list

Features

• Learn how to use Firebase (User information + Movies)

• Use Firebase to store information

• set filter according to height (in order to avoid space between ul and te line

• Create login / Subscribe Mudar o login - centralizar e transformar o botao em ancora para a pagina inicial (Other page, not modal) https://codepen.io/allisonching/pen/PoqNJvQ?editors=1010 (Login, Password, Confirm password, email) https://dev.to/felix/floating-input-placeholders-with-html-css-ej4#:~:text=First%2C%20you%20have%20to%20put,the%20input%20in%20the%20HTML.&text=This%20will%20ensure%20that%20we,can%20use%20transform%3A%20translate()%20. Criar login https://www.youtube.com/watch?v=z5-9sN4i7xE&ab_channel=TurtleCode

  Form responsivo https://www.geeksforgeeks.org/design-a-responsive-sliding-login-registration-form-using-html-css-javascript/

• Reestructure code to sanitize CSS and movie creation with OOP

• Create loader to wiat for api call?

• Make filter button work

• Make burger work

• Crete 404 error

• User gives his own review (limit of characters)

• User review appears on tooltip

Fix

• Align switch label with username*
• Put user controls into main/card section*
• Try to fix Chrome bug with dimension set in JS
• Adjust mode switch to 4k
• Make OMDB fetch independent from NYTimes (?)
• Check if Dark mode implementation abides by these rules (https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/) *
• Check contrast*
• Should debounce be on Load movie instead of find movie? How to do it?
• Search with one-letter name doesnt work. Add director search?
• problem with viewport units in mobile devices: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
• Bug: depois que um filme é selecionado com a crítica do NY Times, mesmo que o próximo não tenha, vai puxar a do anterior
• Set fallback to clamp font size

Planning/Timeline

• Create layout on Figma
• Create page structure
• Create add film action
• Get information from OMDB API
• Get information from NY Times API
• Create search engine
• Implement Light/Dark Mode
• Create modal
  • Make Modal appear and disappear on click
  • Avoid body from scrolling
• Search input styling
• Use of mix-blend-mode to addapt to dark mode withou using new asset
• Create action of card addition
• Result modal styling
  • On reload grid result scrolls
  • Style buttons in grid result
  • Give possibility of user to grade the movie
  • Style range
  • Change Range's Thumb Heart color on dark mode using filter
• Setting card section height based on other element's size
• Scrollbar and select styling
• Total responsiveness

Contributing

Contributions are always welcome!

Please read the contribution guidelines first.