Giter Club home page Giter Club logo

cinematix's Introduction

Cinematix

CI/CD

By Bryan Keane

Overview.

This is a react project which utilizes the TMDB API to provide a website for film and television fanatics where the user can view various movies, tv shows, and actors

Features.

  • Basic sign up and login authentication via JWT tokens
  • Discover Movies and TV Shows pages
  • Upcoming Movies page
  • Top Rated TV Shows page
  • Popular Actors and Latest Actors pages
  • Custom, responsive MUI Design
  • Generalised component design, using one custom component instead of 3. Example: templateCard instead of actorCard, movieCard and showCard
  • CI/CD Pipeline on repository
  • Pagination
  • Custom API Routes

Installation Requirements

Installing the software

git clone https://github.com/bryankeane0/movie-app-v2.git OR [email protected]:bryankeane0/movie-app-v2.git

followed by installation from the root directory

npm install

API Configuration

REACT_APP_TMDB_KEY=<tmdb_key>
FAST_REFRESH=false
NODE_ENV=development
PORT=8080
HOST=<host>
SECRET=<jwt_secret>
SEED_DB=True
mongoDB=<mongo_cluster_url>

API endpoints - Same endpoints for react app and custom API

  • Discover list of movies - /movies/discover
  • Discover list of upcoming movies - /movies/upcoming
  • Movie details - movie/:id
  • Discover list of tv shows - /tv/discover
  • Discover list of top rated tv shows - /tv/toprated
  • TV Show details - tv/:id
  • Discover list of popular actors - /actors/popular
  • Discover list of latest actors - /actors/latest
  • Actor details - actor/:id
  • Login - /login
  • Signup - /signup

App Design.

Storybook Components.

img.png img_1.png img_2.png img_3.png img_4.png img_5.png img_6.png

UI Design.

img_2.png img_1.png

Shows a list of movies with pagination available at the bottom. Users can navigate and discover movies, add them to favourites. A MUI accordian dropdown is available to show more info and allow the user to go into movie details

img.png

Movie details

img.png

Sign in page

img_1.png

Example actor card

The other pages are relatively the same as they use similarly designed components with different details and showing other information for tvshows and actors. This can be seen when deploying the app

Independent learning (If relevant).

  • I would say the extent I added MUI components to the front end would be independant learning as I utilised a lot of components not used or mentioned throughout the course using the MUI docs.
  • I would also like to mention the use of GitHub and the CI/CD pipeline to run code checks and build and deploy the app automatically would also be independant learning as it made development of the app more streamlined.

API Design

API design is reflected in the same endpoints developed for the react app in /discover/movies, /tv/toprated, /actors/popoular for GETs and the basic GETS POSTS and PUTS from the basic API development from the labs Please see about for the available gets although they are not integreated into the react app, they function with postman

Security and Authentication

  • Basic JWT Authentication

cinematix's People

Contributors

kryanbeane avatar

Watchers

avatar

cinematix's Issues

[IMPROVEMENT] Fill out dead pages

Describe the change/improvement you'd like
There are some hanging buttons left from the react work that need attached pages. Implementation is quick and easy

React.js Labs

To Do:

  • Complete React.js Labs

How:

  • n/a

Done:

  • Intro to React
  • Movie App Lab 1
  • Movie App Lab 2
  • Movie App Lab 3
  • Movie App Lab 4

[MINI-EPIC] View 1: People

Describe the solution you'd like
A new view with accompanying routes, endpoints and as-needed storybook support for new components for showing People (Actors & Actresses) and information on people. This will include a parameterized URL for individual people pages.

Additional context
Add any other context or screenshots about the feature request here.

Tasks

  • People view components
  • Storybook
  • People API calls
  • People page
  • People details page
  • Menu button for people

[MINI-EPIC] View 3: Companies

Describe the solution you'd like
A new view with accompanying routes, endpoints and as-needed storybook support for new components for showing Film Companies and information on them. This will include a parameterized URL for individual company pages.

Additional context
Add any other context or screenshots about the feature request here.

[STORYBOOK] People view stories

List components to add storybook support to

  • Header Person
  • Person Card
  • Person Details
  • Person List

Additional context
Add any other context here

[MINI-EPIC] View 2: TV Shows

Describe the solution you'd like
A new view with accompanying routes, endpoints and as-needed storybook support for new components for showing TV Shows and information on them. This will include a parameterized URL for individual tv show pages.

Additional context
Add any other context or screenshots about the feature request here.

Tasks

  • Show view components
  • Storybook
  • Show API calls
  • Shows page
  • Tv Show details page
  • Menu button for Shows

[FEATURE] Web Form based Searching

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
The ability to search for movies, actors, tv shows, etc... based on criteria submitted on a web form. Make use of appropriate controls like menus and checkboxes

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[FEATURE] Movie/TV Credits for People Details

Is your feature request related to a problem? Please describe.
Initial attempts to add movie credits were not successful. Better to come back after making more progress and add this

Describe the solution you'd like
When viewing people's details, it would be nice to see an image list containing movie credits and one containing tv credits. Maybe a carousel type interface or just a scrollable horizontal view of some sort

Describe alternatives you've considered
n/a

Additional context
Stemmed from this issue

[BUG] Invariant failed bug with storybook

Describe the bug
MovieCard, MovieHeader and Header storybooks are throwing an error similar to the following:
Invariant failed: You should not use <withRouter(HeaderMovieList) /> outside a <Router>

To Reproduce
Steps to reproduce the behaviour:

  1. Launch storybook and view component errors

Expected behaviour
Storybook components to display correctly

Screenshots
n/a

Additional context
n/a

[BUG] Fix movie reviews

Describe the bug
Movie reviews are currently not working and are displaying a blank page when navigated to

To Reproduce
Steps to reproduce the behavior:

  1. Click on any movie's MORE INFO... button
  2. See errors in console

Expected behavior
Movie reviews display to user

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[IMPROVEMENT] Update README

Describe the change/improvement you'd like
Update the README to match the requirements for assignments 1 & 2

Describe alternatives you've considered
N/A

Additional context
N/A

[FEATURE] 3rd Party Authentication

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Implement some kind of authentication, maybe firebase, to authenticate sessions w

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[FEATURE] Landing page

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Landing page including carousel, maybe some info about the site, look on TMDB for some API data we can get and put in

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[FEATURE] Implement Pagination

Is your feature request related to a problem? Please describe.
The website does not currently let you view all movies

Describe the solution you'd like
To be able to view maybe a set number of movies, like 20 per page, and click through to subsequent pages to view more movies.

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[FEATURE] Remove from playlist / favourites buttons

Is your feature request related to a problem? Please describe.
Favourites can not currently be removed

Describe the solution you'd like
A ternary check to check if the page is upcoming or the home page. If it's on the home page check if the movie is in favourites. If true display the add button and if false display the remove button. Same for upcoming but with playlist

Describe alternatives you've considered
None as of yet

Additional context
Add any other context or screenshots about the feature request here.

Done

  • Remove from favorites
  • Remove from playlist
  • Test test test

[IMPROVEMENT] Move Person Info to Details Component

Describe the change/improvement you'd like
I accidentally implemented the card for personal info and pictures into the person page template instead of the person details component. Fix this 👯‍♂️

Describe alternatives you've considered
N/A

Additional context
N/A

[FEATURE] Add Sorting

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Add filtering/sorting to API calls

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
See these docs

Node.js Labs

To Do:

  • Complete Node.js Labs

How:

  • n/a

Done:

  • Finish all node labs

[IMPROVEMENT] Generalise components to templates

Describe the change/improvement you'd like
Since 3 new views will be added, they will all require similar component trees as the movie pages. Instead of duplicating code three more times, it would be better to create template components - similarly to how templateMoviePage and templateMovieListPage are currently working.

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[IMPROVEMENT] Minimise Bundle Size of Imports

Describe the change/improvement you'd like
Follow this guide on minimising bundle size for imports

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Initial Lab Work

To Do:

  • Complete Javascript Fundamentals lab
  • Complete The Web Browser lab

How:

  • n/a

Done:

  • Finished JS Fundamentals
  • Finished The Web Browser

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.