Giter Club home page Giter Club logo

news-reader's Introduction

News Reader ๐Ÿ—ž๏ธ

Dive into a world of current events and stories with News Reader! This application is designed for those who seek to stay informed with the latest news in an engaging and interactive manner.

Description

News Reader is a simple app that lets you catch up on the latest headlines and articles in categories you care about. It aggregates articles from the News API, presenting users with the latest news articles including headlines, images, descriptions, and publishing dates. The app provides a detailed view for each article and a way to filter or search through the news feed.

image

Project Context

This project was developed as part of the Turing School of Software and Design curriculum. It serves as a take-home challenge simulating a real-world coding interview assignment. The task was to create a minimum viable product (MVP) that is user-friendly, clear in information presentation, and straightforward in navigation.

image

Live Demo

Stay updated with the happenings around the world. Explore News Reader.

image

Preview of App

News Reader App

image

Setup & Installation

Get News Reader running on your machine:

  1. Clone the repository: git clone [email protected]:Sulton88Mehron90/news-reader.git
  2. Move to the project directory: cd news-reader
  3. Install dependencies: npm install
  4. Start the app: npm start
image

Technologies:

News Reader is built using a blend of modern web technologies:

JavaScript HTML5 CSS3 Node.js Git React Cypress
image

Requirements

The application meets the following requirements:

  • Displays a list of articles, including headline, image, description (if available), and date.
  • Provides a detailed view of each article within the app, showcasing the headline, image, date, content, and source.
  • Includes internal navigation from the article list to the detailed article view.
  • Features the search functionality.
image

Additional Notes

  • To preserve API request limits during development, mock data was used to build the application before switching to live API requests for demonstration purposes.
  • The interface is designed to be responsive and accessible on desktop, tablet, and mobile devices.
image

Evaluation Criteria

The following aspects were emphasized in the development of News Reader:

  • Proficiency in React JS and front-end development best practices.
  • Ability to focus on MVP requirements and prioritize features accordingly.
  • Understanding of usability principles and adherence to web standards.
  • Clear information hierarchy and navigation within the app.
  • Clean and well-organized codebase.
image

Contributor

Meet the developer behind News Reader:

Parvin A. Sattorova LinkedIn || GitHub
GitHub Avatar
image

Reflections

Through this project, I've had a good practice understanding and improving my skills in state management, React hooks, and creating a responsive and interactive user experience with React Router. It's been a great exercise in building a practical, real-world application that demands efficiency and a good understanding of user interactions.

image

news-reader's People

Contributors

sulton88mehron90 avatar

Watchers

 avatar

news-reader's Issues

Debugging and Troubleshooting

Address the issue where the entire article isn't visible in the ArticleDetail component.
Fix any TypeScript errors that arise during development.
Handle any 404 errors for images or API calls.

Article Detail Page

Create the ArticleDetail component to display detailed information about a specific article.
Fetch and display the article title, image, source, date, content, and URL.
Handle potential errors such as invalid article ID.
Style the article details page (ArticleDetail.css).

Project Setup

Initialize the React project using Create React App (or your preferred setup).
Install necessary dependencies (react-router-dom, etc.).
Set up the basic folder and component structure.

Image Error Handling

Implement error handling for images that fail to load in both the ArticleList and ArticleDetail components.
Use a placeholder image (missingImg.png) in case of image loading errors.

Article List Page

Create the ArticleList component to display a list of articles.
Implement a search bar to filter articles based on a search term.
Display article images with error handling (show a placeholder image if the actual image doesn't load).
Style the articles list page (ArticleList.css).
Add responsiveness to the articles list layout.

Optimization and Refactoring

Refactor components for better performance using React.memo and other optimization techniques.
Clean up code and remove any unnecessary console logs or debug statements.

API Integration

Implement the fetchNews function to pull data from the news source.
Handle potential errors and edge cases during data fetching.

Vercel environment variables

Vercel dashboard to set up your environment variables to show thw data coming from API when the switch is clicked.

Testing

Cypress testing.
Handle edge cases and ensure code coverage.

Modern Styling for URLs

Style article URLs in a modern fashion in the ArticleDetail component.
Ensure URLs are clickable and lead to the original article source.

Documentation

Document the project setup, components, and any other relevant details in the README.md file.
Provide instructions for setting up, running, and testing the project.

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.