DEV Community: Irwan Phan

Voice News Summary - AI-Powered News Summaries Read Aloud in Seconds with Redis

Irwan Phan — Sat, 02 Aug 2025 07:46:27 +0000

This is a submission for the Redis AI Challenge: Beyond the Cache.

What I Built

Voice News Summary solves a common problem: information overload. Reading through dozens of articles every day can be time-consuming, and not everyone has time to skim long news posts. This app lets users type any topic, get an AI-generated summary of the latest news, and listen to it immediately.

Key Features

AI-Generated Summaries: Uses OpenAI GPT to produce concise, high-quality summaries.
Text-to-Speech Output: Converts summaries to natural-sounding voice with ElevenLabs TTS.
Redis Caching: Speeds up subsequent requests by storing summaries and audio URLs in Redis.
Serverless Deployment: Built on Next.js and deployed on Vercel for fast, scalable delivery.
Clean UI: Built with TailwindCSS for a minimal and responsive design.

Tech Stack

Frontend: React 19 with Vite, TailwindCSS
AI APIs: Google Generative AI (for summarization)
Database & Cache: Redis using ioredis for connection and caching
Deployment: Vercel (for frontend) + Redis Cloud (for caching & vector storage)

Demo

Live Demo: https://voice-news-summary.vercel.app

Type any topic, get AI-generated summaries, and listen to them instantly.

How I Used Redis 8

Redis powers the core experience:

Caching Summaries: Once an article summary is generated and converted to audio, it’s stored in Redis for fast future retrieval.
Redis Vector Sets: Planned future upgrade for semantic search, allowing related news retrieval beyond exact keyword matching.
Real-time Speed: With Redis Cloud, the app responds in milliseconds, even when handling multiple concurrent requests.

Why It Matters

In a world of information overload, Voice News Summary makes news consumption:

Faster: Get to the core of a story in seconds.
Accessible: Listen to summaries instead of reading long text.
Scalable: Uses AI + Redis to deliver near-instant response times.

What’s Next

Vector Search: Use Redis Vector Sets for semantic search and related topic discovery.
Personalized Feeds: Customize summaries and voices based on user preferences.
Mobile PWA: Turn this into a progressive web app for on-the-go usage.

Built for the Redis AI Challenge to showcase how Redis can power the next generation of AI-driven, real-time applications.

Getting Started With Git? A Complete Git Beginner.

Irwan Phan — Wed, 15 Mar 2023 09:16:29 +0000

I try to recall my first time using git. I was not a tech-guy back then, not even close. Pencil, Pen, and Photoshop was my daily tools back then.

Later I jumped into web development. When my peer told me about collaboration using git, it overwhelmed me with command-line-stuff. I thought it was a really complicated stuff. But my peer just gave me some simple commands for daily use. And I only use those some-simple lines until now, except sometimes-unexpected things happened.

I am writing these down, since I had to share how to use git to my class. And I just gonna skip the complicated parts. Hope it helps

Install Git, If It's Not Installed Yet

Download the installer from https://git-scm.com/download/win, ran the installer, and if you don't understand anything the provided options presented, just go with the default.

Using Git

Git commands can be directly used from VSCode terminal, you can open the terminal by pressing Ctrl + Shift + `. Or you can open it from the top menu Terminal, then choose New Terminal.

If It Is An Existing Repository

1. Clone The Repo

If-it is an existing Repository, go to the repository on Github, click the "Code" button, and copy the git url (you can just click the right side button). then go back to the terminal and type git clone command like this. (using the developer-roadmap repo as example)

git clone https://github.com/kamranahmedse/developer-roadmap.git

2. Config - One time only

This command actually write the config file inside the hidden .git folder. We'll skip it, just remember that you can always re-config using this command.

git config user.email "tapas@someemail.com" git config user.name "Irwan Phan"

3. Add and Commit Changes

To add the files changed to staging, we use the git add command follow by file name or directory/folder name. But we can also just add all the changed files by using . like below.

git add .

The next thing to do after added the changes to staging area is to commit it using git commit command, and remember to always makes the commit title as clear as possible.

git commit -m "change the x part with x2y"

4. Push To Repo (Remote Repository)

Push the committed changes to the remote repo by using git push command follow by remote and branch name, e.g main. If it's a cloned repository, you'll only need to type git push.

git push

If It Is A New Repository

1. Initiate A Repo

To create a new repository, we can use the git init command followed by repository name, or just git init.

git init repo-name

2. Config

Use git config for user name and email used in your Github like mentioned in step #2 above.

git config user.email "tapas@someemail.com" git config user.name "Irwan Phan"

3. Add And Commit Changes

Use git add to add to staging and git commit to commit the changes.

git add . git commit -m "change the x part with x2y"

4. Push To Repo (Remote Repository)

To push to a new remote repository use git push_ command followed by __-u, remote, and branch name.

git push -u remote main

Wrapped

I hope this note could be of help for anyone. I tried to make it as simple as possible. For more information on how to use git, you can visit here https://training.github.com/downloads/github-git-cheat-sheet/.

Implement Sign in with Google using Supabase Auth in NextJS

Irwan Phan — Sun, 26 Feb 2023 08:32:07 +0000

I'm writing this as my personal documentation also, because I was having a hard time when I tried re-implementing this in another project. Feels free to give me advice for better way to implement this.

Get Your Google Credential

Here's the step:

First of all, sign in to cloud.google.com.
Create or select a project
Go to APIs & Services, Credentials
Create Credentials, and pick OAuth client ID
Copy the CLIENT_ID and CLIENT_SECRET to your local .env or note

Enter Google Credentials On Supabase

Here's the step:

Go to your Supabase project, on the left menu pick Authentication
On menu Providers, look for Google, then enable it
Paste Google's CLIENT_ID and CLIENT_SECRET then hit save
Copy the redirect URL and paste to cloud.google.com project, in your previous Credentials, paste to Authorized redirect URIs

Local ENV

Go to your Supabase Project, to Project Settings, API
copy your Project URL to local ENV and name it SUPABASE_URL
copy your Anon Public Key in Project API Keys to local ENV and name it SUPABASE_ANON_KEY

Create a Sign In module

First, install Supabase Client, using npm or yarn

npm i @supabase/supabase-js

Then connect to Supabase, and make sure the URL is available

import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.SUPABASE_URL || ''
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || ''

if (!supabaseUrl) throw new Error('Supabase URL not found.')
if (!supabaseAnonKey) throw new Error('Supabase Anon key not found.')

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

I create a connections folder and create a signIn.ts file inside, for first test run, I do not use any options on the function.

// ./connections/signIn.ts

import { supabase } from "./supabase"

export async function signInWithGoogle() {
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        // options: {
        //     // redirectTo: getURL() // function to get your URL
        // }
    })
}

then create the signOut.ts

// ./connections/signOut.ts

import { supabase } from "./supabase";

export async function signOut() {
    const signOut = await supabase.auth.signOut()
}

Now you can apply the signInWithGoogle() and the signOut() to your preferable trigger.
here's an example, I am using Chakra-UI, you so the theming with Button was preset in theme and there's the Box element, with the react icon

<Button
    onClick={() => {
        toast({title:'Redirecting...'})
        signInWithGoogle()
    }}>
    <Box as={FcGoogle} mr={1} fontSize={20}/>Login
</Button>

I created a component to replace the button after checking the authentication that shown like above.