A simple web application for displaying custom movies list in tabular format. The app allows for full CRUD functionality and allows users to download movies from an external API endpoint here.
The app is fully responsive and was tested on different screen sizes.
The production version can be found here.
The production version of the web API endpoint can be found here.
The production version uses Azure SQL Server as a database provider.
The backend repository can be found here.
The devolpment version uses 'in memory database' for testing purpose - built-in feature of EF Core toolkit.
-
- ASP.NET Core: version 7.0 - was used to scaffold the minimalistic web API.
- Entity Framework Core: was used to work with a database using .NET objects.
- Azure SQLServer: was used to build SQL databse for production.
-
- Netlify: was used to build and host the front-end.
- Git: the version control system used to manage the code.
- Vite: was used as a frontend development building tool.
- GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Visual Studio for Mac: version 2022, this IDE was used to build the backend for the project.
- Fontawesome: was used to implement icons with animation.
- Grammarly: was used to check grammar and typo errors.
- eslint: ESLint statically analyzes code to quickly find problems. Was used to check any linting errors and warning in the code.
-
- star-rating: was used to implement star rating component.
- default-passive-event: was used to add passive mode to event listeners.
Open the app by navigating to this page.
- To add a movie click on the green button above the table.
- To fetch movies click on the blue cloud button above the table.
- To edit the movie click on the grey button next to the movie.
- To delete a movie click on the red button next to the movie.
- To submit the form fill in the data and click submit.
- You can close the modal by clicking the close, 'X' button or clicking outside the modal.
- To change movie data fill in the desired filled and click save.
- You can close the modal by clicking the close button, the 'X' button or clicking outside the modal.
- To delete the movie simply confirm your choice by clicking delete.
- You can close the modal by clicking the close button, the 'X' button or clicking outside the modal.
- Star Rating component allows to increment by .5 - this can be changed, but for the designer that is the best scale.
- To save the rate simply hover over the star and click on it.
- Users can sort the data in ascending or descending order by clicking on a table header. The arrow indicates the sorting direction and which heading is used for sorting.
During the development process the warning "Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive." was present every time the modal was opened or the page reloaded. It is caused by using prevent default and not making the listener passive. To solve it the package was installed, but even though the errors regarding the non-passive event listener are gone, the loading warning for the package is present.
It is left because the previous warnings are gone, so the final result is achieved.
- All fonts come from Google Fonts.
- The movie clapper logo comes from cleanpng.com
