In this project, let's build a Planets App by applying the concepts we have learned till now.
https://mkplanetsapp.ccbp.tech/
Click to view
- Download dependencies by running
npm install
- Start up the app using
npm start
Functionality to be added
The app must have the following functionalities
-
planetsList
should be displayed using React Slick -
The
PlanetSlider
component is provided withplanetsList
. It consists of a list of planet item objects with the following properties in each planet item objectKey Data Type id String name String imageUrl String description String -
When the next button is clicked on the page, the next planet item details in the planetsList should be displayed
-
When the previous button is clicked on the page, the previous planet item details in the planetsList should be displayed
Implementation Files
Use these files to complete the implementation:
src/components/PlanetsSlider/index.js
src/components/PlanetsSlider/styledComponents.js
src/components/PlanetItem/index.js
src/components/PlanetItem/styledComponents.js
Click to view
- To build this project, take a look at the React Slick reading material
The following instructions are required for the tests to pass
- Styled Components should be used for styling purpose.
- The app should consist of an HTML container element with
data-testid
asplanets
. - The HTML container element with
data-testid
asplanets
should have the Planets background image, which was mentioned in the image URLs. - Roboto should be applied as
font-family
for Planets heading.
Image URLs
- https://assets.ccbp.in/frontend/react-js/planets-app/planets-bg-img.png Planets background image
Colors
Font-families
- Roboto
- 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.