I've built a web application that efficiently fetches news topics based on user input.

Note: The subscription input is just UI implementation for now.

To run locally

1. Create a new News API key
2. Create a new .env.local file at the root and add the following

NEWS_API_KEY=YOUR_API_KEY

3. Install dependencies by running

yarn install

4. Start the app

yarn dev

The construction of this web app was carefully executed, leveraging the following tools and frameworks:

Tools & Framework used

• App & API Framework: Next.js
• UI: shadcn/ui & Tailwind CSS
• Validation: zod
• Deployment: Netlify
• API: News API

The technologies and frameworks chosen for this project were thoughtfully selected to deliver a refined and modern web application:

Next.js for Enhanced Functionality

Next.js provided a solid foundation for building this application with features like server-side rendering and optimal performance. It allowed for seamless navigation and ensured that users can access news topics swiftly and efficiently.

shadcn/ui and Tailwind CSS for Aesthetics and Responsiveness

A visually appealing and responsive user interface is essential for any modern web app. By utilizing shadcn/ui's custom UI components and Tailwind CSS's utility-first approach, I created a sleek and user-friendly interface that adapts seamlessly to various devices and screen sizes.

zod for Robust Data Validation

Data validation is crucial to maintain data integrity and protect against security vulnerabilities. With zod, I implemented a reliable and type-safe validation system, ensuring that user inputs are accurate and consistent.

Netlify for Easy Deployment

Efficient deployment is essential to deliver updates and improvements promptly. Netlify's integration with Next.js enabled smooth and hassle-free deployment, making it easy to keep the application up-to-date.

News API for Reliable News Data

To provide users with the most current and relevant news topics, I integrated the News API into the application. This ensured a reliable source of news data, enhancing the overall value of the web app.

‍