Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
130 views

React-Native Code Test

The document outlines requirements for a movie application built with React Native including: - Using Typescript, React Navigation, Axios/RxJS for APIs, Redux/Saga for state management, and AsyncStorage/react-native-keychain for data storage. - Components should be reusable, include loading/error states, and use animations. API calls should be asynchronous. It also provides sample API endpoints from The Movie DB for popular, top rated, and search movies. Finally, it lists questions around authentication, application structure, search functionality, and user profiles.

Uploaded by

Yayan Artha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
130 views

React-Native Code Test

The document outlines requirements for a movie application built with React Native including: - Using Typescript, React Navigation, Axios/RxJS for APIs, Redux/Saga for state management, and AsyncStorage/react-native-keychain for data storage. - Components should be reusable, include loading/error states, and use animations. API calls should be asynchronous. It also provides sample API endpoints from The Movie DB for popular, top rated, and search movies. Finally, it lists questions around authentication, application structure, search functionality, and user profiles.

Uploaded by

Yayan Artha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Requirements

Source codes should send to : ​thihaaung@codigo.co


For more question : +959263655003

Candidate should be follow the requirements


● Use Typescript (optional)
● Use navigation for React Navigation
● Use Axios or ajax from RxJS for API call.
● Use redux-saga or redux-observable for asynchronous
middleware side effect
● Use React-redux and Redux for state container
● Use AsyncStorage to store user preference data.
● Use react-native-keychain or react-native-config to store
confidential data eg : (BaseUrl , some token or etc.​.
● All components should be reusable.
● Use HOC component for API callback state. (Show Loading, Show
Error, Show Data)
● Use animations for smooth UX.
● All api call should be background asynchronous(saga or redux
observable)
● Component should use react hook.
API documentations

For API key =>


https://www.themoviedb.org

1. Popular Api =>


https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&
language=en-US&page=1
2. Latest Api =>
https://api.themoviedb.org/3/movie/top_rated?api_key=xxxxxx&l
anguage=en-US&page=1
3. Search Api =>
https://api.themoviedb.org/3/search/movie?api_key=xxxxxxxx&l
anguage=en-US&query=power%20ranger&page=1&include_ad
ult=false
Question

1. Authentication

● Email validation.(email rule)


● Password validation.(length 6 or 6 above)
● Click SignUp button and check validation, all are valid go another
screen. Shouldn’t go back authentication stack mean that stack
should be finish.
● If validation fails change input text color and underline color.
● Add Skip button in design and go application page as guest mode.
○ Note: save user information will store in redux when sign in
success.
2. Application Stack
Design should be follow the diagram : can use your idea to better UI & UX

● Use bottom navigation for app stack


● Use moviedb api for provide data.
● All api call should be background async(saga or redux observable)
and manipulate with redux store.
● Use HOC for api state management for home screen.
● Animation should be left to right screen components.(android platform
should be smooth).
● Search icon will contain in other bottom navigation tab.
3. Search

● Search modal screen will appear when user click search button from
any navigation tab. That screen should appear like that modal
transaction.
● Use API to search and use your design idea for each movie row.
Should be grid.
● Should wait user typing for delay 1.5 seconds to call search API.
● Grid row animation left to right.
4. Profile

● If user is login show user information from redux store. If not show
Login button to go sign up page.
● When user click to logout button should remove all data from redux
store and asyncstorage. And then go back sign up page.

You might also like