Blog App

This project sets up a blog application that allows users to view a list of blogs and their detailed content.

---

Live Demo

Experience the app live here: https://pakupodisathish.github.io/BlogListProject/

---

Setup Instructions

Follow these steps to get the project running on your local machine:

1. Clone the Repository:

   git clone [https://github.com/Pakupodisathish/BlogListProject.git](https://github.com/Pakupodisathish/BlogListProject.git)

2. Navigate to Project Directory:

   cd BlogListProject

3. Install Dependencies:

   npm install

4. Start the Application:

   npm start

   The app will open in your browser, typically at http://localhost:3000/.

---

Functionality

The application provides the following core features:

Home Route (/)

• Upon opening the app, the Home Route is displayed.
• An HTTP GET request is made to https://apis.ccbp.in/blogs to fetch the list of blogs.
• A loader is displayed while the data is being fetched.
• Once the data is retrieved, the list of blogs is rendered.

Blog Item Details Route (/blogs/:id)

• Clicking a blog item on the Home Route navigates to its details page.
• An HTTP GET request is made to https://apis.ccbp.in/blogs/:id (e.g., https://apis.ccbp.in/blogs/2) to fetch the specific blog's details.
• A loader is displayed during data fetching.
• After fetching, the complete details of the selected blog are displayed.

---

API Endpoints

The application interacts with these APIs:

Blogs List API

• URL: https://apis.ccbp.in/blogs
• Method: GET
• Description: Returns a list of all available blogs.

Blog Item Details API

• URL: https://apis.ccbp.in/blogs/:id (e.g., https://apis.ccbp.in/blogs/2)
• Method: GET
• Description: Returns detailed information for a specific blog based on its ID.

---

Components Structure

The project is organized into the following React components:

• App.js: Main application component, handling routing.
• Home/index.js: Displays the list of blogs and fetches data for the Home Route.
• BlogList/index.js: Renders the collection of blog items.
  • BlogList/index.css: Styling for BlogList.
• BlogItem/index.js: Renders an individual blog entry.
  • BlogItem/index.css: Styling for BlogItem.
• BlogItemDetails/index.js: Displays the detailed view of a selected blog.
  • BlogItemDetails/index.css: Styling for BlogItemDetails.

---

Important Notes

• Routing Paths:
  • Home: /
  • About: /about
  • Contact: /contact
  • Blog Item Details: /blogs/:id
• The BrowserRouter is already set up in index.js, so you don't need to add it to App.js.
• Loader Component: Ensure your Loader component is wrapped as

  <div>
    <Loader type="TailSpin" color="#00bfff" height={50} width={50} />
  </div>