Jean Test Mobile

JeanTest is a React Native invoicing mobile application. It is used by business owners to create and manage invoices with their customers.

This repository contains the skeleton of JeanTest & instructions for this React Native hiring test.

Mission

Your goal is to build a feature-rich prototype of JeanTest that allows to:

• List & quickly find invoices
• Create new invoices
• Manage existing invoices
  • Move them from drafts to finalized invoices
  • Mark them as paid
  • Update them
  • Delete them

For this, you'll be leveraging an existing REST HTTP API hosted at https://jean-test-api.herokuapp.com/.

The API is documented with OpenAPI and has documentation available here. Each API call must be authenticated using an X-SESSION header with the provided token.

What's expected

Your exercise submission should:

• Have the essential features listed above while maintaining an intuitive, performant, and maintainable codebase.
• Follow the standard coding practices and include testing, just as you would when developing a real-world application with teammates.
• Leverage existing UI components provided in src/ui by Tamagui to focus on composing screens and features. While you're welcome to add a new UI library, you'll need to justify such an addition.
• Use pre-installed dependencies or add new ones if you have a legitimate use of them.
• Create a clear README with comprehensive instructions for setup, usage, additional features, etc.

The interview

To prepare the interview, please take the time to identify advanced features that could be added in the future (even if the API currently does not support it!).

For each feature/tech improvement, we want to understand:

• What led you to think about this
• Why it would be useful
• What might be missing for you to implement it (API limitations, technical constraints)

Submit your application

To submit your code, create a private GitHub repository with your application's source code.

Invite the following GitHub users to it: @adrien-pennylane @keShraa @Lecsar @michaelvitello

Getting started

To get started, clone this repository & run the bin/setup bash script which will install dependencies & take care of autogenerated files.

git clone git@github.com:pennylane-hq/jean_test_mobile.git

cd jean_test_mobile

bin/setup

yarn start

yarn ios

To start sending authenticated requests to the API, patch the API_TOKEN in src/App.tsx.

Data model

The REST API contains four resources: customers, products, invoices and invoice lines.

Side notes:

• Invoices contain multiple invoice lines.
• Invoice lines are accessed via their invoice. To update them, use the relevant invoice API endpoints.

API client

An API client based on openapi-client-axios is available through a React Context in src/api/index.tsx. The provider is mounted in src/App.tsx & the context can be consumed using the useApi hook from src/api/index.tsx.

const MyComponent = () => {
  const apiClient = useApi();

  useEffect(() => {
    /**
     * Get the first 50 invoices of customer 3
     */
    api
      .getInvoices({
        page: 1,
        per_page: 50,
        filter: JSON.stringify([
          {field: 'customer_id', operator: 'eq', value: 3},
        ]),
      })
      .then(res => {
        // Do something...
      });
  }, [apiClient]);

  return null;
};

Good luck & Happy coding!