26

Movie List With SignalR

Developed to as an individual class project to learn SignalR in a C# application with a React frontend.

GitHub →Website →

Movie Ratings App 🎬🍿

Project Overview

The Movie Ratings App is a collaborative platform designed for movie enthusiasts, featuring real-time updates, intuitive movie management, and a sleek interface crafted with C#, React, TypeScript, Tanstack Query, Tanstack Router, and Tailwind CSS.

Features

Real-time Collaboration:

  • Multiple users can view and update the movie list simultaneously, ensuring that everyone's ratings are accounted for in real-time.

Movie Management:

  • Add new movies to the collection with details including title, rating, and release year.
  • Navigate between existing movies and the creation page.
  • Personalize the order of movies for easy reference by dragging and dropping them within the list.
  • Remove movies from the collection once they've been viewed or are no longer of interest.

Personal Motivation

  • The development of the Movie Ratings App served as a significant learning project, providing an opportunity to try out unfamiliar technologies while addressing a practical need. It allowed me to:
  • Gain hands-on experience in building a full-stack application with a C# backend and a React frontend using TypeScript.
  • Learn new state management techniques using Tanstack Query for data fetching and management.
  • Enhance frontend development skills by implementing navigation with Tanstack Router and styling with Tailwind CSS.

Tech Stack

Backend:

  • C#: Backend functionalities of the application.

Frontend:

  • React: For building dynamic and interactive user interfaces.
  • TypeScript: Enhancing code quality and developer productivity through static typing.

State Management:

  • Tanstack Query: Ensuring efficient data fetching and state management on the frontend.
  • Tanstack Router: Facilitating navigation within the application.

Styling:

  • Tailwind CSS: For a polished and responsive design, enhancing the overall user experience.

Project Summary:

In this project I integrated SignalR for real-time communication. This implementation enhanced the application's responsiveness and scalability.

To elevate this project, further styling enhancements are needed to refine the user interface. Additionally, the inclusion of more features for each movie, such as images, cast, and other movie information, would be the next steps I would take if I were to continue working on this.