An App Store WebSite Build With React.js
In this project, let’s build an App Store by applying the concepts we have learned till now.
Refer to the image below:
Design Files
Click to view- Extra Small (Size < 576px) and Small (Size >= 576px)
- Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)
Set Up Instructions
Click to view- Download dependencies by running
npm install
- Start up the app using
npm start
Completion Instructions
Functionality to be addedThe app must have the following functionalities
-
Initially, the Social tab should be active and the apps with Social as their category should be displayed
-
When a value is provided in the search input
- The apps in the active category, that include search input value in their name should be displayed
- When another tab is clicked, the apps in the corresponding category, that include search input value in their name should be displayed
- The search should be case insensitive
-
When the search input is empty,
- All the apps in the active category should be displayed
- When another tab is clicked, the apps in the corresponding category should be displayed
-
The
AppStore
component is provided withtabsList
. It consists of a list of tabItem objects with the following properties in each tabItem objectKey Data Type tabId String displayText String -
The
AppStore
component is provided withappsList
. It consists of a list of app objects with the following properties in each app objectKey Data Type appId Number appName String imageUrl String category String
Implementation Files
Use these files to complete the implementation:
src/components/AppStore/index.js
src/components/AppStore/index.css
src/components/TabItem/index.js
src/components/TabItem/index.css
src/components/AppItem/index.js
src/components/AppItem/index.css
Quick Tips
Click to view-
You can use the
cursor
CSS property to specify the mouse cursor to be displayed when pointing over an elementcursor: pointer;
-
You can use the below
outline
CSS property for buttons and input elements to remove the highlighting when the elements are clickedoutline: none;
Resources
Image URLs- https://assets.ccbp.in/frontend/react-js/app-store/app-store-search-img.png alt should be search icon
- Bree Serif
Things to Keep in Mind
- All components you implement should go in the
src/components
directory.- Don’t change the component folder names as those are the files being imported into the tests.
- Do not remove the pre-filled code
- Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.