myNews

myNews

A News Application Built with React, Tailwind CSS, and API Integration

myNews is a news application I developed to enhance my skills with React.js, Tailwind CSS, and API integration. The goal of this project was to create a front-page experience that showcases the top news headlines from the United Kingdom, as well as provide dedicated pages for different news categories.

Functionality

  • Responsive Design: The application is optimised for various display sizes, including desktop, tablets, and smartphones.
  • Mobile Navigation: The navigation menu slides in from the left of the screen when the hamburger icon is clicked, providing a seamless mobile experience.
  • Loading Screen: The application implements a loading screen to enhance the user experience and provide a more polished interface.
  • Page Routing: The project utilises React Router to create page routes for different news categories, such as World, Business, Technology, Sports, Science, and Health.
  • API Integration: The news data displayed in the application is sourced from the GNEWS API, allowing you to effectively integrate external data sources.

Tech Stack

  • Vite Framework: The application was built using the Vite framework, which is a modern and efficient build tool for React projects.
  • React.js: You leveraged the power of React.js, a popular JavaScript library for building user interfaces.
  • Tailwind CSS: The application’s styling and layout were implemented using the Tailwind CSS utility-first CSS framework.
  • React Router: The page routing functionality was achieved through the integration of the React Router library.
  • GNEWS API: The news data displayed in the application was sourced from the GNEWS API, a comprehensive news data provider.
  • Google Fonts: The project utilizes fonts from the Google Fonts library to ensure a visually appealing typography.
  • Adobe Illustrator: The site’s logo was created using Adobe Illustrator, demonstrating my design skills.

This myNews project showcases my ability to combine various technologies, such as React.js, Tailwind CSS, and API integration, to create a functional and responsive news application. The inclusion of features like mobile navigation, loading screens, and page routing demonstrates my attention to detail and commitment to providing a seamless user experience.

Technology Used

JavaScript

JavaScript

React

React

Tailwind

Tailwind

Vite

Vite