https://github.com/ibizugbe/blog-post-viewer

This is a web application that fetches and displays blog posts from the JSONPlaceholder API. Users can view a list of blog post titles and click on a title to see the full content of the selected blog post.
https://github.com/ibizugbe/blog-post-viewer

Last synced: 3 months ago
JSON representation

This is a web application that fetches and displays blog posts from the JSONPlaceholder API. Users can view a list of blog post titles and click on a title to see the full content of the selected blog post.

• Host: GitHub
• URL: https://github.com/ibizugbe/blog-post-viewer
• Owner: Ibizugbe
• Created: 2024-07-16T18:41:55.000Z (about 1 year ago)
• Default Branch: dev
• Last Pushed: 2024-07-19T14:23:36.000Z (about 1 year ago)
• Last Synced: 2025-05-07T14:56:32.309Z (5 months ago)
• Language: TypeScript
• Size: 930 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          




  

  


  
Blog Post Viewer




# 📗 Table of Contents

- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Prerequisites](#prerequisites)

  - [Setup](#setup)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [❓ FAQ (OPTIONAL)](#faq)

- [📝 License](#license)

# 📖 Blog Post Viewer 

**Blog Post Viewer** is  a web application that fetches and displays blog posts from the JSONPlaceholder API. Users can view a list of blog post titles and click on a title to see the full content of the selected blog post.

## 🛠 Built With 

### Tech Stack 

  Client

  


    
React.js

  


  Style

  


    
TailwindCSS

  

  


    
AceternityUI

  


API

  


    
JSON placeholder

  


### Key Features 

- **API interaction**

- **Render all posts**

- **See details of a post**

- **Infinite scroll**

- **Darkmode**

- **Responsive UI**

(back to top)


## 🚀 Live Demo 

- [Live Demo Link](https://dev--blog-post-viewer01.netlify.app/)

(back to top)


## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:

- Node JS.

- Any code editor of your choice.

### Setup

You can clone this repository to your desired folder using the command below.

```

git clone https://github.com/Ibizugbe/blog-post-viewer

cd blog-post-viewer

```

### Install

Run the command below to install the dependencies of this project.

```

npm install

```

### Usage

To run the project on your local server, execute the following command:

```

npm run dev

```

### Run tests

To run tests, run the following command:

```

npm test

```

### Deployment

The project has been deployed using Netlify👾.

(back to top)


## 👥 Authors 

👤 **Abraham Ibizugbe**

- GitHub: [@githubhandle](https://github.com/ibizugbe)

- LinkedIn: [LinkedIn](https://linkedin.com/in/abrahamibizugbe)

(back to top)


## 🔭 Future Features 

- [ ] **User Authentication**

- [ ] **Favorite post recommendation**

- [ ] More performance improvement

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)


## ⭐️ Show your support 

If you like this project, you can give it a ⭐️💫

(back to top)


## 🙏 Acknowledgments 

I would like to thank the developers of the JSON placeholder API.

(back to top)


## 📝 License 

This project is [MIT](./MIT.md) licensed.

(back to top)