https://github.com/ayushsgithub/elevatifier_task
Responsive news dashboard webpage created using React.js, Linesnews Api and Tailwind CSS. It displays a list of posts fetched from the API.
https://github.com/ayushsgithub/elevatifier_task
api axios netlify-deployment reactjs tailwind-css
Last synced: about 1 month ago
JSON representation
Responsive news dashboard webpage created using React.js, Linesnews Api and Tailwind CSS. It displays a list of posts fetched from the API.
- Host: GitHub
- URL: https://github.com/ayushsgithub/elevatifier_task
- Owner: ayushsgithub
- Created: 2023-10-29T08:53:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-30T14:52:49.000Z (over 2 years ago)
- Last Synced: 2025-01-10T22:40:48.645Z (about 1 year ago)
- Topics: api, axios, netlify-deployment, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://news-dashboard-elevatifier.netlify.app/
- Size: 294 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# News Dashboard
This project is a responsive news dashboard webpage created using React.js, Linesnews Api and Tailwind CSS. It displays a list of posts fetched from the API. The app allows users to view headlines, news icons, sources, and hashtags for various categories. The project include features such as category filter, a real-time search functionality for an enhanced user experience, responsive design, and a "Read more" button for each blog post.
[Production Link](https://news-dashboard-elevatifier.netlify.app/)
## Getting Started
### Layout
- Implemented a responsive layout for the dashboard page.
- Created a search and filter features for better user experience.
### News Posts API Integration
- Integrated a third-party API to fetch and display news data.
- Displayed at least 5 blog posts from the API.
- Each blog post displays the title, image, hastags, publication date, source, category and content.
- Ensured that the data from the API is displayed correctly and consistently.
### Responsive Design
- Ensured that the blog page is responsive and looks good on various screen sizes, from mobile to desktop.
- Implemented responsive design principles using Tailwind CSS classes, including flex and responsive breakpoints.
## Prerequisites
### Before starting with this project, you should have a basic understanding of the following technologies:
- HTML
- CSS (Tailwind CSS)
- JavaScript
- React
### Installation
1. Clone this repository to your local machine:
```git clone https://github.com/ayushsgithub/Elevatifier_task.git```
2. Go the folder
```cd Elevatifier_task```
3. Install dependencies
```npm install```
4. To start development server run the below command in terminal
```npm run dev```
- This will start a development server on **localhost:5173** in your browser
# Contributing
### Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug ```fix: git checkout -b feature-name```.
- Make your changes and commit them.
- Push your changes to your fork: ```git push origin feature-name```.
- Create a pull request on the original repository.