Skip to content

Dockerized C# program that connects to Microsoft SQL Server using .NET Entity Framework CORE to manipulate movie data and display them in a ReactJS GUI with pagination, sorting, and CRUD operations.

Notifications You must be signed in to change notification settings

mfkimbell/react-movie-database

Repository files navigation

react-movie-database

react workflow

Tools used:

  • React JS for creating a user interface with reusable renderable components

  • Bootstrap to simplify css styling

  • Lodash for easier array manipulation

  • Node package manager

  • Axios to make api calls from the front-end

  • .NET CORE Web API allow api calls to go from front-end to back-end

  • Entity Framework Core allow for models to faciliate CRUD operations for sql tables

  • Microsoft SQL Server to store data

  • Docker containerization of the application

    A C# and React JS GUI that connects to Microsoft Sql Server using .NET Entity Framework CORE to do CRUD operations to manipulate movie data. The user can add, like, delete, and sort data in various ways, and these changes with be reflected in the sql database and the GUI.


The ui is organized into these main components:

Movies is the main component that acts as a container for all other components.


ListGroup allows the user to change genre designation Pagination allows the user to cycle through the "pages" of movies MoviesTable holds the list of each movie and its data


LikeButton allows the user to like movies TableHeader allows the user to sort data by the following headers:

  • title
  • genre
  • stock
  • rate

This is the organization of the components:

Screenshot 2023-05-10 at 7 34 07 PM

We're using Entity Framework Core instead of making specific SQL calls, so here is a snippet of the Route, Model (for the sql table), and API call that is made when you add a book (however this is just one of many API routes and calls):

fjkdsl

After rendering it looks like this. Each of the headings can be clicked and reclicked to sort by the headings ascending and descending order:

slide1

Shown below is sorting by stock:

slide2

When the numbers in the pagination component are clicked, the next "page" of results are rendered instead:

pagination

When categories are clicked, only books belonging to that category are displayed:

slide 3

When you click "Add Movie" it renders a form that the user can fill out to add a movie to the database:

addbook

Here is it shown in Sql Server:

add

It's currently "liked", the user can choose to click the like button:

like

We can see in the database, it's "liked" status has been changed to "false":

data

Now we will delete "Avengers" from the database:

delete

We can see it has been removed from the database:

fdsfd

About

Dockerized C# program that connects to Microsoft SQL Server using .NET Entity Framework CORE to manipulate movie data and display them in a ReactJS GUI with pagination, sorting, and CRUD operations.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published