0% found this document useful (0 votes)
16 views3 pages

React Native To-Do App Assignment

Uploaded by

Anshuman Kumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views3 pages

React Native To-Do App Assignment

Uploaded by

Anshuman Kumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React Native Intern Assignment

Objective
Create a To-Do App using React Native and Firebase with Authentication and Profile features.

Requirements

Core Features
●​ Authentication

○​ Use Firebase Authentication with email and password.


○​ Implement user registration and login screens.
○​ Maintain a user session after login using persistent auth.

●​ Navigation

○​ Two bottom tabs:

■​ To-Do List
■​ Profile

●​ To-Do List Tab

○​ Add new tasks (text input).


○​ Mark tasks as complete/incomplete.
○​ Delete tasks.
○​ Store tasks per user using Firebase Firestore.

●​ Profile Tab

○​ Display the user’s username, email, and profile image.


○​ Allow users to change their username and upload a profile photo using the image
picker.
○​ Store the uploaded image in Firebase Storage and show it in the profile screen.
○​ Include a Logout button.

UI Mockup Reference (Not Binding)


[Link]
&t=3VnUqIJyvrGcoFTm-1
General Instructions

• README File:
●​ Include a detailed README in the root of the project.

●​ The README should cover:

○​ Setup instructions (e.g., installing dependencies, configuring environment variables,


Firebase setup).
○​ How to run the project locally using Expo or React Native CLI.
○​ A brief overview of the tech stack and project structure.

• Video Demonstration:
●​ Record a video showing the working application.

●​ The video must:

○​ Demonstrate full functionality: login, task creation, image upload, logout, etc.
○​ Show proper error handling (e.g., empty task input, image upload failures, login
errors).
○​ Confirm the app is working end-to-end.

●​ Share the video via a Google Drive link and make sure the link is
accessible to reviewer failure in providing a working link will result in
disqualification.

●​ Ensure the video clearly demonstrates functionality; failure to show a working app will
result in disqualification.

• GitHub Repository:
●​ Provide a single GitHub repository for the project.
●​ Organize code in a clear structure.
●​ Ensure the repository is public or accessible to reviewers, failure to access
the code will result in disqualification.

• Deployment:
●​ Deployment is not required; focus on local functionality with Firebase integration.

Evaluation Criteria
Your submission will be assessed based on the following:

●​ Proper integration of Firebase Authentication, Firestore, and Storage.


●​ Clean implementation of To-Do list functionality and profile management.
●​ Smooth navigation and responsive, user-friendly UI.
●​ Proper error handling and edge case management.
●​ Clean, organized, and modular code structure.
●​ Quality and clarity of the README and video demonstration.

Additional Notes
●​ The app must be fully functional with no critical bugs.
●​ Focus on code quality, readability, and best practices in React Native.
●​ This is an individual assignment; collaboration is not allowed.

Submission

●​ The GitHub repository link containing your React Native project.


●​ The Google Drive link to your video demonstration.
●​ Ensure both links are accessible to the reviewer.

Common questions

Powered by AI

The document suggests ensuring quality and functionality by requiring a video demonstration that shows the app's full functionality—such as login, task creation, image upload, and logout—and proper error handling like managing empty task inputs or login errors. Additionally, it specifies that clean, organized, and modular code is critical, along with proper integration of Firebase services, responsive UI, and thorough README documentation .

Constraints for task management include adding tasks with text input, marking them as complete/incomplete, and deleting them, all while ensuring they are stored per user in Firebase Firestore. For profile management, the constraints include displaying username, email, and profile image, allowing username changes, enabling profile photo uploads to Firebase Storage, and ensuring these changes reflect accurately on the profile screen. Both modules should support Firebase's seamless integration and efficient data management .

A detailed README file is crucial as it guides users through setup instructions—such as installing dependencies and configuring environment variables—and provides clarity on running the project. It also offers an overview of the tech stack and project structure, facilitating easy onboarding for new developers or reviewers. This thorough documentation ensures the project is accessible and understandable, improving usability and maintainability .

Effective management includes breaking down tasks into smaller, manageable units, focusing on modularity in code structure, and systematically testing each feature. Utilizing Agile methodologies for iterative development and continuous integration can help address complex features progressively. Documentation and frequent reviews ensure that the development process is aligned with the specifications and quality standards .

The critical features include the implementation of Firebase Authentication with email and password, creating screens for user registration and login, maintaining user session persistency, and a navigation system consisting of two tabs: To-Do List and Profile. For the To-Do List tab, the app must support adding, marking as complete/incomplete, and deleting tasks, with all tasks being stored per user in Firebase Firestore. For the Profile tab, the app must display the user's username, email, and profile image, allow username changes, and permit profile photo uploads that are stored in Firebase Storage, while also including a logout button .

Strategies include implementing client-side validations to check image size and format before uploading, using Firebase Storage to manage uploads, and providing user feedback during the process. Efficient error handling for upload failures and retries, optimizing network usage, and caching images for faster load times would enhance user experience and ensure smooth image management .

Potential challenges include effectively handling empty inputs for task creation, managing image upload failures due to size or network issues, and addressing authentication errors like incorrect password entries. Ensuring the app provides meaningful feedback to users during such errors without crashing requires diligent exception handling and user interface design that anticipates and smoothly manages such edge cases .

Though collaboration is forbidden, the document emphasizes open access by requiring the project repositories to be publicly accessible or reviewer-accessible on GitHub. It also mandates a video demonstration shared via Google Drive, ensuring all reviewers can access it. This open access ensures ease of reviewing while maintaining individual accountability .

Firebase plays a crucial role by providing Authentication, Firestore, and Storage services that enable secure user management, persistent session handling, task storage, and profile image management. Firebase Authentication ensures secure login and registration processes, Firestore handles task storage per user, and Firebase Storage manages profile images. This integration supports the application's backend functionality and data synchronization, aiding in the creation of a robust, scalable app .

The evaluation criteria focus on proper integration of Firebase services (Authentication, Firestore, and Storage), clean to-do list and profile management features, smooth navigation, and a responsive UI. Additional factors include error handling and edge case management, code quality (clean, organized, modular), and the clarity of the README and video demonstration. These criteria ensure the app is robust, user-friendly, and well-documented .

You might also like