CINEMA WORLD is an application simulating the operation of a cinema website. This project was bootstrapped with Create React App. I created this application to train my skills in REACT & REDUX. This project was prepared mainly with React.js library. Project is divided into components with scss styling files and JS files.
https://cinemaworld.webster2020.com/
- git clone [email protected]:Webster2020/CINEMA_WORLD.git
- yarn install
- yarn start - run the project and than You can see it on Your device
*...or use link if You only want to check how it works
- React with Hooks - as main library
- Redux - store
- SCSS - for styling
- Styled components - for styling FooterBar
- HTML5 - for content
- React Router - for routing
- React Icons
- React FlexBox Grid
- Styled Components - to styling Footer
- Eslint - to control bugs
- Husky - to control bugs before every commit
- Lint Staged - to check only changed files
Application is divided into four views: home, movies, tickets and confirm. Menu with logo on the top to switch between views.
- Home:
- slider with movies
- list of movie posters with basic information
- filters (title, categorie, year)
- Movies:
- filter with week days
- list of movies with shows hours
- click on any hour drives to 'tickets' page
- Tickets:
- room view with clickable seats
- booking form with validation
- Confirm:
- information about booking (seats, name, email, day, hour, movie)
Project is not divided into components in accordance with the React convention.
- components with JS, JSX and SCSS
- root file: index.html
- store and reducers in redux folder
- data with initialStoreData
- others functions in utils
- configuration files: gitignore, package.json, etc.
Project was prepared based on my own idea and using my current knowledge and skills.
- Refactor code
- Single movie page with details
- Create logic for more rooms - in this moment selecting each hour in every movie directs to the same room
- Michal Szwajgier - Webster2020 -
Free licence