-
Movies List
- User is able to load and see List of Movies
- User can search, regex against movie name is applied
- User can filter list by Genre
- User will be redirect to the selected 'movie detail' after clicking on a particular movie
-
Movie detail
- User will see details of the selected movie
- User will be able to navigate back to 'movie list' from movie detail page
-
Navigation
- Using the back and forward button of the browser works
- Reloading the list and details page works
- Whole project is organised in context of node.js server. Whole backend/server application code is within server folder
- Images are served from images folder which is mapped as node.js static path.
- Whole react application is within "client" folder. Is is completly separted project, has its own package.json and node_modules
- First start server in dev mode with:
this will run server in reload mode with nodemon
npm run dev
- Then go to client folder and run "npm start" there
cd ./client npm start
- First run build
this will build react application and copy build from client to root folder, later build folder will be mapped to root path of node server. This way built react application will be available as
npm run build
server api will be at:http://server-address:8080/
images will be at:http://server-address:8080/api
http://server-address:8080/images
- After build step just run:
npm start
- ReactJS
- React Router DOM
- Scss/Material UI
- Redux toolkit
- Application is able to stay functional and usable on most of device screen sizes
- Serving data from nodejs server via API call
- Application is buildable as docker image via Docker file,for example
docker build -t movies:0.0.1 .
- Application is available as docker image from hub.docker.com as "antesplit/bgroup-movies:latest" image, can be started on local machine with command (need to have docker on machine and free 8080 port )
docker run -d -p 8080:8080 antesplit/bgroup-movies:latest