backdrop

Responsive design:

React-native uses flexbox for its layout system which makes responsiveness a little bit easy. With flexbox and the Dimensions API react-native provides, we can set breakpoints for different screens sizes and have different layouts for each breakpoint. We can also use the Platform API for platform-specific components/views.

Server/client state:

• To handle server state, react-query would make a good choice because it handles in-memory caching, retries, etc. Context API, Recoil, and Redux are some good solutions to client state management that I’ve worked with
• Client-side persistence/Data syncing: Depending on the requirements, we can have an in-memory or a persistent cache(as implemented in the test app I submitted). In the case of the backdrop app, a persistent cache would be used to store data such as token, refresh token, and user data which would be synced with the server any time a change is made eg profile update, new liked item, etc. For the photos listing, since the data is interacted with by different users simultaneously, it would make sense to sync the client state with the server state on events such as a reload, refresh, like/unlike item, comment, etc.

Optimization/Architecture:

1. Low/High image resolutions: loading of images is an expensive task and can slow down the app UI rendering, especially on slower network connections, creating low and high-resolution versions of the image can improve the performance and save bandwidth since we’d only render the high-resolution images when we need to and low resolution everywhere else(eg search page, user list)
2. Implement pagination on the API so data can be fetched in smaller quantities to improve response time and perf in general
3. Caching of images would also improve the performance of the app