In this assignment, you will create a simple blog application using React. The application will consist of two main pages: a main page that displays a list of blog posts and a details page for each individual blog post. The blog posts will be fetched from a Lorem Ipsum API to simulate real data.
- Create at least two components: one for the main page and one for the details page.
- Fetch blog post data from a Lorem Ipsum API and display it on the main page as a list of blog posts.
- Implement navigation between the main page and the details page for each blog post.
- Create a details page that displays the full content of a selected blog post.
- Use the Lorem Ipsum API to fetch blog post data. You can make HTTP requests using the fetch API or any preferred library.
- Create two components:
MainPage
: This component should display a list of blog post titles fetched from the API. Clicking on a title should navigate to the details page for that blog post.DetailsPage
: This component should display the full content of the selected blog post.
- Implement navigation between the main page and the details page. You can use React Router or any other routing library of your choice.
- Style your application using CSS or a CSS-in-JS library of your choice. Make sure it is visually appealing and user-friendly.
- Use React state to manage the selected blog post on the details page. The selected post should be passed as a prop to the
DetailsPage
component. - Provide a way to go back from the details page to the main page.
- Implement error handling for API requests in case the API is unavailable or returns an error.
If you want to challenge yourself further, consider adding these optional features:
- Add pagination or infinite scrolling to the main page to display more blog posts.
- Implement a search bar on the main page to filter blog posts by keywords.
- Allow users to add their own blog posts (title and content) with a form.
- Add comments to individual blog posts, allowing users to leave comments and view existing comments.