Film & Series Review Platform

This README is also available in Croatian.

This is a web application for browsing movies and series and writing reviews for them. Developed as a final project within the Infinum Academy, the application utilizes the latest technologies and frontend development practices using React, Next.js, and TypeScript.

Demo

Check out the live version of the application here.

Key Technologies and Tools

• Next.js: Framework for server-side rendering and static site generation, enabling optimized SEO and faster loading times.
• React: A JavaScript library for building dynamic user interfaces.
• React Hooks: useState, useEffect, useContext, useMemo for managing state and effects in the application.
• Chakra UI: A design and development tool for building responsive web interfaces, facilitating quick development and aesthetic design.
• TypeScript: A statically typed superset of JavaScript that enhances code safety and maintainability.
• SWR and SWR Mutation: A library for data fetching with a caching strategy and optimistic updates.
• React Testing Library and Jest: Tools for testing components and applications, ensuring code quality and reliability.
• Prettier and ESLint: Tools for automatic formatting and maintaining code quality.
• Form Control (useForm): Managing form inputs and validation using React Hook Form.

Project Features

• Sign Up and Login: Users can sign up and log in to access their personalized profiles.
• Profile Personalization: Users can add or change their profile picture and customize their profile according to their preferences.
• Browse Movies and Series: Ability to view descriptions, ratings, and reviews for each series or movie.
• Write and Edit Reviews: Users can leave reviews for movies and series, as well as edit or delete their own reviews.
• View Other Users' Reviews: See reviews and ratings from other users.
• Recommendation Algorithm: An algorithm implemented to find the optimal movie for watching each evening based on user preferences.
• Top Rated Movies and Series: View a list of the highest-rated movies and series based on user ratings.
• Star Rating System: Ability to rate movies and series with stars, contributing to the overall rating.

What I Learned

Working on this project allowed me to master:

1. Frontend Development with React and Next.js: Utilizing modern tools and techniques to build responsive and dynamic web applications.
2. Integration with Backend APIs: Fetching and displaying data using REST APIs and optimized strategies for data management.
3. Converting Design to Code: How to translate designs from Figma into functional code using HTML, CSS, and JavaScript.
4. State Management and Data Fetching: Efficiently managing application state and fetching data using React Hooks and SWR.
5. Writing Clean and Maintainable Code: Maintaining consistent and high-quality code using tools like Prettier and ESLint.
6. Application Testing: Implementing comprehensive tests for components and integration using Jest and React Testing Library.
7. TypeScript: Using static typing to enhance code safety and maintainability.

How to Run the Project

1. Clone the repository:

   git clone https://github.com/fran-galic/Infinum-Academy-Film-Review-App.git

2. Install the necessary packages:

   cd film-series-review-platform
   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

Authors

Fran Galić - GitHub Profile