NexTechNews - The Premier Tech News Aggregator

Website

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Frontend Folder Sructure
4. Roadmap
5. Contact

About The Project

NexTechNews is a news aggregator that provides the latest news from the world of technology. It is built using Next.js, Tailwind CSS and NextUI. It uses the NewsAPI to fetch the latest news from various sources. The website is hosted on AWS EC2 instance. (Our website is not fully responsive yet, so please view it on a laptop or desktop for the best experience.)

Features

• Get Top Headlines from the world of technology
• Search for news by keywords
• Filter news by source
• Sort news by date, popularity and relevancy
• Explore news by date ranges
• Read full article on our website itself
• Switch between light and dark mode
• Get Started button for easy navigation

(back to top)

Built With

• Next.js
• React
• Tailwind CSS
• NextUI
• NewsAPI

(back to top)

Getting Started

Follow these instructions to set up and run the project locally on your machine.

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repository:

   git clone https://github.com/mittal-ishaan/dotflo-assignment.git

2. Navigate to the project directory:

   cd nextechnews

3. Create a virtual environment (optional but recommended -- Step 4-5):

   python -m venv venv

4. Activate the virtual environment:

   • On Windows:

     venv\Scripts\activate

   • On Unix or MacOS:

     source venv/bin/activate

5. Install the required packages:

   npm install

6. Run the development server:

   npm run dev

(back to top)

Frontend Folder Stucture

└── nextechnews/
    ├── public
    │   ├── images/
    ├── src/
    │   ├── app/
    │   │   ├── favicon.ico
    │   │   ├── globals.css
    │   │   ├── layout.jsx
    │   │   ├── providers.jsx
    │   │   └── page.jsx
    │   └── components/
    │       ├── Home/
    │       │   ├── Cards.jsx
    │       │   ├── NewsList.jsx
    │       │   ├── NewsPreview.jsx
    │       │   ├── NewsProviders.jsx
    │       │   ├── ListboxWrapper.jsx
    │       ├──Explore.jsx
    │       ├──icons.jsx
    │       ├──NavBar.jsx
    │       ├──Search.jsx
    │       ├──SearchIcon.jsx
    │       └── Headline.jsx
    ├── .gitignore
    ├── README.md
    ├── jsconfig.json
    ├── .eslintrc.json
    ├── .env.local
    ├── next.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    └── tailwind.config.js

(back to top)

Roadmap

• Make a basic UI
• Add NewsAPI.ai
• Add search functionality
• Add full article view functionality
• Add filter, sort, date range functionality
• Add dark mode
• Add get started button
• Add responsiveness for laptop and desktop
• Add responsiveness for mobile and tablet

(back to top)

Contact

Ishaan Mittal - [email protected]

Github - https://github.com/mittal-ishaan/dotflo-assignment

(back to top)