React Native Assignment: Mobile Application Development Task
Objective: To evaluate the candidate's understanding of React Native, Firebase authentication, and API integration with features such as pagination, lazy loading, and
navigation.
Assignment Overview
The candidate needs to create a mobile application with the following features:
1. Firebase Authentication :
Implement email/password-based login and registration using Firebase Authentication.
Include error handling for scenarios like invalid email, weak password, and existing accounts.
2. API Integration :
Listing Page: Fetch and display a paginated list of items from an API.
Details Page: When an item is clicked, navigate to a new screen showing detailed information about the item.
Infinite Scrolling: Load more items when the user scrolls near the bottom of the listing page.
Pages to Include in the Application
1. Login Page
Fields: Email and Password
Buttons: "Login" and "Register"
Use Firebase Authentication to handle login.
On successful login, navigate to the Listing Page.
2. Register Page
Fields: Email, Password, and Confirm Password
Buttons: "Register" and "Go Back to Login"
Use Firebase Authentication to handle new user registration.
Navigate back to the Login Page on successful registration.
3. Listing Page
Display a list of items fetched from an API.
Initially load the first few items (e.g., 10).
When the user scrolls near the bottom, fetch the next batch of items and append them to the list (infinite scrolling).
Each item should display:
Title
Thumbnail image
Short description
Clicking on an item should navigate to the Details Page.
4. Details Page
Display detailed information about the item selected from the listing page.
Include:
Title
Full description
Image
Button to go back to the Listing Page.
5. Language Settings Page (Optional - Standout Point)
Add a page to allow users to change the app language.
Use a localization library like react-native-i18n or react-intl to implement multilingual support.
Suggested APIs for the Assignment
1. Listing API : JSONPlaceholder - /posts
Base URL: https://jsonplaceholder.typicode.com/posts
Description: Returns a list of posts with fields such as id , title , and body .
2. Details API : JSONPlaceholder - /posts/{id}
Base URL: https://jsonplaceholder.typicode.com/posts/{id}
Description: Returns details of a post with fields such as id , title , and body .
3. Image API: JSONPlaceholder - /photos
Base URL: https://jsonplaceholder.typicode.com/photos
Description: Fetch images to pair with posts using the id field.
Technical Requirements
1. Firebase Setup :
Create a Firebase project and enable Authentication with Email/Password.
2. React Navigation:
Use @react-navigation/native for navigating between pages (e.g., Login, Register, Listing, and Details).
3. State Management :
Use React's useState and useEffect hooks for managing state.
Optionally, candidates can use Redux.
4. API Calls:
Use fetch or axios to call APIs.
Include loading states and error handling for API responses.
5. Styling:
Use any styling approach ( StyleSheet , Tailwind , or libraries like react-native-paper ).
6. Pagination:
Implement lazy loading in the Listing Page using infinite scrolling.
7. Multilingual Support (Optional Standout Point):
Add multiple languages (e.g., English and Spanish) using a localization library.
Include a settings page to switch between languages.
8. Pull to Refresh:
Implement "Pull to Refresh" functionality on the Listing Page to reload the first set of items.
9. Persistent Login :
Store the user's login session locally using libraries like AsyncStorage or SecureStore so the user remains logged in after restarting the app.
Standout Points (Optional)
To make the application stand out, candidates can implement the following:
1. Persistent Login :
Store the user's login session locally so they remain logged in after closing and reopening the app.
2. Multilingual Support:
Make the application multilingual and include a page to change the app language.
3. Pull to Refresh:
Add "Pull to Refresh" functionality on the Listing Page to reload the first set of items when the user pulls down the list.
Deliverables
1. A GitHub repository with the complete code.
2. A README.md file with:
Setup instructions
Firebase configuration steps
How to run the app
A brief explanation of the app structure and standout points.
3. A screen-recorded preview of the application demonstrating:
Login and Registration
Listing Page with infinite scrolling
Details Page
Persistent login functionality
Multilingual functionality (if implemented)
Pull to Refresh functionality (if implemented).
Evaluation Criteria
1. Functionality:
Firebase authentication works as expected.
API integration, pagination, and infinite scrolling are implemented correctly.
Navigation between pages is smooth.
2. Code Quality :
Clean and readable code with proper comments.
Logical folder and file structure.
3. User Experience:
Smooth scrolling and intuitive UI design.
Proper error messages and loading indicators.
4. Standout Points:
Bonus points for implementing persistent login, multilingual support, and pull-to-refresh functionality.
Helpful Links for the Candidate
Firebase Authentication: Firebase Authentication Docs
JSONPlaceholder API Docs: JSONPlaceholder
React Native Setup: React Native Docs
React Navigation: React Navigation Docs
Multilingual Libraries:
react-native-i18n
react-intl
Deadline
Specify a realistic deadline (e.g., 7 days) to complete and submit the assignment.
