Scribd
Upload
28 views

React JS Machine Test

The document outlines requirements for a React application with 5 pages: home, about, posts, post details, and contact. The home page should include a carousel and team member list. The posts page should fetch and display a list of posts from an API. The post details page should fetch and display details for a single post. The contact page should include a contact form with validation.

Uploaded by

vibin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

React JS Machine Test

The document outlines requirements for a React application with 5 pages: home, about, posts, post details, and contact. The home page should include a carousel and team member list. The posts page should fetch and display a list of posts from an API. The post details page should fetch and display details for a single post. The contact page should include a contact form with validation.

Uploaded by

vibin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React JS Machine Test

Total time : 3 hour


Final project compress to zip and share to any of the following email
1) [email protected]
2) [email protected]

Create a small react application based on following requirements.

Total 5 pages

1) Home page
2) About page
3) Posts
4) Post details
5) Contact

All page’s header contains the navigation to Home, About, Posts, Contact

Home

Home page should contain 2 components.


1) Full width Carousel
for carousel you can add any 5 images

2) Team members list


Them members you will get detail from following api
https://jsonplaceholder.typicode.com/users

From the Api take each user's name, email and phone. When clicking on the user then
show the particular user details in a modal.

About
About page you can make with your own creativity
Posts
Post page you have to list all posts which you can fetch from the following Api
https://jsonplaceholder.typicode.com/posts

From the Api you can take the title and body's first 50 characters to make the list and when
clicking on each post will navigate to the post details page.

you will get post details from the following api


https://jsonplaceholder.typicode.com/posts/{id}

and particular post's comment you will get from the following Api
https://jsonplaceholder.typicode.com/posts/{id}/comments

Contact Page
make a contact page with following form fields

first name, last name, email, phone number, gender, date of birth, state, city, pincode and
address.

here first name, last name, email, phone number and pin code fields like input

gender field like radio button

date of birth field should be date picker

state field should be select box (for now just add any 5 state)

address field like textarea

And submit with validation, if validation is successful then log all field’s values in the console.

Validation rules

1) All fields are required


2) First name and Last name maximum 15 characters
3) Email should be mail format
4) Phone number should be 10 digits
5) Pin code should be 6 digits
6) Date of birth should be past dates (can’t able to pick current and future dates)
7) Address maximum 150 characters.

You might also like