Back
RevoU 2nd Milestone Project - May 2024
AJ News - News App
A dynamic news application
Project Information
Project Name
AJ News
My Role
Web Developer
Timeline
1 month
Responsibilities
- UI Design
- Frontend Development
- Backend Development
Overview
AJ News is a dynamic news application developed as a part of the RevoU bootcamp (Milestone 2). The app offers users the ability to stay updated with the latest news, explore articles across various categories, and search for specific topics of interest, all in real-time.
Project Goals:
Built using React and TypeScript, AJ News integrates with a popular news API to fetch and display news articles efficiently. Users are presented with a clean and intuitive interface where they can browse news directly on the homepage or filter articles by predefined categories. For more personalized content, a search functionality allows users to quickly find articles based on keywords or topics.
The Homepage displays trending and latest news articles from various sources, giving users a quick snapshot of what’s happening around the world. The Category Pages feature news articles organized by specific topics, such as Technology, Sports, Health, and more, allowing users to narrow their interests. The Search Results Page delivers a customized experience by fetching articles that match user queries, providing a fast and relevant browsing experience.
With a responsive design and smooth user interactions, AJ News ensures that users have an enjoyable and seamless experience, whether they are browsing from a desktop or mobile device.
High Level Goals
01
Deliver Real-Time News
02
User-Friendly Interface
03
Category-Based News Filtering
04
Enhanced Search Functionality
Initial Challenges
One of the initial challenges in developing AJ News was integrating the external News API with React and TypeScript. Ensuring proper API calls, error handling, and parsing data while maintaining type safety was critical to the app’s functionality.
Another challenge was optimizing the user interface to load articles quickly without compromising the performance or user experience. Handling a large volume of articles, especially with a real-time feed, required implementing performance optimizations such as lazy loading and pagination.
Lastly, designing the application for both desktop and mobile views presented some difficulties, particularly ensuring that the UI remained consistent and user-friendly across all device sizes.
Research and Design
The research phase involved exploring multiple news APIs and evaluating their response formats, ease of integration, and reliability. The decision to use a specific News API was based on factors such as:
- Availability of news from diverse categories
- API response speed and reliability
- Documentation and ease of use within a React and TypeScript setup
Additionally, researching UI/UX best practices was a key focus. The aim was to make navigation as seamless as possible, so design inspiration was drawn from leading news platforms like BBC News and Google News. User behavior studies were also considered to understand how individuals typically interact with news apps, such as prioritizing certain categories and performing frequent searches.
Tech Stack Used in AJ News
TypeScript
TypeScript is a superset of JavaScript that adds static typing to the language. By using TypeScript in AJ News, the development process became more predictable and less error-prone.
React
React is a popular JavaScript library for building user interfaces. In AJ News, React was crucial for creating a dynamic, fast, and interactive experience for users.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that was used to style the AJ News application.
AJ News GitHub Page