![react workflow](https://private-user-images.githubusercontent.com/107063397/287405843-dc5fc313-d7a6-40a6-bcbf-62d3253ed0ae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTIwNjIsIm5iZiI6MTcyNTA1MTc2MiwicGF0aCI6Ii8xMDcwNjMzOTcvMjg3NDA1ODQzLWRjNWZjMzEzLWQ3YTYtNDBhNi1iY2JmLTYyZDMyNTNlZDBhZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMFQyMTAyNDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YThhMTRhZWI2Y2VmYTZhMmE1MGU4YzQ1NmUzOTU2Mzk1ODBlMTYxOGJmZjQ2YjgyNzNhNGRkOTk5OTcyODFmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.qFP4nVz5daFGxLMa8c07rFBHH7dHkcQveUsn_z-lEQ8)
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 applicationA 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](https://private-user-images.githubusercontent.com/107063397/237544112-a9baa6c8-43ff-4eb9-a688-89831f24e176.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTIwNjIsIm5iZiI6MTcyNTA1MTc2MiwicGF0aCI6Ii8xMDcwNjMzOTcvMjM3NTQ0MTEyLWE5YmFhNmM4LTQzZmYtNGViOS1hNjg4LTg5ODMxZjI0ZTE3Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMFQyMTAyNDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00ZWFlNmVlOGNkMDA4MDE3ZTQyOTM5M2ViODA4MDIwMDM5YWI0NzRhNGM5NTZmY2U2MjVkMTlmYjFlMTA1ZTRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Y8RPOdHNV71cWfPp4QU9wP31D-vCgBByxHsORpZGCLc)
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: