How to Run ?

Just open terminal or cmd in root and do yarn install and run yarn run android.

Coding Challenge - React Native

Objective

Build an iOS and Android application using React Native + TypeScript that demonstrates your skills in design, data and state management, component architecture, and TypeScript.

Task

Create a simple mobile app that displays a list of items retrieved from a public API of your choosing. The app should include the following features:

1. Display a list of items with at least three pieces of information (e.g., title, description, and an image) per item.
2. Implement a search bar to filter the items based on their attributes (e.g., searching by title).
3. Allow the user to click on an item to view more details.
4. Implement pagination to load more items as the user scrolls.
5. Allow the user to create a new item that gets added to the list. If the API does not support adding new items, you can choose to do it locally. The form used to create the item should include more than 2 unique types of fields and each field as well as the entire form should contain proper validation.

Requirements

• Use React Native with TypeScript.
• Use React Navigation for navigation between screens.
• Use React Query for data fetching.
• Use React Hook Form for any forms.
• Use appropriate TypeScript typings for your components and data structures.
• Design and layout should be responsive and visually appealing.
• The app should contain error handling and display meaningful error messages to the user.
• The code should be well-structured, well-documented, and maintainable, as if written for production.
• You can use any UI component library of your choosing (e.g. React Native Paper, NativeBase/gluestack etc)

Bonus Points (optional)

You can earn extra points by adding the following:

• Unit tests (e.g., using Jest and React Testing Library).
• State management (e.g. using Context API, Redux, or Zustand) for managing app-wide data (e.g. user authentication, or theme).
• Any additional features you think will enhance the user experience.

Grading Rubric

Please review the following criteria for grading:

UI/UX (10 points)

• The app is visually appealing, user-friendly, and responsive.
• Navigation is intuitive, and the user interface is well-designed.

Data and State Management (15 points)

• React Query is correctly implemented for data fetching and caching.
• Local state management is effective and follows best practices.
• Error handling and data synchronization are implemented.

Error Handling (5 points)

• Errors are gracefully handled, and error messages are displayed to the user when necessary.

TypeScript (10 points)

• TypeScript is effectively used throughout the project, including type checking for components, props, and data structures.
• Types are appropriately defined and used to improve code quality.

Overall Design and Structure (15 points)

• Code is well-structured, organized, and follows best practices.
• Components are reusable and modular.
• Proper separation of concerns and clean code principles are followed.

Functionality (20 points)

• The app includes all required features: list display, search, item details, pagination, and creating new item.
• Bonus features, if implemented, work correctly.

Testing (5 points, bonus)

• Unit tests are written and cover critical components and functionality.

State Management using Zustand (15 points, bonus)

• State management library is set up effectively and well architected

Bonus Features (5 points, bonus)

• Any additional features are well-implemented and enhance the user experience.

Submission

Please fork this repository and submit your code as a pull request. Include instructions on how to run the app and any additional information about your project with a clear README (as it would be written for production). The grading will be based on the code submitted in the pull request.

Good luck with the challenge!

---