react-movie-database

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:

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):

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

Shown below is sorting by stock:

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

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

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

Here is it shown in Sql Server:

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

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

Now we will delete "Avengers" from the database:

We can see it has been removed from the database: