This project contains the front-end part of the R3play back-end (here) written with React for displaying information about movies, anime, and TV series.
- Javascript/React
- React Bootstrap
- SCSS
- HTML
- React FontAwesome
- React as a front-end library
- React Bootstrap for design/responsive design
- Parcel for the build process
- React FontAwesome for icons
- Please see the package.json file for other project dependencies
- Ability to set theme (dark or light) (currently in test mode)
- Ability to click on the back to top button for quick navigation
- Displays login, signup, and theme menu links
- Displays home, profile, logout, and theme menu links
- Returns ALL movies, anime, and TV series to the user (each movie, anime, and TV series item with an image, genre, and release year)
- Shows an image slider with navigation to movie, anime, and TV series views.
- Displays the user's name in the navigation
- Filtering the list of movies, anime, and TV series with a "search" feature
- Ability to select a movie, anime, and TV series for more details
- Ability to log out
- Ability to navigate to the Profile view
- Ability to add a movie, anime, and TV series to favorites/delete them from favorites
- Title
- Description
- Genre (name and description)
- Director (name, bio, birth year, death year)
- Image
- Release year
- Rating (IMDb and Rotten Tomatoes Audience rating)
- Actors list
- Etc, about a single movie to the user
- Title
- Description
- Genre (name and description)
- Director (name, bio, birth year, death year)
- Image
- Release year
- Rating (IMDb and Rotten Tomatoes Audience rating)
- Actors list
- Episodes list
- Etc, for a single Anime and TV series to the user
- Displays a section with interesting facts (can be collapsed/expanded)
- Shows a video player with the movie, anime, and TV series Youtube trailer.
- Ability to return back to the main view (with the list of all movies, anime, and TV series)
- Similar movies, anime, and TV series
- Movies, anime, and TV series by the same director
- What to watch with the same duration
- Movies, anime, and TV series where the same actors are playing
- Movies, anime, and TV series with the same IMDb Rating
- Movies, anime, and TV series with the same Rotten Tomatoes Audience Rating
- What to watch of the same genre
- What to watch of the same release year
- Allows users to log in with a username and password
- Uses user-friendly modal windows to show information
- Uses input validation
- Allows new users to register (username, password, email, date of birth)
- Uses user-friendly modals to show information
- Uses input validation
- Displays user registration details
- Uses user-friendly modals to show success/failure information
- Allows users to update their info (username, password, email, date of birth)
- Displays the favorite movies, anime, and TV series list (can be expanded/collapsed)
- Has separate counters for favorite movies, anime, and TV series list
- Allows users to remove a movie, anime, and TV series from their list of favorites
- Allows existing users to deregister
- Has the quick navigation buttons to go to the Profile view and Main view
- Has the quick navigation buttons to the Login View and Signup View
Please click on the video below to watch it
The App is live at https://onr3peat.com/
To clone the app use, the following command: console git clone git@github.com:yevheniiairapetian/r3play-client.git Or download directly by clicking on <> Code button > Download ZIP. Navigate to the r3play-client folder with the cd r3play-client in the terminal, and install the required dependencies using the npm install command. Then run the app with the parcel src/index.html command and access it at localhost:1234 in the browser.
Feel free to contact me via LinkedIn or email or via the contact form on my portfolio