React Native app for searching Netflix content React Native Netflix app using the uNogsNG API from rapidapi.com
This project was created with the Expo cli. More on installing the Expo cli from the React Native docs. Expo official docs can be found here.
This React Native app is part of a school/study project. It uses an API, which is part of the overall project, for user authentication and fetching userdata. The API can be found here on this Github. The app focusses on presenting the user which Netflix content will be deleted and which new content has been added. For this, the app uses a third party API from Rapidapi to search and fetch all the content. The user is able to query the API through this app. Furthermore, the user is able to save Netflix content items to a list of favorites which is presented in the app.
This is just a project for my study. Therefore teachers/instructors will receive a seperate file containing all API-keys and will not need to go through the section: Set-up guide.
Open a terminal and run:
This should return a version number, something like:
If you do not yet have Node installed you can do so by going to: https://nodejs.org/en/ or if you are on a Mac and use Homebrew run:
brew install node
After installation run the
node -v command again and verify that Node is installed correct.
This app uses the unogsNG API. For this you will need to sign up with Rapidapi and create a API-key. This key must be set in the environment variables.
.env file in the root folder and enter all environment variables as listed in the
env-example.txt which you find in the root folder.
CONNECTION_STRINGin both the API and Webapp use the same address and port. A suggested port is given in the
ASSET_URLwhich is used to fetch and set the user images/avatar. The
ASSET_URLdoes NOT end with
localhostpart of both CONNECTION_STRING and ASSET_URL are replaced by IP:
10.0.2.2. Otherwise Android emulators running on the same machine are unable to connect to local API's/servers.
Clone the project to your designated folder and run
All the project dependencies will be installed and a
node_modules folder is created.
After setting the environment variables and having run the
npm install command, start the app by running the command:
npm run start:dev
A informative message now appears in your terminal window indicating the application is running. This will automatically open a browser page, if not, the address can be selected as shown below.
In the browser a page now be visible which allows you to track any logs or errors from the running application. The logs and/or errors are also displayed in your terminal window.
ito open the app on the iOS emulator. Make sure that the
.envconnection string points to
Android emulators need a different address to connect with a local running API/server.
control + ccommand in the terminal
npm run start:dev
The login page for the app should now be open:
! You can either sign up with a fake or real email address. If an actual email address is used, a notification will be send informing the user of the succesful sign up. This must be configured correctly using the project API with the SaaS transactional email sending set up. (See the included README in the API Github repo)
In the project directory, you can run:
Runs a linting check using the eslint. A result output is shown in the terminal
This being a study project means many improvements can be made. Pull requests are welcome! For now the app is ready to be used and is up and running on a private domain, accessible for teachers, instructors and other students.
Source Code: https://github.com/LauRuns/rn-netflix
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.
Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.
Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.
Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.