Skip to content

A React-native + GraphQL app that will put the world of cinema right in your wands.

Notifications You must be signed in to change notification settings

steniowagner/cine-tasty-mobile

Repository files navigation

Cine-Tasty

If you want to take a look on all screens of the App, they are here.

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.

🚧 This project is not finished 🚧

This project is still under development, and you can check the Roadmap of planned features here.

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

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

Get the trending Actors/Actresses

Get trending actors and actresses.

_ _ _

You can check how this flow behaves here

Search for an Actor/Actress

Search for actors/actresses by name.

_

You can check how this flow behaves here

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

Get latest news

Get the latest news about movies, tv-shows and cinema, filtering by language (you can find the available languages here

| |

You can check how this flow behaves here

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.

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.

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 to have the server up and running.

2 - With the server up and running, go to the /.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 - 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.

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!