Giter Club home page Giter Club logo

edgar-react-app's Introduction

React Blog Assignment

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.

Objectives

  1. Create at least two components: one for the main page and one for the details page.
  2. Fetch blog post data from a Lorem Ipsum API and display it on the main page as a list of blog posts.
  3. Implement navigation between the main page and the details page for each blog post.
  4. Create a details page that displays the full content of a selected blog post.

Requirements

  1. Use the Lorem Ipsum API to fetch blog post data. You can make HTTP requests using the fetch API or any preferred library.
  2. 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.
  3. Implement navigation between the main page and the details page. You can use React Router or any other routing library of your choice.
  4. Style your application using CSS or a CSS-in-JS library of your choice. Make sure it is visually appealing and user-friendly.
  5. 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.
  6. Provide a way to go back from the details page to the main page.
  7. Implement error handling for API requests in case the API is unavailable or returns an error.

Bonus Features (Optional)

If you want to challenge yourself further, consider adding these optional features:

  1. Add pagination or infinite scrolling to the main page to display more blog posts.
  2. Implement a search bar on the main page to filter blog posts by keywords.
  3. Allow users to add their own blog posts (title and content) with a form.
  4. Add comments to individual blog posts, allowing users to leave comments and view existing comments.

edgar-react-app's People

Contributors

sob7i avatar

Watchers

 avatar

Forkers

edstar3000

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.