Skip to content

Instantly share code, notes, and snippets.

@pramanikshreya

pramanikshreya/React developer exercise.md

Last active June 28, 2023 16:22
Show Gist options
  • Save pramanikshreya/3168c480f01e7b40bdda8ea59f027ad0 to your computer and use it in GitHub Desktop.
Save pramanikshreya/3168c480f01e7b40bdda8ea59f027ad0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
React developer exercise.md

React Native developer exercise

Prerequisites

You should be familiar with JavaScript (ES6), React, React Native, Git, GitHub and Figma.

Getting Started

This tutorial assumes you have a React Native local development environment set up on your machine, with the following components at minimum:

  1. Node.js (16.x or current LTS) & NPM
  2. Android SDK/Xcode
  3. Android/iOS device or emulator/simulator
  4. Choice of IDE/Editor

You can follow instructions here to set up your local development environment: https://reactnative.dev/docs/environment-setup?guide=native

Do not use expo in your submissions.

All submissions have to be made as a private Github repository shared with the usernames: pramanikshreya and soham2008xyz

Requirements

You have to develop a hybrid mobile application, as per the screens shared here: https://www.figma.com/file/yknUchK8Is9LntcfcITZz5/React-Native-Developer-Exercise?node-id=1%3A405&t=xS8BrsThazjgw7OL-1

There are two primary screens in the application: the Dashboard screen & the Product Details screen.

The Dashboard screen has a bottom navigation bar that implements navigation tabs. You are to implement only the first tab contents as per the Figma mockup.

The Dashboard screen also has navigation pills at the top that change the dashboard contents from Makeup/Skincare & vice-versa, depending on which pill is currently selected.

Products on the Dashboard screen are to be loaded from a JSON API, depending on the currently active selection (Makeup/Skincare).

Selecting a product by clicking on its card on the Dashboard screen takes us to the Product Details screen. The current product data on the Product Details screen is to be fetched from a JSON API.

The product details on the Product Details screen can be loaded from dummy/sample data or hard-coded as such.

There should be back-and-forth navigation implemented between the Dashboard screen and the Product Details screen. When navigating back to the Dashboard screen from the Product Details screen, the previous navigation pills selection (Makeup/Skincare) should be retained.

UI

You are free to use any UI framework or library of your choice. We do not deduct any credits for use of a UI framework/library, or deduct any credits for not using the same.

Note that you are not required to build a mobile responsive application (working across various screen sizes/orientations for mobile/tablet viewports), although if you build one, we will be assigning extra credits for that.

Libraries & Frameworks

You are free to use any libraries, frameworks & tools (e.g. Redux, React Native Navigation, etc.) which you think will be useful to build this application. No credits are deducted for use of libraries.

Extra Credits

  • Implement pagination on scroll for products on the Dashboard screen, showing 8 products at a time.
  • Implement search functionality for products on the Dashboard screen.
  • Implement other screens from the application (e.g. User Profile).
  • Implement a sign-in workflow, prior to the Dashboard screen using social login (Google/Apple/Facebook).
  • Implement favourite/like/heart functionality for products on the Dashboard screen.
  • Surprise us. 😃
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment