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.
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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
Stay updated with the happenings around the world. Explore News Reader.
![image](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
![image](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
Get News Reader running on your machine:
- Clone the repository:
git clone git@github.com:Sulton88Mehron90/news-reader.git
- Move to the project directory:
cd news-reader
- Install dependencies:
npm install
- Start the app:
npm start
![image](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
News Reader is built using a blend of modern web technologies:
![image](https://private-user-images.githubusercontent.com/119267809/270138961-7b5f262b-9ed5-4594-acb2-5e71efe3c2ff.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTYxLTdiNWYyNjJiLTllZDUtNDU5NC1hY2IyLTVlNzFlZmUzYzJmZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMjFkYWY4YmRlZjM4NzQ4NWJjNTRlNzljM2VmYTcwODlkMzBmMjYyMmFhN2QwN2UxZmMyYTJjNzA5ZjM3ZGY3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.O9KoHkME5NaDvKffaaittZyDM3gwVanIwrfvpDPQBaE)
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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
- 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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
Meet the developer behind News Reader:
Parvin A. Sattorova LinkedIn || GitHub |
![image](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)
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](https://private-user-images.githubusercontent.com/119267809/270138967-d07cdccf-01dc-4aad-ab97-143def51d789.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTkxMjUsIm5iZiI6MTcyMzUxODgyNSwicGF0aCI6Ii8xMTkyNjc4MDkvMjcwMTM4OTY3LWQwN2NkY2NmLTAxZGMtNGFhZC1hYjk3LTE0M2RlZjUxZDc4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMzEzNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODIxZjBhMThiOGExMmRlYjNhMzA5OTFiOGFiNzA0NjZlMjcyNGMwYmIzYzk0YjcwOTJmZDJiMWZhNmQ2ZjExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.renzdr7_i7J5lz9DiCNfUNS1Saon3USrmSx8WDZWhQs)