Project Guide

-

Mentors

  • Fahim Ahmed
  • Samarth Namdeo

Members

  • Singaraju B V Sreedakshinya
  • Kakarla Naveen Janaki Ram
  • Bhagwat Poorva Milind

Acknowledgements

Aim

The aim of this project is to create a movie review and rating frontend web app that provides users with a user-friendly platform to search for movies easily, view their reviews and ratings, and filter results by rating or release date. The project also aims to provide an easy way for users to compare movies based on their reviews and ratings.

Introduction

Movie reviews and ratings are scattered across different websites and platforms, making it difficult for users to find and compare reviews and ratings for a specific movie. The lack of a user-friendly platform for movie reviews and ratings is the problem that this project aims to solve. The project will utilize an API to gather information on movies, such as details, genre, cast, and reviews. The frontend framework ReactJS will be used to develop the user interface, allowing for dynamic updates and improved performance. TailwindCSS will be used for styling and making the website responsive. The app will include a search function, allowing users to easily find the movies they are looking for.

Design and UI/UX

The design of the MovieMaven web app is inspired by popular movie review websites. The landing page displays a carousel of popular movies, with a search bar to search for movies by title, genre, or release year. The movie details page displays movie information, including the movie poster, plot summary, cast, and crew. The page also displays user reviews and ratings, along with an option for the user to leave their own review and rating.

Development

The MovieMaven web app is developed using the following technologies:

  • HTML, CSS, and JavaScript for the frontend
  • ReactJS for the user interface
  • TailwindCSS for styling
  • APIs from OMDB for movie information
  • The project is divided into the following stages:

Learning and planning

  • We researched and learned the fundamentals of web development, including HTML, CSS, and JavaScript.
  • We learned about AJAX and APIs and how to use them to fetch movie information.
  • We learned React and used hooks and state management to develop the user interface.
  • We learned best UI/UX practices for frontend development and used TailwindCSS for styling.

Design and UI/UX

  • We designed the UI/UX of the MovieMaven web app.
  • We implemented the design using React and TailwindCSS.

Development

  • We developed the frontend of the MovieMaven web app using React and TailwindCSS.
  • We developed the backend functionality using APIs to fetch movie information.
  • We used hooks and state management to develop the user interface.
  • We used AJAX to fetch movie information.

Deployment

  • Have not deployed the application as it still needs some polishing. We aim to deploy the application using netlify.

Conclusion

  • The MovieMaven web app provides users with a user-friendly platform to search for movies easily, view their reviews and ratings, and filter results by ratings.
  • The project has provided us with an opportunity to learn and apply the fundamentals of web development, including HTML, CSS, ReactJS.

References

  1. https://www.w3schools.com/
  2. https://www.w3schools.com/
  3. https://tailwindcss.com/docs
  4. https://www.freecodecamp.org/
  5. https://reactjs.org/docs/getting-started.html
  6. https://www.youtube.com/watch?v=w7ejDZ8SWv8&t=5339s
  7. https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-react-applications-7758052bf69
  8. https://youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3