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.

My 30-Day Startup-Style Sprint in a Corporate World

Irwan Phan — Fri, 01 Aug 2025 03:06:26 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: After the Hack.

One and a half month ago, I joined a company with one mission: manage its online business and develop websites and apps to operate the business lines. It sounded straightforward—but reality had a different plan.

Hands On

I spent my first two weeks digging into the company’s existing assets and resources. The verdict? From my point-of-view, the legacy website was beyond salvage, a chaotic architecture, and a database without any proper model or abstraction. I would say it was a business risk.

A tough decision had to be made: rebuild from scratch, starting with the main website.

“My GitHub Heatmap Looked Like I Was Working Nonstop”

In less than 30 days, I delivered a brand-new full-featured e-commerce platform. My GitHub heatmap looked like I had given up on sleep—and for the most part, I had. But the results were worth it:

Full-fledged e-commerce with payment gateway integration.
Dynamic shipping costs
Mapbox integration for store and pickup point locations.
New routing with permanent redirection from the legacy site for SEO continuity.
Dynamic admin panel to manage SEO, product validation, data imports, and multi-role workflows across departments, etc.

Going Live Too Soon, Testing Left Behind

The biggest challenge wasn’t technical—it was time. Barely two weeks into development, I was asked to go live immediately. Standard practices like unit testing, integration testing, usability testing, UAT, penetration testing, and stress testing? Forget it. The stakeholder doesn't hold it as important. They were skipped, and I couldn't argue otherwise.

I asked my good friend to help me setup and config server on AWS, and it's live on day-27. Just three days after going live, I continue to debug critical transaction workflow bugs—in production.

Knowing that the old website had been attacked daily and frequently went down, I also implemented honeypots, bot prevention, and extra security layers in record time.

“We Are Going To Launch The Next Business in 10 Days.”

While still debugging the first site, I was already asked to deliver the second one in another 10 days. The workload skyrocketed, and burnout and anxiety started creeping in. But maybe I'll share that story on another time.

Reflection, A Step Back, My POV

This experience felt like running a startup sprint—inside a corporate environment. It taught me that technical skills alone aren’t enough. Managing expectations, negotiating deadlines, and balancing quality vs. speed are just as important.

Agility matters, but sustainability matters more. Shipping fast is exciting, but doing it repeatedly without proper planning leads to burnout.
Security is non-negotiable. An insecure product isn’t just a technical risk—it’s a business risk.
Team culture matters. Doing everything alone is doable for a short sprint, but building a product—and a career—requires building teams and processes. But onboarding people and team building with a super-tight schedule is too scary and not a feasible option for me.

If I’m to scale this experience into a repeatable, sustainable development model—one that balances speed, quality, and personal well-being. The steps would be:

Building a small, trusted team to handle future projects. I do have that one and some most trusted buddies. But they're currently not with me on this project.
Developing templates and reusable modules for faster, safer deployments.
Sharing more about these lessons so others don’t have to learn them the hard way.

One more thought

Sometimes the hack isn’t in the code—it’s in how we manage time, energy, and expectations.

And of course, thanks to AI, I was able to minimize downtime and reduce wasted thinking time.

It wasn’t just about writing code faster—it was about having a technical assistant on-demand:

Suggesting architecture decisions
Helping me debug faster
Generating boilerplate code in seconds instead of hours

What about you?

Have you ever had to ship something like this? How did you handle it? Let’s talk in the comments.

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.