The frontend project is responsible for providing a user-friendly interface for the news aggregator application. It allows users to search for news articles, filter results based on various criteria, and manage their preferences and settings. This document provides an overview of the frontend project, including its features, technologies used, and important considerations.
The frontend project offers the following key features:
- News Search: Users can search for news articles across multiple sources using keywords, categories, and specific sources.
- Filter and Sorting: Users can refine their search results by applying filters based on categories, dates, and other criteria. They can also sort the results based on relevance, date, or other parameters.
- User Registration and Login: Users can register an account and log in to access personalized features and preferences.
- User Preferences: Logged-in users can save their favorite sources, manage tags, and customize their news feed based on their interests.
- Latest News: The frontend displays the latest news articles from popular sources to keep users updated.
- Responsive Design: The interface is designed to be responsive, providing an optimal viewing experience across different devices and screen sizes.
The frontend project utilizes the following technologies and frameworks:
- React: A popular JavaScript library for building user interfaces.
- TypeScript: A statically typed superset of JavaScript that enhances developer productivity and provides improved type safety..
- Axios: A popular HTTP client for making API requests from the frontend to the backend.
- React Router: A library for managing navigation within the application.
- Docker: A containerization platform for packaging the frontend application into a portable and reproducible environment.
- Styled-components: A CSS-in-JS library for writing styled components with ease.
- Material UI: A popular React component library that provides pre-designed UI components following the Material Design guidelines.
These instructions will help you get a copy of the project up and running on your local machine for testing purposes.
To set up and run the frontend project locally using Docker, follow these steps:
- Clone the project repository from GitHub to your local machine.
git clone https://github.com/lucasbbs/news_aggregator_frontend.git- Change directory into the newly created folder.
cd news_aggregator_frontend- Install all required dependencies
docker-compose upThe frontend project follows a structured organization to ensure modularity and maintainability. Here's an overview of the project's directory structure:
- /src: Contains the main source code of the frontend project.
- /components: Contains reusable React components used across different pages.
- /pages: Contains the main page components representing different sections of the application.
- /services: Includes utility functions and API service modules for making backend requests.
- /hooks: Includes custom hooks for global state management and other shared functionality.
- /assets: Stores static assets such as images, icons, and fonts.
- /public: Contains static files that are directly copied to the build output.
To use the frontend application, follow these steps:
- Access the application through the provided local development URL.
- Use the search functionality to find news articles based on keywords, categories, and sources.
- Apply filters and sorting options to refine the search results.
- Register an account or log in to access personalized features.
- After logging in, you can save your preferred categories for different news sources. This allows the application to prioritize articles from those categories in your news feed.
- Explore the latest news articles from popular sources on the homepage. Customize your news feed by managing your saved categories and preferences in the settings section.
- Update your saved categories as your interests change, and the application will adjust your news feed accordingly.
- Enjoy a personalized news browsing experience tailored to your preferred categories and sources.