https://github.com/steniowagner/cine-tasty-mobile
A React-native + GraphQL app that will put the world of cinema right in your wands.
https://github.com/steniowagner/cine-tasty-mobile
apollo-client graphql javascript react react-native typescript
Last synced: over 1 year ago
JSON representation
A React-native + GraphQL app that will put the world of cinema right in your wands.
- Host: GitHub
- URL: https://github.com/steniowagner/cine-tasty-mobile
- Owner: steniowagner
- Created: 2020-03-05T01:16:18.000Z (over 6 years ago)
- Default Branch: development
- Last Pushed: 2024-05-16T21:46:54.000Z (about 2 years ago)
- Last Synced: 2025-03-24T05:01:51.596Z (over 1 year ago)
- Topics: apollo-client, graphql, javascript, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 7.68 MB
- Stars: 16
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cine-Tasty
If you want to take a look on all screens of the App, they are [here](https://drive.google.com/drive/folders/1QBRMz2XTn9lfqmGEoJ1UqVNI8EbLgy4W?usp=sharing).
## About this Project
The idea of the App is:
_"Access the latest trends about movies, tv shows and cinema in one place"._
This project consists of a react-native app that queries data from the [cine-tasty-server](https://github.com/steniowagner/cine-tasty-server).
## 🚧 This project is not finished 🚧
This project is still under development, and you can check the Roadmap of planned features [here](https://github.com/steniowagner/cine-tasty-mobile/blob/development/README.md#roadmap---future-features).
## Functionalities
### Get details of a Movie
Get the details of a certain Movie. You'll be able to see things like budget, revenue, seasons, crew, cast and more.
_
_
_
_
You can check how this flow behaves [here](https://drive.google.com/file/d/1tg-QMSW1PTyblDW302W77k9UclG4Zy_C/view?usp=drive_link)
### Get details of a TV-Show
Get the details of a certain tv-show. Here, you'll be able to see things like seasons, crew, cast and more.
_
_
_
_
_
_
You can check how this flow behaves [here](https://drive.google.com/file/d/1XR-wj01HLS1Rec5msY3TwjQl44ygn35N/view?usp=drive_link)
### Get the trending Actors/Actresses
Get trending actors and actresses.
_
_
_
You can check how this flow behaves [here](https://drive.google.com/file/d/1iOI4d4GZY-O1O3qNThlJ3P13VufTpZ-r/view?usp=drive_link)
### Search for an Actor/Actress
Search for actors/actresses by name.
_
You can check how this flow behaves [here](https://drive.google.com/file/d/1TbFrRkJ88LV1cTvGdc0CJ6RsthOzQzSZ/view?usp=drive_link)
### Answer quizes
Answer quizes about cinema. You can also add filter about the level (easy, medium, hard, mixed) and the type (multiple-choice, true/false or mixed) of the questions, as well as select the category of the questions (movies, tv-shows or both).
_
_
_
_
_
_
_
You can check how this flow behaves [here](https://drive.google.com/file/d/1qJTwyv5dWGTdfYUEg9sqnOD0ulR84dwn/view?usp=drive_link)
### Get latest news
Get the latest news about movies, tv-shows and cinema, filtering by language (you can find the available languages [here](https://github.com/steniowagner/cine-tasty-mobile/blob/development/src/components/stacks/news/screens/news/components/languages-filter-modal/language-filter-list/filter-languages/languages.ts#L12)
| 
|
You can check how this flow behaves [here](https://drive.google.com/file/d/1WHj10zvgiwMkO97VxhoOtGi0RytXUbrc/view?usp=drive_link)
## Getting Started
### Prerequisites
To run this project in the development mode, you'll need to have a basic environment to run a React-Native App, that can be found [here](https://facebook.github.io/react-native/docs/getting-started).
Also, you'll need to the server running locally on your machine with the mock data. You can find the server and all the instructions to start the server [here](https://github.com/steniowagner/cine-tasty-server).
### Installing
**Cloning the Repository**
```
$ git clone https://github.com/steniowagner/cine-tasty-server
$ cd cine-tasty-mobile
```
> For sake of simplicify, I'll be using npm as the package-manager for this tutorial. But you can use your favorite one as well.
**Installing dependencies**
```
$ npm install
```
### Connecting the App with the Server
1 - Follow the instructions on the [cine-tasty-server](https://github.com/steniowagner/cine-tasty-server) to have the server up and running.
2 - With the server up and running, go to the [/.env.development](https://github.com/steniowagner/mindCast/blob/master/.env.development) file and edit the SERVER_URL value for the IP of your machine (you can have some issues with _localhost_ if you're running on an android physical device, but you can use localhost safely on iOS).
It should looks like this:
SERVER_URL=http://**_IP_OF_YOUR_MACHINE_**:
*or*
SERVER_URL=http://localhost:
### Running
With all dependencies installed and the environment properly configured, you can now run the app:
Android
```
$ npm run android:run
```
iOS
```
$ npm run ios:run
```
### Testing
The tests are divided in `integration` and `unit`. The unit-tests files are the `.test.ts` files and the integration-test files are the `.spec.ts`.
To only run the unit-tests:
```
$ npm run test:unit
```
To only run the integration-tests:
```
$ npm run test:integration
```
To run all tests:
```
$ npm run test
```
To run all tests in watch mode:
```
$ npm run test:watch
```
To run all tests with code-coverage metrics:
```
$ npm run test:coverage
```
### Download the GraphQL-schema from the server
In order to type all the GraphQL operations performed client, we have to download all the data required to perform these operations on the server. To do this, we download the schema from the server, and we'll use it to create the types in the next step.
```
$ npm run schema:download
```
### Generate Typescript types based on the downloaded GraphQL-schema
Now, with the schema in place, we can generate the typescript types, so we can better-type our graohql operations.
```
$ npm run schema:generate
```
This command will output the generated results in this file: [src/types/schema.ts](https://github.com/steniowagner/cine-tasty-mobile/blob/development/src/types/schema.ts) - but you can change to your desired destination by chaning the `schema:generate` script.
### Roadmap - future features
Even with all the interactions with the datasources in place, I would like to add more complexity to this application. At the moment, I'm thinking about the following:
### Functional features
- Add authentication
- Allow the user to create and manage lists of favorite movies/tv-shows/actors/actresses
- Allow the user to create and manage lists of movies/tv-shows to watch-later
- Add reviews of movies and tv-shows
- Keep a track of the results in the questionnaires
- Create a ranking of the scores in the questionnaires
### Non-functional features
- Analytics
- Continuous deployment to the stores using fastlane
## Why create this project?
This project is part of my personal portfolio. So, I would be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!
Email-me: stenio.wagner1@gmail.com
Connect with me at [LinkedIn](https://www.linkedin.com/in/steniowagner/).
Also, you can use this Project as you wish, be for study, be for make improvements or earn money with it!
It's free!
## Contributing
You can send how many PR's do you want, I'll be glad to analyse and accept them!
Thank you!