React assignment

Created @November 15, 2022 6:51 PM

Tags

ReactJS assignments
Here we provide the instructions for developing a ReactJS applications, designed by the
Bipolar factory team, to test the proficiency of applicants for the ReactJS Frontend
Developer position(s):

Assignment 1 - Beginner: For applicants who have a good working knowledge of

React and have worked on / developed at least one React application

All applicants are required to submit the assignment based on their knowledge,
experience and confidence in ReactJS. We advice applicants to see the demo and
instructions for the assignments before deciding which one to submit.

Prerequisites
Knowledge of ReactJS (obviously), HTML, CSS, Bootstrap (optional, but will be
really helpful for the Assignment)

Knowledge of installing npm packages (both local & global)

Knowledge of creating React application using Create React App

Knowledge of fetching JSON data from a REST API endpoint

A Github account in order to share his/her code with us

Submission guidelines
Sharing the code
All applicants must share their code in one of the following ways:

Upload their code on their Github account by creating a public repository and
sharing the link via email.

React assignment 1
 Creating a zip file of their project folder (excluding the node_modules directory) and
either uploading it to a cloud service (sharing the link with us) or attaching it to an
email (if size < 20 MB).

Deploying the code for testing

All applicants are also required to deploy their assignment to a server or to any of the
static hosting service providers (link to help with deployment).

Deploying React apps with Vercel

For applicants who have no experience with deployments, please follow the instructions
below for deploying React apps with Vercel.

1. Create an account on Vercel Now (signup link)

2. Install the Zeit Now npm package globally: npm i -g now

3. Go to your project's root directory and build your react application: npm run build

4. Go into the build directory created in last step: cd build

5. Log into your vercel Now account (created in step 1) by following instructions
presented by running the command: now login

6. Deploy your application (you should be in the build directory of your app): now --name
<firstName>-<last-name> . For example, if a person's name is 'Pawan Samdani' he

should run this: now --name pawan-samdani

Assignment Details
The assignment is a frontend React applications with no backend development
required.
The idea of the assignments is to build a single page that displays the profile of 10
users (the data is obtained from an API endpoint). Each user's profile contains a avatar
picture, name, email, phone, address, website and company name.

API endpoint for users data

All 10 users profile data is to be downloaded from the following API endpoint:

React assignment 2
 Method: GET
URL: <https://jsonplaceholder.typicode.com/users>

The schema of the data received in the response is:

// Array of 10 users
[
{
id, // The user's id
username,
name,
email,
phone,
website,
address: {
street, // Address line 1
suite, // Address line 2
city,
zipcode
},
company: {
name, // The name of company where the user works
}
}
]

API endpoint for users' avatar pictures

You will be using Avatars by DiceBear. They provide a free HTTP API to create unique
avatar images based on any string we send as query parameter. Each string generates
a unique image. You will use the username to generate a unique avatar for each user.

The URL for the GET endpoint is:

<https://avatars.dicebear.com/v2/avataaars/{{username}>}.svg?options[mood][]=happy

The {{username}} in the URL is the placeholder for the user's username. It should be
dynamically replaced by the username received from the users API endpoint. For
example, if the username for one of the users is psamd then the URL for the avatar for
this user will be: https://avatars.dicebear.com/v2/avataaars/psamd.svg?options[mood][]=happy

React assignment 3
 Loading Indicator
Upon opening the app a loading indicator is displayed until the data is fetched from the
API and is ready to be displayed. The source code for the loading indicator can be
obtained from: http://tobiasahlin.com/spinkit/.

Assignment 1 - Beginner
Deadline for submission: 3 days

DEMO - https://react-advanced-assignment.psamd.now.sh/

This assignment is designed for applicants who have a good knowledge and
understanding of React and have developed/worked on atleast one React application.

What are we looking for?

With this assignment we would evaluate the following:

Ability to create new react projects using Create React App

Understanding of JSX

Passing props to components

Understanding of stateful and stateless Components

Basic understanding of state management and component lifecycle methods

Fetching data from an API endpoint

Conditional rendering

Working with lists

Ability of the applicant to learn a new React UI library and use its components in
their app

Handling events and working with forms

Lifting State Up

Instructions
We want applicants to create the closest possible replica of the assignment 2 demo
app.

React assignment 4
 This app should be a responsive (mobile, tablet and desktop) and will be tested on
Chrome browser.

The entire app was designed using the Ant Design library. It is mandatory for applicants
to use the library to design the Icons, Buttons, Cards, Grid, Modal and Form in the
demo app.

General Tips
Feel free to use Google, StackOverflow or any other resource

Examine the demo apps closely to determine all the features

Open the data API link in your browser and examine the response schema

For applicants attempting the Assignment 2, please read the documentation of Ant
Design library carefully and thoroughly.

Try to match the UI design of the demos for each assignment as closely as
possible.

React assignment 5