A full-stack (React/Redux-Saga, ASP.NET Core, MS SQL Server) Movie Poster Review App
Hilbert is the one-stop community for movie poster enthusiasts.
- Come by for a casual perusal! 🎥
- Leave a fanatic review! ✨
- Contribute your own movie poster! 👾🌇🎬💯
This project is made from scratch for demonstration and educational purposes. Please feel free to leave comments for improvements or fork it for your own repurposing!
This project is also UNDER HEAVY DEVELOPMENT . Frequent changes will occur.
Overall structure:
- Server: ASP.NET Core RESTful service layer with Entity Framework Core ORM and Swagger API Spec
- Front-end: SPA-style front-end with React, Redux-Saga, Webpack, Babel, Typescript, Flexbox, Bootstrap, React Router, and Cloudinary CDN
- Database: MS SQL Server 2017 persistent database running on a Docker container
| Server | Front-end | Database | Tooling |
|---|---|---|---|
| ASP.NET Core MVC | React | MS SQL Server | VS Code |
| MS EF Core | Redux | Docker | Azure Data Studio |
| Redux-Saga | Swagger | ||
| Webpack | |||
| Babel | |||
| TypeScript | |||
| SCSS | |||
| Bootstrap | |||
| Cloudinary |
- Node installed.
- .NET Core 2.2.0 installed.
- Docker installed.
- MS SQL Server image: 2017-latest in Docker repo.
# Retrieve DB image
docker pull mcr.microsoft.com/mssql/server:2017-latest
# Set up DB server (Docker Quickstart Terminal can tell you the IP address of your virtual machine)
docker run -e 'ACCEPT_EULA=Y' \
-e 'SA_PASSWORD=Passw0rd!' \
-p 1433:1433 \
--name movie-posters-db \
-d microsoft/mssql-server-linux:2017-latest*Note: DB ConnectionString is hardcoded in this project. For deployment, consider encrypting in a config file or environment variable.
- Clone the repo
https://github.com/chaua0927/movie-posters.git- Install EF Core 2.2.0
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 2.2.0- Install NPM packages.
npm install#To run db container, syntax is for Docker Toolbox
docker container start movie-posters-db
#To run webserver at localhost:5000 and :5001
dotnet run
#To stop db container when finished
docker container stop movie-posters-db
- View List of Movie Posters
- Base UI Design + Icon
- Add Animations/Transitions
- CRUD Movie Posters
- CRUD Comments
- Movie Poster Search
- Account Management
- Fundamental stack set-up (React with Webpack and Babel, ASP.NET CORE, EF Core, MS SQL Server on Docker)
- Add [React] Bootstrap
- Add React Router + React-Router-Bootstrap
- Migrate to Redux + Redux-Saga
- Implement reverse proxy server (Nginx)
- Implement Swagger API spec
- Migrate poster image to Cloudinary CDN
- SPA: History API fallback
- API: Complete API search capabilities
- API: Lagging DB nav prop refs?
- TS: Fix react-redux connect() typing (potential solution here)
- a11y: Carousel (indicators and auto-scroll control)
- a11y: Star Ratings
- a11y: Zoom scaling
- Implement lazy-loading
- Individually import Bootstrap plugins *Needs exports-loader
- Implement pagination of DB access
- Implement UUIDs for DB entries
- SPA: Gradually integrate SSR
- Optimize Redux state slice allocation, via combineReducers?
- SPA: More graceful error-handling from server errors?
- SCSS: Organize animations as mixins
- Set up source maps + HMR
- Set up BDD/TDD: Cucumber + Selenium + Jest
- Set up SCSS env (minifying, autoprefixer)
- Migrate to Typescript
Distributed under the MIT License.
All images are intended for non-commercial entertainment and education use only - reviews, fan art, blogs, forums, etc. Hilbert is not endorsed, sponsored or affiliated with any movie studio. All copyrights, trademarks, and logos are owned by their respective owners. This site is for non-profit/educational use only. Using images from this project to make and/or sell reprinted movie posters is strictly forbidden.