Back

AJ News logo

RevoU 2nd Milestone Project - May 2024

AJ News - News App

A dynamic news application

Image 1Image 2Image 3Image 4

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.

Hero Image

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 Logo

    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 Logo

    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 Logo

    Tailwind CSS

    Tailwind CSS is a utility-first CSS framework that was used to style the AJ News application.

Find the project details on GitHub:

AJ News GitHub Page