In this project, let's build a Blog List by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px), 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 added

The app must have the following functionalities

• In the Home Route, user info and blog list should be displayed

• The Home component is provided with blogsList. It consists of a list of blog details objects with the following properties in each object

  Key	Data Type
  id	Number
  title	String
  description	String
  publishedDate	String

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/components/Home/index.js
• src/components/BlogList/index.js
• src/components/BlogList/index.css
• src/components/BlogItem/index.js
• src/components/BlogItem/index.css
• src/components/UserInfo/index.js
• src/components/UserInfo/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

• Home route should consist of / in the URL path
• About route should consist of /about in the URL path
• Contact route should consist of /contact in the URL path
• No need to use the BrowserRouter in App.js as we have already included in index.js file

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/profile-img.png alt should be profile

Colors

Hex: #9aa5b1

Hex: #616e7c

Hex: #12022f

Font-families

• Roboto

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.

React-Js_Project-25_Blog_List