XYZ News, Full Stack app
News Api listing with Angular and Express.js
XYZ News, Full Stack app
News Api listing with Angular and Express.js
Overview
XYZ News is a full-stack web application that integrates the open-source Hacker News API, providing users with a clean interface to view news articles. The application is built using Angular for the frontend, paired with an Express.js server backend to handle requests efficiently. It features pagination for news categories and external metadata fetching for each listing.
Features
- Full-stack architecture with Angular (frontend) and Express.js (backend)
- Pagination for three distinct news categories
- Optimized requests using a custom Rest/API architecture
- Lazy loading and modular separation of components for better performance
- Mobile-friendly design based on the best practices of Hacker News
- State management with RX.js and caching of HTTP requests
- Theming with Bootstrap and Material design components
- Extensive linting and documentation
- Production-ready code with tests and coverage support
Tech Summary
- Frontend: Angular 11, TypeScript, Bootstrap, Angular Material, RX.js, SCSS, State Management, Rest/API, x-utils-es
- Backend: Express.js, RESTful APIs, JavaScript, Linting, Hacker News API Integration, HTML Scraping, Unit Tests
Outcome
The XYZ News app is optimized for scalability and performance. It provides users with a seamless experience for viewing the latest top news articles, categorized and ready for mobile use. The project leverages modern technologies such as Angular, RX.js, and Express.js to deliver a robust full-stack solution with a focus on clean, maintainable code.
![[1] XYZ News, Full Stack app, News Api listing with Angular and Express.js](/projects/xyz-news/xyz-screen.jpg)
![[1] XYZ News, Full Stack app, News Api listing with Angular and Express.js](/projects/xyz-news/xyz-mobile-screen.jpg)