Hello everyone! Today I am introducing Bytes, an AI-powered progressive web app (PWA) that delivers news to users in an innovative and user-friendly way.

🔗 Links

• Bytes website

• Github repository

🤔 What is Bytes?

Bytes is an AI-powered progressive web app (PWA) that delivers news to users in an innovative and user-friendly way. With its infinite scroll format and AI-generated short summaries of articles, Bytes provides users with a fast and easy way to stay up-to-date on the latest news and events.

Whether you're on the go or simply looking for a more efficient way to consume news, Bytes is the perfect solution. The app is designed to be intuitive and easy to use, with a clean and modern interface that puts the focus squarely on the news.

Here is an introduction video of Bytes👇🏻

It is recommended to use Bytes app for the best experience!

You can install Bytes as an app directly on your desktop or mobile by clicking on the install button in the top bar in the homepage of Bytes.

If you don't see the install button, it means that you have either already installed the app 🥳 or your device doesn't support PWA 🥺.

If you are using iOS, you can install Bytes as an app by clicking the share button in the bottom bar and then clicking on the "Add to Home Screen" option, since iOS doesn't support PWA yet.

👀 Why did I want to create Bytes?

• Staying informed about current affairs is important to many people, including me, as it allows one to keep up with the latest developments in the world around them. However, with so much information available from a variety of sources, it can be overwhelming to try to read and digest all of it. Many people may not have the time or inclination to read through lengthy articles regularly, yet still want to stay informed.

• This is when I thought building a good app that provides summarized article content can be incredibly valuable. By providing concise and easily digestible summaries of news articles, such an app can enable people to stay informed about current affairs without having to spend hours reading through multiple articles. This can help people to stay up-to-date with the latest developments in the world, even when they are short on time.

⭐️ Features

• Bytes offers users access to real-time news updates from four different countries, namely India, the USA, Australia, and the UK. With updates being provided every 20 minutes, users can rest assured that they are receiving the most up-to-date and relevant news from these regions.

  

• Bytes leverages the power of Artificial Intelligence to provide users with a summarized version of each news article. This feature allows users to quickly and easily get an overview of the key points and main ideas presented in the article. By utilizing state-of-the-art NLP-based MindsDB models, Bytes is able to generate highly accurate and relevant summaries that capture the essence of each article. This feature not only saves time for users but also provides them with the necessary information to make informed decisions about the news they are consuming.

  

• Bytes also offers sentiment and emotion prediction for each news article, allowing users to quickly assess the tone and overall theme of the article. This feature provides an additional layer of information that can aid in understanding the news and its potential impact.

• Bytes provides a seamless and smooth experience, allowing for an infinite scrollable list of all articles without any noticeable lag or delay.

🪜 Tech stack

• NextJS with TypeScript

• TailwindCSS

• React-query for network requests

• Prisma (ORM)

• Newsdata.io APIs (for real-time news data)

• MindsDB for text summarization and prediction models

• MindsDB-JS-SDK for connecting to MindsDB from the backend

• Azure functions for backend tasks

• Database - Azure Database for MySQL (Cloud-hosted MySQL DB)

• Vercel (for cloud deployment and analytics)

🤯 How does Bytes work?

1. An Azure function is triggered every 20 minutes and a random selection is made from a group of four countries - India, the USA, Australia, and the UK - along with several categories. Then based on the randomly selected country and categories, the relevant articles are fetched from the newsdata.io real-time news API.

2. Once the articles are fetched, the contents are sent to a text summarization model in MindsDB, which generates a concise summary. This summary is then fed into both a sentiment prediction model and an emotion prediction model for analysis. Once the summarization and prediction data are generated, it is inserted into the database along with the original article data.

   Here are the code snippets of the MindsDB models that I have used in Bytes:

   Text Summarization model (OpenAI)

    CREATE MODEL text_summarization_openai
    PREDICT summarized_article
    USING
    engine = 'openai',
    model_name = 'gpt-4',
    max_tokens = 5000,
    prompt_template = 'Summarize the given paragraph within a maximum of 100 words only in full sentences ending with full stops. Also separate each sentence with a "|" - {{text}}';
   

   Sentiment prediction model (Hugging face)

    CREATE MODEL hf_sentiment_classifier
    PREDICT sentiment
    USING
    engine = 'huggingface',
    task = 'text-classification',
    model_name = 'cardiffnlp/twitter-roberta-base-sentiment',
    input_column = 'text',
    labels = ['neg', 'neu', 'pos'];
   

   Emotion prediction model (Hugging face)

    CREATE MODEL hf_emotions_classifier
    PREDICT emotion
    USING
    engine = 'huggingface',
    task = 'text-classification',
    model_name = 'j-hartmann/emotion-english-distilroberta-base',
    input_column = 'text';
   

3. The front-end design presents an aesthetically pleasing interface that facilitates the seamless display of articles in an infinite scroll format. This feature allows for a more engaging and immersive user experience, as it enables a smooth and uninterrupted flow of content.

👌🏻Best practices

• Above are the Lighthouse statistics for Bytes, showcasing its exceptional performance and adherence to best practices. Furthermore, it is noteworthy that Bytes is SEO-friendly and meets accessibility standards.

• Linter was utilized to ensure the absence of any errors in the codebase.

• The codebase of Bytes has been equipped with a Continuous Integration/Continuous Deployment (CI/CD) setup, facilitated by Vercel. The codebase contains two branches - one for production and one for development, and both branches have been set with branch protection rules to minimize the occurrence of undesired errors.

💪🏻 Challenges

• The primary challenge that was encountered in the development process was the creation of high-quality and comprehensive summarized content. It required careful phrasing of the MindsDB text summarization model prompt (Hello prompt engineering...😎) to achieve optimal summaries. Also, a custom logic was implemented to ensure that only fully-formed sentences were included in the final summarized content. These enhancements resulted in a more refined and accurate output that better served the needs of the user.

• Another significant challenge encountered in the development of the platform was to ensure that the front-end design was both visually appealing and interactive, while also maintaining a readable and well-organized codebase. Specific tasks included creating an infinite scrollable format for articles and optimizing the loading time for articles, both of which necessitated the implementation of a sophisticated and streamlined codebase structure.

❤️ Impact

• In today's fast-paced world, many young people find it hard to keep up with the ever-changing global affairs due to their busy schedules. They often struggle to find the time and motivation to read lengthy news articles. This is where Bytes can come in handy.

• Bytes can allow youth to stay informed about what's happening around the world without consuming much of their time. Using Bytes, they can broaden their understanding of global events, cultures, and politics, ultimately helping them to become more informed and engaged citizens.

🚀 Future roadmap

• Adding user authentication and providing personalized news recommendations tailored to each user's preferences

• Adding save buttons to each article

• Add support for news from additional countries, as well as the ability for users to select the countries for which they would like to receive news updates

• Push notifications in PWA

• Code optimizations

• Creation of a full-fledged mobile app

and much more!

🙈 A special note to the MindsDB team

A note from me to the MindsDB team

All predictions and summarizations in Bytes are made possible by the innovative technology of MindsDB. As the creator of Bytes, I wanted to take a moment to express my deep appreciation and gratitude to the MindsDB team. Thanks to their cutting-edge technology like AI tables and models, Bytes has been able to provide users with accurate predictions and concise summarizations, allowing them to stay ahead of the game and informed on the latest news and events.

Let me know what you think about Bytes in the comments. Thanks for reading and I hope you have an amazing day!

Follow me:

• Github

• Twitter

Also, you can check out my portfolio here!