Giter Club home page Giter Club logo

briefly's Introduction

Briefly News Reader

A news reader web application that pulls articles from the News API.

Table of Contents

Introduction

Welcome to Briefly, your go-to news reader application! Briefly allows you to stay updated with the latest news articles from various sources. With an intuitive and user-friendly interface, you can easily browse through headlines, access detailed articles, search for specific topics, and more. Read on!

Features

  • Display a list of articles with headlines, images, descriptions (if available), and dates.
  • Provide a detailed view for each article, including the headline, image, date, content, and source.
  • Enable navigation within the app, linking to the detailed article view.
  • Support search, and filter functionality to enhance article exploration.
  • Responsive design for seamless usage across desktop, tablet, and mobile devices.
  • Designed with accessibility in mind, ensuring a seamless experience for users of all abilities.

Technologies

React React Router CSS npm

Preview

Desktop

Responsive

Planning Links

Installation

  1. Clone the repository:

    - git clone https://github.com/LSeward0421/briefly-news-reader.git
  2. Change into the directory:

    - cd briefly-news-reader
  3. Install dependencies:

    - npm install

Usage

  1. Obtain an API key from the News API website.

  2. Create a .env file in the project root directory and add your API key: REACT_APP_NEWS_API_KEY=your-api-key

  3. Start the development server:

 - npm start
  1. Open the app in your browser:
- http://localhost:3000

Author

Lauren Seward
GitHub
LinkedIn

briefly's People

Contributors

lseward0421 avatar

Watchers

 avatar

briefly's Issues

Story 1 - Home Page

As a user, I want to see a list of the most popular articles on the home page, including headline, image, description, and date, so I can quickly browse the latest news.

Acceptance Criteria:

  • The home page must load successfully.
  • The most popular articles must be displayed on the home page in a list format.
  • Each article in the list must display its headline, image, description, and date.
  • The list must be updated with the latest articles when the page is loaded or refreshed.

ReadME

  • Exceeds Expectations: In addition, the README includes a walkthrough of the FE or Swagger for the BE to run requests. Project board is utilized effectively with clear labels and each PR references a GH issue.

  • Meets Expectations: Has clear documentation including sections like a summary, setup instructions, endpoints/wireframes, testing instructions, etc. Clear user stories are built out on the project board and there is a clear progression of tickets moved over to the Done column.

  • Approaching Expectations: Has some documentation but there are gaps in the README such as missing setup instructions, endpoints/wireframes, or testing instructions. Project board is used in the beginning, but is abandoned by the end. Some tickets may have unclear user stories & descriptions.

  • Below Expectations: Has little to no documentation or planning documents. (ie missing wireframes, schema designs, or use of project board)

Story 5 - Responsiveness

As a user, I want the app to be responsive and usable on desktop, tablet, and mobile devices, so I can access the news from any of my devices.

Acceptance Criteria:

  • The app must be responsive and adjust its layout appropriately for desktop, tablet, and mobile screen sizes.
  • The app's functionality must be consistent across different device types.

Story 4 - Routing

As a user, I want the app to be easy to navigate, so I can efficiently get the news information I need.

Acceptance Criteria:

  • The app's layout must be intuitive and easy to understand.
  • The user must be able to easily navigate from the list of articles to the detailed view of an article and back to the list.

Story 3 - Search

As a user, I want to be able to search for articles based on my interests, so I can easily find news that is relevant to me.

Criteria:

  • A search bar must be visible and functional on the home page.
  • The search bar must accept text input.
  • When a search term is submitted, the list of articles must be updated to show only articles relevant to the search term.

Testing

  • home page
  • detailed article
  • search bar
  • error handling

Story 2 - Article Detail

As a user, I want to be able to click on an article in the list and see a detailed view of that article within the app, so I can read the full content without being redirected to another website.

Criteria:

  • Each article in the list must be clickable and link to a detailed view of that article.
  • The detailed view must load successfully and display within the app.
  • The detailed view must display the article's headline, image, date, content, and source.
  • The user must not be redirected to the source website when clicking on an article.

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.