This project contains of all the source code for my current personal project, The Open Movie DB clone.
This project will only contain the front-end code, the back-end code will be stored in a separate repository which can be found here
As part of the README file it will describe and explain the following sections:
- Purpose
- Core features
- Technologies used
- Getting started
- Reporting issues
- Feature requests
- Project information
The whole idea by this web application is to allow me to develop a PWA using some of the latest and best technologies around, some of which include React, Apollo, Graphql etc. However, while it is primarily for me to push my skills further it will also allow users to search for the very latest movies, tv shows, people and more all through a single web application.
As of the current version of the API, it is currently capable of performing the following tasks:
-
Search for Movies, TV Shows and Celebrities via a search bar
-
Search for Movies, TV Shows and Celebrities via individual categories like Popular, Airing Today, Upcoming etc
-
View individual Movies, TV Shows and celebrities
-
Filter through a celebrities backlog by media type (shows or movies or all) and department (Writing, Acting, Production etc).
-
Discover the latest Movies and TV Shows via an interactive sidebar. Users will be able to filter by rating, release date, genre, score, keywords and where to watch, this won't be available for Celebrities.
-
View content offline (Apollo InMemoryCache will store content in the cache once the user has visited it before. Later on the cache will be persisted, but for now it will be on a per session basis)
-
Switch between dark and light theme (Will be stored in Apollo cache, no custom React Provider/Context will be used)
- apollo-client
- @fortawesome/fontawesome-free
- @tailwindcss/line-clamp
- @tippy/react
- classnames
- font-awesome
- graphql
- prop-types
- react
- react-dom
- react-helmet
- react-router-dom
- react-scripts
- sass
- tailwindcss
- tippy.js
- workbox-build
- @storybook/addon-a11y
- @storybook/addon-actions
- @storybook/addon-docs
- @storybook/addon-knobs
- @storybook/addons
- @storybook/builder-webpack5
- @storybook/manager-webpack5
- @storybook/preset-create-react-app
- @storybook/react
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-storybook
- eslint-webpack-plugin
- prettier
- webpack
- autoprefixer
- postcss
- prettier-plugin-tailwindcss
-
Clone the project to your development environment by using
git clone https://github.com/AlexMachin1997/TheOpenMovieDB-React-Example.git -
Once the project is cloned be sure to install of the project's dependencies, this will install both core and development dependencies
-
With the project dependencies you can now run the project by using the
client:startcommand. NOTE: The GraphQL API which can be found here
If you find any problems while using the API, report them here, and I will address them as quick as I can.
If you would like to request features for future versions of the application again, please post them here. When posting ideas ensure the functionality is explained to provide any developers contributing to the project know what to implement.
If you would like to implement a feature in the issues list or refactor existing code (Without breaking existing functionality), feel free to form the repo and submit a PR detailing all the changes made.
Alex Machin
If you want to connect with me on my professional social network platforms feel free to use the links located below, but please don't abuse them.
The application is currently at version 0.1.0, with each feature added it will increment based on these guidelines
This project is licensed under the MIT License, for more details about the PWA refer to the LICENSE.md file located within the project.