Lift State Up 2

Create a parent component that has a state of inputValue.

Pass this state down to a child component that has an input field.

When the user types into the input field, update the state of inputValue in the parent
component with the current value of the input field.

NOTE:

​ Use class name parent for parent container

​ Use class name child for child container
Lift State Up 4
Create a parent component that has a state of cartItems.

Pass this state down to a child component that displays a list of items in the cart.

When the user clicks a "remove" button on one of the items, update the state of
cartItems in the parent component to remove that item.

NOTE:

​ Use class name parent for parent container

​ Use class name child for child container
​ Use id itemName for item name field
​ Use id itemPrice for item price field
Lift State Up 5
Create a parent component that has a state of isLoggedIn.

Pass this state down to a child component that displays a login form.

When the user submits the login form, update the state of isLoggedIn in the parent
component to true.
Lifting State Up 6
Create a parent component that has a state of todos.

Pass this state down to a child component that displays a list of todo items.

When the user clicks a "complete" button on one of the items, update the state of todos
in the parent component to mark that item as completed.
React Composition 2
Create a Modal component that accepts a show prop and a onClose callback.

The component should render its children inside a modal dialog that is displayed when
the show prop is true.

When the user clicks the "close" button in the dialog, the onClose callback should be
called to update the show prop to false.

NOTE:

​ Use class name model-overlay for model container.

​ Use class name model-close for model close button
​ Use class name model-p for model paragraph
React Composition 3
Create a Tooltip component that accepts a text prop and a children prop.

The component should render the children prop and display the text prop in a tooltip
when the user hovers over the children.

NOTE:

​ Use class name tootip for children text.

​ Use class name tooltiptext for tooltip text.

OUTPUT:
React Composition 4
Create a Form component that accepts a onSubmit callback and a list of fields objects
with properties name, type, and label.

The component should render an input field for each object in the fields prop, with the
label property as the label for the input field.

When the form is submitted, the onSubmit callback should be called with an object
containing the values of each input field.
React Composition 5
Create a Tabs component that accepts a tabs prop.

Tabs prop should be an array of objects with title and content properties.

The component should render a list of clickable tabs with the title of each object.

When a tab is clicked, the corresponding content should be displayed below the list of
tabs.

Add the ability to have multiple sets of tabs on the same page by allowing the Tabs
component to accept a key prop that will be used to distinguish between different sets of
tabs.

OUTPUT:
Menu
The task is to create a react based application which uses the concept of useState for
building an application to show the details and reviews of dishes using pre-defined
items.

[
{
id: 1,
title: 'buttermilk pancakes',
category: 'breakfast',
price: 15.99,
img: './images/item-1.jpeg',
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan
copper mug whatever cold-pressed `,
},
{
id: 2,
title: 'diner double',
category: 'lunch',
price: 13.99,
img: './images/item-2.jpeg',
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings
gochujang helvetica man braid jianbing. Marfa thundercats `,
},
{
id: 3,
title: 'godzilla milkshake',
category: 'shakes',
price: 6.99,
img: './images/item-3.jpeg',
desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before
they sold out organic viral.`,
},
{
id: 4,
title: 'country delight',
category: 'breakfast',
price: 20.99,
img: './images/item-4.jpeg',
desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism
austin mlkshk truffaut, `,
 },
{
id: 5,
title: 'egg attack',
category: 'lunch',
price: 22.99,
img: './images/item-5.jpeg',
desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation
farm-to-table 90's pop-up `,
},
{
id: 6,
title: 'oreo dream',
category: 'shakes',
price: 18.99,
img: './images/item-6.jpeg',
desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia
heirloom iPhone everyday`,
},
{
id: 7,
title: 'bacon overflow',
category: 'breakfast',
price: 8.99,
img: './images/item-7.jpeg',
desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge,
pork belly cloud bread iceland put a bird `,
},
{
id: 8,
title: 'american classic',
category: 'lunch',
price: 12.99,
img: './images/item-8.jpeg',
desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo
santo leggings. Food truck truffaut `,
},
{
id: 9,
title: 'quarantine buddy',
category: 'shakes',
price: 16.99,
img: './images/item-9.jpeg',
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb
yuccie crucifix microdosing.`,
},
]
The Application should support following features.

​ All dishes : The user should be able to see all the dishes from various categories.
​ Show items based on categories : The user should be able to switch among the
categories by clicking on them to look for items from particular category.

The main page should somewhat like this where different categories are breakfast,
shakes, etc.
To-Do
Write a React component that implements a simple to-do list, with the ability to add and remove
items.
Calculator
The task is to create a react based calculator which can perform the following
operations:

​ Addition
​ Subtraction
​ Division
​ Multiplication
​ Clear All
​ Equals to

The main page should look somewhat like this

Reviews
The task is to create a react based application which Renders the reviews using the
pre-defined data.

[
{
id: 1,
name: 'susan smith',
job: 'web developer',
image:

'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg'
,
text:
"I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse
before they sold out chambray pop-up. Shaman humblebrag pickled coloring book
salvia hoodie, cold-pressed four dollar toast everyday carry",
},
{
id: 2,
name: 'anna johnson',
job: 'web designer',
image:

'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg'
,
text:
'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt
glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion
axe.photo booth jean shorts artisan narwhal.',
},
{
id: 3,
name: 'peter jones',
job: 'intern',
image:

'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg'
,
text:
'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed
8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst
raclette post-ironic jianbing swag.',
},
 {
id: 4,
name: 'bill anderson',
job: 'the boss',
image:

'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg'
,
text:
'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe
cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up
3 wolf moon tote bag street art shabby chic. ',
},
];

Tasks

​ The page should render "Our Reviews" at the top of the page wrapped in a tag
with id= review-heading.
​ for the review render one review at a time and order it as given above. the
container containing the reviews should have className as review.
​ The review container should contain the author , job ,info ,person-img as
className for name , job , text and image.
​ There should be a previous and a next button with className as prev-btn and
next-btn.
​ apart from a next and previous button it should have a button which randomly
shows a review and avoids the current index as the next review , the button
should have a className as random-btn and have the text as surprise me.
​ For rendering the name of author the tag must have an id as author-id where id
reflects the id of the review given in the data above
Gender Form

Conditional Rendering: Implement a form that displays different fields based on the
user's input.

For example, if the user selects "Male" as their gender, the form should display a field
for selecting shirt size.

If the user selects "Female", the form should display a field for selecting dress size.
Auto Complete React

Implement a React component that implements an autocomplete feature for a search

input. The component should display a list of suggestions as the user types in the input,
and should update the suggestions list asynchronously to prevent UI freezes.

​ Use array fruits = ["apple", "banana", "cherry", "date", "elderberry", "fig"]

Data Fetcher

Implement a React component that fetches data from an API, and displays the data

Update the state as the data is fetched. Ensure that the component updates the state in
an asynchronous manner to prevent UI freezes.

API: https://dummyjson.com/products

Display the data fetched from the given API in a 'pre' tag.

OUTPUT:
City Weather

Build a weather app that uses the OpenWeatherMap API to fetch the current weather data
for a given location.

The app should display the temperature, weather description, and an appropriate icon
for the weather condition.

API: https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${API_KEY}

Generate API_KEY on openweathermap:

​ Go to the OpenWeatherMap website at https://openweathermap.org/

​ Click on the "Sign Up" button in the top right corner of the page to create a new
account.
​ Once you have created an account, log in and navigate to the "API keys" page.
​ Generate a new API key by clicking on the "Generate" button.

NOTE:

​ Use class name search for search input.

​ Use class name weather for block displaying weather data of a city.

Output

:
Virtual Bookstore App
Figma -
https://www.figma.com/file/HmJl1YcejIXNc6Hr1ZQpjm/BookStore-UI?type=design&node-id=0%
3A1&mode=design&t=DUj3MYs02a04qpfj-1

Objective
The goal of this project is to create a responsive online bookstore application. This
application fetches data from Google Books API, displays it in an elegant UI as per
the provided Figma design, provides a search feature, and gives detailed information
about each book.

Project Brief
● Use the Google Books API to fetch and display data about books.
● Display a list of books obtained from the API requests in a visually appealing
manner using the Figma design provided.
● Implement a search feature to find and display books based on user queries.
● Show a detailed information panel for each book when clicked, following the
design in Figma.

APIs Used
We'll be hitting two APIs as soon as the user lands on the page:

1. https://www.googleapis.com/books/v1/volumes?q=harry+potter
2. https://www.googleapis.com/books/v1/volumes?q=Sherlock+Holmes
3. Change the q according to your query.

Task Breakdown
Project Setup

● Set up a new React application using create-react-app.

● Review the Figma design and plan your component hierarchy.

Fetching and Displaying Initial Book Data

● Use useEffect to fetch data from atleast two API calls (search for
harry+potter and sherlock+holmes) when the app loads.
● Use useState to store this book data.
 ● Map through this data to display the books on the home screen as per the Figma
design.

Book Detail View

● When a book is clicked, expand its banner to full width and show detailed
information about the book.
● The "Read Now" button should redirect the user to the previewLink from the
book data.
● The "More Info" button should redirect the user to the infoLink from the book
data.

Search Feature

● Implement a search bar in the top navbar.

● When the search button is clicked, fetch data from the Google Books API with
the user's query and display the results. Make sure that whatever the user
types becomes the q in the API endpoint.

Points Distribution
● Project Setup and Initial Fetching of Data - 20 Points
○ Setup of new React application using create-react-app (5 Points)
○ Appropriate component hierarchy planning based on Figma design (5
Points)
○ Successful initial fetch of data from at least two API calls (Harry
Potter and Sherlock Holmes) using useEffect (10 Points)
● Displaying Book Data as per the Figma Design - 30 Points
○ Proper state management of fetched book data using useState (10 Points)
○ Correct and visually appealing mapping of book data to UI, aligning with
Figma design (20 Points)
● Implementing the Book Detail View - 20 Points
○ Successful expansion of a book's banner to full width with detailed
information on click (10 Points)
○ Correct implementation of "Read Now" button redirecting to previewLink
(5 Points)
○ Correct implementation of "More Info" button redirecting to infoLink (5
Points)
● Implementing the Search Feature - 20 Points
○ Proper implementation of search bar in the top navbar (5 Points)
○ Correct fetching and displaying of data from Google Books API based on
user's query when search button is clicked (15 Points)
● Code Quality - 10 Points
○ Clean and well-structured code (5 Points)
○ Proper and logical component structure (5 Points)
Markdown
The task is to create a react based application which uses the concept of useState and
useEffect for building an application to illustrate the working of markdown.

The Application should support following features.

​ It should be divided into two halves : one for writing the markdown and other for
representation of the same

The main page should look somewhat like this

The Only Markdown Crash Course You Will Ever Need

React Memo
The task is to create a react based Memo using useState and useEffect hooks.

Your task is to create a memo with the following functionalities

​ An add todo button that will add a task with content "New todo"
​ An increment button that will increase the count of the value next to it.
​ A memo where you can input the text and can add items of your choice where the
text should be greater than 5 characters.
​ A submit button next to the input field that would add the item to your list

The main page should look somewhat like this

Load More

Write a React component that implements a "load more" feature for a large list of items.

​ The component should display a specific number of items at a time and allow the
user to load more items as they scroll down the list.
​ Ensure that the component updates the state asynchronously to prevent UI
freezes when loading more items.
Redux starts Below:
Lorem Redux
Fetch an lorem ipsum API using redux and display the content on page

OUTPUT:
User Info (Redux)
Create a Redux store that holds a state for a user's name and email address.

Write an action that can update the name or email address in the store.
Shopping Cart Redux

Create a shopping cart using React-Redux.

It should contain following functionality:

​ Add item functionality

​ Add to wishlist functionality
​ Add discount coupon functionality

OUTPUT:
Sort Books

Create a Redux store for Book sorting that holds a state for a list of books.

Write an action to fetch the list of Books and its details from an API and update the store
with the results.

Allow the user to sort the list of posts by Title, author & publisher
Create a Resume builder using Redux.

Pages

​ Page 1
​ Page 2
​ Page 3
​ Page 4
​ Page 5
​ Final Output

Use the following selectors:

​ Next button - id = next

​ Save and continue - id = save_continue
​ Back - id = back

Profile Section:

​ first name - name='fname'

​ last name - name='lname'
​ mobile number - name='phone'
​ address - name='address'
​ Image - name="url"

Education Section:

​ course name - name="courseName"

​ completion year - name="completionYear"
​ college - name="college"
​ percentage - name="percentage"
​ Delete - id = delete
​ Add Education - id = add_education

Skills Section:

​ use name="skill" for all feilds

​ Add skill - id = add_skill
​ Delete skill - id = delete_skill
Projects Section:

​ project name - name="projectName"

​ Tech Stack - name="techStack"
​ Description - name="description"
​ Add project - id = add_project
​ Delete project - id = delete

Social media Section:

​ social - name="Social"
​ Add social - id = add_social
Social Media App

Create a social media app where in certain authors can Create, Read and Edit an
post.

The App should contain following pages and functionalities:

​ The landing page should contain 4 tabs and posts as shown in image. (Landing
Page)
​ Users tab should contain names of users. Upon clicking on a user, the page
should display posts made by the author. (Users Page), (User Posts)
​ In notifications page, clicking on 'Refresh Notifications' should display
notifications. (Notifiations Page)
​ User must be able to create post. (Create Post), (Select User/Author), (Post
added)
​ User must be able to react to a post. (Add Reactions)
​ User must be able to edit post. (Click Edit), (Edit Post), (Post Edited)

Use following selectors:

Create post section:

​ #postAuthor to select an author.

​ #postContent for content text area.

Posts section:

​ .posts-list for posts container.

Edit post section:

​ After clicking on 'View Post' of a post, the post must be displayed in new page.
And post must contain class name post
​ Edit button should contain class name button
​ Post Title must contain id postTitle
​ Post Content must contain id postContent
Refresh Notifications:

​ 'Refresh Notifications' should have a class name button

Memory Game

Create a memory game where you need to remember the last selected item's
number and complete all tiles in minimum tries.

You need to match 2 similar number to make a pair.

Use the following selectors:

​ Use class name levels_container for levels buttons container.

​ Use id #easy, #normal, #hard for different levels radio buttons.
​ Use class name cells_container for container containing all cells.

OUTPUT PAGES:

​ Landing
​ Easy
​ Easy-Matching
​ Easy-All Solved
​ Medium
​ Hard
Phoenix Airlines

Create an application using redux for Phoenix Airlines, which has flight search
and booking functionality.

Your app must contain following routes:

​ / for landing page. (landing_page)

​ /flight-search to select one-way or Round trip, Source and Destination cities,
Date of journey.
Use class name book-flight for booking a flight from the results shown.
(filght-search_page, filght-search-1_page, filght-search-2_page,
filght-search-3_page )
​ /flight-booking to enter user details and confirm booking. (flight-booking_page)
​ /confirmation to show confirmation status. (confirmation_page)