DEV Community: Joseph Louie

Podcast Content Generator

Joseph Louie — Mon, 25 Nov 2024 06:24:34 +0000

Building a Podcast Content Generator with AssemblyAI

This is a submission for the AssemblyAI Challenge: No More Monkey Business.

What I Built

I built a web application that helps users quickly generate summaries from audio files. The app accepts audio uploads in various formats (MP3, WAV, OGG, M4A) and uses AssemblyAI's powerful API to transcribe and summarize the content.

The application is built using:

Next.js 14 with App Router
TypeScript
Tailwind CSS and Shadcn UI
AssemblyAI API to transcribe and summarize the audio using AssemblyAI's Lemur API

Demo

You can find the source code for this project on GitHub.

Here's how the application works:

Homepage of the application:

File Upload:

File summary generating key points:

Journey

Implementing this project was an exciting learning experience. Here's how I approached it:

Frontend
- Built a responsive UI using Next.js and Tailwind CSS
- Implemented drag-and-drop file upload
- Created a loading state with a custom spinner component
AssemblyAI Integration
- Set up secure API key handling using environment variables
- Implemented file upload and transcription using AssemblyAI's API
- Added error handling for various edge cases
User Experience
- Added visual feedback during file upload and processing
- Designed an intuitive summary display component
- Ensured mobile responsiveness

Challenges and Solutions

The main challenges I faced were:

File Upload Handling: Implemented proper file validation and error handling
API Integration: Created a robust system for handling API responses and errors

Future Improvements

I plan to enhance the application with:

User authentication system
Saving and managing multiple summaries
Additional customization options for the summary format
Support for more file formats

This project demonstrates the power of AssemblyAI's API. The combination of easy-to-use interface and powerful backend processing makes it a valuable tool for podcast producers and content creators.

React Express NeonDB starter kit

Joseph Louie — Mon, 02 Sep 2024 02:51:38 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

Technologies Used

Frontend

React 18
TypeScript
Redux Toolkit
React Router
React Query
Tailwind CSS
Shadcn UI
Axios
Zod

Backend

Express
Prisma
PostgreSQL (via Neon)
Passport JWT

Link to Kit

https://github.com/jolouie7/react-express-neon-starter

Your Journey

The technologies in this kit are modern with some older tried and true technologies in the backend.

Best Time to Buy and Sell Stock in Python

Joseph Louie — Sun, 03 Jan 2021 02:15:34 +0000

You can find the leetcode problem here.

Question:

Say you have an array for which the ith element is the price of a given stock on day i.

If you were only permitted to complete at most one transaction (i.e., buy one and sell one share of the stock), design an algorithm to find the maximum profit.

Note that you cannot sell a stock before you buy one.

Example 1:
Input: [7,1,5,3,6,4]
Output: 5
Explanation: Buy on day 2 (price = 1) and sell on day 5 (price = 6), profit = 6-1 = 5.
Not 7-1 = 6, as selling price needs to be larger than buying price.

Example 2:
Input: [7,6,4,3,1]
Output: 0
Explanation: In this case, no transaction is done, i.e. max profit = 0.

Brute Force Solution:

I would use a nested for loop to compare a number and the other numbers to the right of it to find the max profit.

def maxProfit(prices):
        max_profit = 0

        for earlier_price in range(len(prices)):
            for later_price in range(earlier_price + 1, len(prices)):
                if profit < prices[later_price] - prices[earlier_price]:
                    max_profit = prices[later_price] - prices[earlier_price]
        return max_profit

I'm updating the max_profit whenever I find a profit that is greater. For my for loops, I don't want to count the numbers to the left of the eariler_price and I don't want to double count the eariler_price. To prevent this I increased the beginning range by 1 (earlier_price + 1).

If you copy and paste this solution into leetcode it will give you time exceeded because this algorithm runs in O(n^2) time and o(1) space. We are essentially looping through once for each number times all the other numbers.

Optimal Solution:

We are going to keep track of the max_profit and the minimum number that we have seen so far. We are going to loop through each number in the list, and see if there is a lower number than our minimum_num. If there is, we reassign the minimum_num. We also decide if the max_profit stays the same or if we reassign it with our new calculated profit. This algorithm doesn't make new space and only goes through the list once.

def maxProfit(prices):
        max_profit = 0
        minimum_num = 100000

        for num in prices:
            if num < minimum_num:
                minimum_num = num
            max_profit = max(max_profit, num - minimum_num)
        return max_profit

You might be wondering why is our minimum_num so high? Where did you get this number from? This is a very high number I set because if I were to set the minimum_num to be 0, then it might be lower than anything in our list. You could also set the minimum_num to the first number in the list too. The minimum_num will most likely be replaced in the first iteration of our loop.

max_profit = max(max_profit, num - minimum_num)

I believe this is the most important step in this algorithm because it's where you decide whether to update max_profit or not.

Conclusion

This algorithm uses the Greedy Approach, which says that we are going to have a variable/variables that we will update as we find something better.

Thank You for reading!

Divide and Conquer

Joseph Louie — Fri, 11 Dec 2020 21:56:54 +0000

Divide and Conquer is a popular algorithm technique normally used on an array/list. The idea is to divide the list in half until you find your target or left <= right condition is not met. This reference will mainly be for reference for those who don't remember how binary search works.


def binary_search(nums, target):
  left = 0
  right = len(nums) - 1

  while left <= right:
    mid = left + ((right - left) // 2)

    if nums[mid] == target:
      return mid

    if target < nums[mid]:
      right = mid - 1
    else:
      left = mid + 1
  return -1

Below shows how binary search would work with an odd number of elements in the list.

Below shows how binary search would work with an even number of elements in the list.

Note: With an even number of elements we pick the left element instead of the right.

Thank You for reading! I'm hoping to do this for more algorithm patterns.

My favorite place to look for icons

Joseph Louie — Mon, 30 Nov 2020 04:17:35 +0000

When I'm working with react I would go to fontawesome to look for a nice icon. I would try to make it work in my react app but somehow, it just won't work. I found this site that seemed like it was made for react apps. It's currently my favorite site to get icons. It has all kinds of styles for icons too.

React Icons

This site has saved me a lot of headaches. It uses icon components similar to how you would import another file you wrote in react.

Thank You for reading my short post! Have you heard of React Icons? Do you have another favorite icons site? Let me know in the comments!

My experience using AWS S3 and Multer to upload a photo

Joseph Louie — Sat, 21 Nov 2020 06:17:25 +0000

This is a single file upload only

While creating my Medium clone called Freemium, I decided I want to have a photo upload feature because I've never implemented that feature before. I specifically wanted to use AWS because that's what most companies want here in the bay area. I knew that I wanted to use S3 because that was AWS's file storage system.

What I wanted to happen

I first went on Youtube and looked at a couple of videos on what it might look like uploading photos from my node.js backend to S3. There were many videos of people using node.js to upload to S3 and there were many videos of people using react to upload to S3, but it was kind of hard to find anything that used react -> node.js -> S3. After implementing node.js -> S3 I tried to create a simple react.js frontend to hit my backend but nothing worked. It could have been because I was using redux action creators to hit my backend but I'm not sure.

How did I go about learning AWS S3?

There were 2 articles that stood out to me that I've tried and were up to date.

Here is an article by Fabiano. He has revised his article with typescript in mind.
File Upload — Express, MongoDB, Multer & S3 by Tyler Knapp. This article was the one I used and worked for me. He also has a post for a react frontend but it's pretty simple. You can find that at the bottom of this article. The only concern I have with his way is that he uses Multer S3 which by the looks of it, hasn't had any commits in 2 years. That's a long time. > In his post he has standard CORS settings but it doesn't work now, maybe because amazon updated their input requirement. They want your CORS to be JSON. Here's what I used:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Heres the Bucket Policy that worked for me

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR BUCKET NAME>/*"
        }
    ]
}

I have my Block public access turned off. You can enable it but I think you might have to configure and look for how to deal with signed URLs.

An issue I ran into when I went to test the photo upload on a live site.

When I manually tested the file upload feature it didn't work. This is the error I got:
"The request signature we calculated does not match the signature you provided. Check your key and signing method."

After an hour of googling I figured that it was either:

There was an extra character I didn't expect in my key
I had to include a request header that I was missing
I wasn't allowing my frontend access to my backend aka. CORS
I just needed new keys

I tested every one of the problems in that order and after seeing a GitHub forum post of a comment with 20+ thumbs up saying "I just generated new keys", I tried it and it worked. I didn't believe this would work because my keys were only a week old. My new keys were longer than my old keys though.

Sidenote: other resources I used worked for node.js -> AWS S3, maybe if I didn't use a redux action to try to hit my backend then maybe it might have worked. I can link the resources I think might have worked in the post if anyone wants to know.

Thank You for reading! Comment down below what resources worked for you.

Check out my Medium Clone. Link Here to view Freemium

Controlled Form Inputs using React hooks

Joseph Louie — Sun, 15 Nov 2020 03:05:21 +0000

Why do you need Controlled Forms?

One reason why someone might use controlled inputs is to validate the input before submission.

The overall process of now controlled inputs work

user types -> calls handleChange -> sets the data based on the name

NOTE: setName/setUsername/etc are async

An example of how to implement controlled inputs in react hooks

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // Where our state is being stored
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // Everytime input changes we update the state
  const handleChange = (e) => {
    if (e.target.name === "name") {
      setName(e.target.value);
    } else if (e.target.name === "username") {
      setUsername(e.target.value);
    } else if (e.target.name === "email") {
      setEmail(e.target.value);
    } else if (e.target.name === "password") {
      setPassword(e.target.value);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("name: ", name)
    console.log("username: ",username)
    console.log("email: ",email)
    console.log("password: ",password)
  }

  // The value will be based on the state
  return (
    <div className="App">
      <h1>Controlled input</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>name</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>username</label>
          <input
            type="text"
            name="username"
            value={username}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>email</label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={handleChange}
          ></input>
        </div>
        <div>
          <label>password</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={handleChange}
          ></input>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Thank You for reading! I know that the part where we update the state can be improved to be more DRY, but I just find that the if-else statements make it easy to understand. If you have a better way to implementing that part let me know in the comments. This is usually what I would use when I implement a controlled form input.

First week of November plans

Joseph Louie — Tue, 03 Nov 2020 01:31:47 +0000

What I'm working on

I've enjoyed the idea of cloning things as projects to put on your portfolio. Some advantages of cloning an existing site are you don't have to think about the UI too much, you have ideas of what functionality to include, and there might be other clone projects you can reference. With that being said, I've been working on a medium clone, something like Conduit.
For this project, I'm planning to use the MERN stack with redux and typescript.
I've already built out a lot of the auth for the web app, so I'm excited to build the core functionality for the medium clone. I'll be updating my progress through blog posts.

Experience job hunting

My experience with the job hunt hasn't been the best, but I'm determined to find out what my problem is. My current issue right now has been that I haven't been getting many interviews. I think this could be because of my portfolio, it might not be strong enough. I'm hoping that using typescript to build the medium clone will put me on some people's radar.

Thank You for reading! Let me know what you're working on, what worked and what didn't work for you during the job hunt, or your experience learning/using typescript.

Starting to blog again

Joseph Louie — Mon, 02 Nov 2020 03:27:28 +0000

Hi, my name is Joseph. I have been job hunting for a couple of months now after finishing my coding Bootcamp, and I can't say it has been easy. There are many days where I don't feel motivated to program and flat out depressed at all the rejection letters I get. If you're in the same situation as me, keep trying! Find something that will motivate you to program.

Let's get into the reason for my title. Yesterday, I came across a podcast by FreeCodeCamp. They did an episode on Shawn Wang aka. SWYX. I've been in the ReactJs subreddit for a long time so I've seen him a lot while browsing the subreddit. He is a self-taught developer who made the transition from the world of finance to software development at the age of 30.

Here's the episode if you want to listen to it. Podcast: Leaving a $350K/year job to learn coding - Shawn Wang interview. Be warned that it's kind of long (2hours).

The main talking points that I got from the episode were, he encourages others to do "No Zero Days" and "Learn in Public".

No Zero Days

What do those mean? "No Zero Days", is what I think of as doing something that will bring you one step closer to the developer you dream to be. This could be something simple like writing down a todo list of all the features you want in your project you're currently working on. Do something every day and you will be surprised at what you can accomplish. Just have something to get the ball rolling, because once it starts rolling it will be hard to stop!

Learn in Public

"Learn in Public", is just as it sounds. Most of us, me included don't blog, don't tweet, don't answer/ask questions on StackOverflow, don't participate in Reddit discussions. Let's say for example that you blog about something that you have learned recently. Others may take notice and thank you for your valuable insight. Maybe, no one reads your post, that's fine! If no one reads your post you can have something to refer back to when you forget something. Who knows you may have a React problem and the React genius himself Dan Abramov might come by to give you some help. You might be asking yourself, "what if I'm wrong?". That's okay! Shawn talks about how if you put in the effort and try to output good content, even if your wrong people will chime in to correct you.

As the last point, if anything blog, create youtube videos, tweet, create a cheat sheet for yourself.

Thank you for reading! I'll be sure to practice Learn in Public when I can. Let me know in the comments if you've seen this episode or what are your thoughts on Learn in Public?

Resources

How to get started with Learn in Public

Why you shouldn't spend too much time on 1 Leetcode problem

Joseph Louie — Mon, 22 Jun 2020 00:48:07 +0000

When practicing Leetcode problems if you can't figure out the solution in 20 minutes you should probably look at the solution. Some people may disagree with me on this. Why I think you should quit after 20 minutes is because if you can't figure out how to solve the problem after this amount of time you won't be able to figure it out with a couple more minutes. If you do come up with a solution is might not be the most optimized solution. Looking at the solution you can figure out how to get to the optimized solution. You might even have figured out a technique that you didn't know before. Don't spend too much time looking at the solution but do understand it. How did the solver get to the final solution? Doing this over and over again will expose you to a lot of problems. Hopefully later on you will recognize the question or technique you need to solve the problem.

Exposing yourself to many problems is better than understanding the 1 problem in depth. You want to understand how to solve many different problems not just that 1 problem. You only have a limited amount of time until your interview or until someone asks you for an interview.

Thank you for reading.

My first attempt at using python's selenium

Joseph Louie — Sat, 13 Jun 2020 07:58:50 +0000

This post below will be about what my experience was like using python's selenium.

Reason for wanting to learn selenium in the first place

I love automation, it's really cool when you can become more productive by allowing a bot to do repetitive work for you. I had a great project idea that I wanted to implement that involved selenium and youtube. In my subscription feed I had channels where i would watch all their videos everyday. Everyday I would add the videos to either a watch later playlist or add it to queue. I wanted a way for a program to do this for me.

Results of using selenium

The selenium docs are pretty clear and straight forward. My first task was to setup selenium and chrome webderiver. This took some time because I had to configure the path to my downloaded chrome webdriver and set a path to my chrome location. If you have your chrome in it's default location (where it usually would be when you finish downloading it) this wouldn't be a problem for you. After configuration, I was able to open a site using selenium. I soon realized that I couldn't sign in to google because google was protecting my account from selenium. I scrapped my project idea, but it was fun just openning up a website page automatically.

Future

In the future I plan to use selenium for testing, a new project, or some simple task where I click something everyday.

Resource I used to setup and use Selenium

Thanks for reading.

Merge Two Sorted Lists in Python

Joseph Louie — Thu, 04 Jun 2020 05:17:06 +0000

Merge two sorted linked lists and return it as a new sorted list. The new list should be made by splicing together the nodes of the first two lists.

Example:

Input: 1 -> 2 -> 4, 1 -> 3 -> 4
Output: 1 -> 1 -> 2 -> 3 -> 4 -> 4

Approach

We get 2 linked lists. l1 and l2 we can consider as the head of their own lists. There are many approaches to this but in this blog we are going to create a new list node and return that. We go through our 2 linked lists and compare the heads. Our new list node will then reference the lower node of the 2. If they are both the same it doesn't matter which one we reference. Once we finish a list we will just reference the rest of the other list. We know a list is finished once it hits None value. Couple things we have to be aware of is:

We are using a dummy variabe to create our new list node
We need to keep track of the head, which is why we create 2 list nodes
We need to move l1 and l2 pointers (heads) accordingly
We have to move our dummy pointer everytime we reference a node

Solution

# Definition for singly-linked list.
# class ListNode:
#     def __init__(self, val=0, next=None):
#         self.val = val
#         self.next = next
class Solution:
    def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNode:
        # We create a new linked list with dummy being the head.
        # 0 is just a val i assign, anything < 1 is fine
        dummy = ListNode(0)
        head = dummy

        # While niether list has reached the end
        while l1 != None and l2 != None:
          # we compare the pointers to see which one is lower
          if l1.val < l2.val:
            # dummy node points to the next node, which this case is l1
            dummy.next = l1
            # move the pointer at l1 forward
            l1 = l1.next
          else:
            dummy.next = l2
            l2 = l2.next
          # reassign dummy pointer to keep up with the newly referenced nodes
          dummy = dummy.next
        # When one list reaches the end
        if l1 == None:
          # Add the rest of the nodes from l2
          # This works becasue each node has a reference to it's next node
          dummy.next = l2
        else:
          dummy.next = l1
        # we don't want to return None or our default val. Return val after none
        return head.next

One thing to note about linked lists is that a head and a linked list is synonymous

We are not creating any new nodes besides our dummy node and head node. Everything I do below is just referencing (AKA node pointing to another node).

Step by Step Example

# l1: 1 -> 2 -> 4 -> None
# l2: 1 -> 3 -> 4 -> None
# dummy: 0
         ^

1st iteration

# l1: 1 -> 2 -> 4 -> None
      ^
# l2: 1 -> 3 -> 4 -> None
           ^
# dummy: 0 -> 1
              ^

2nd iteration

# l1: 1 -> 2 -> 4 -> None
           ^
# l2: 1 -> 3 -> 4 -> None
           ^
# dummy: 0 -> 1 -> 1
                   ^

3rd iteration

# l1: 1 -> 2 -> 4 -> None
                ^
# l2: 1 -> 3 -> 4 -> None
           ^
# dummy: 0 -> 1 -> 1 -> 2
                        ^

4th iteration

# l1: 1 -> 2 -> 4 -> None
                ^
# l2: 1 -> 3 -> 4 -> None
                ^
# dummy: 0 -> 1 -> 1 -> 2 -> 3
                             ^

5th iteration

# l1: 1 -> 2 -> 4 -> None
                ^
# l2: 1 -> 3 -> 4 -> None
                      ^
# dummy: 0 -> 1 -> 1 -> 2 -> 3 -> 4
                                  ^

break out of while loop

# l1: 1 -> 2 -> 4 -> None
                ^
# l2: 1 -> 3 -> 4 -> None
                      ^
# dummy: 0 -> 1 -> 1 -> 2 -> 3 -> 4 -> 4
                                  ^

If there were more nodes after the second 4 you would get references to those nodes becasue the second 4 is going to point to another node.

Return the head which is first 1

return head.next

Let me know how you liked the blog. If anything is wrong please feel free to comment below or message me directly.

Problem on Leetcode

Video solution in Java by Kevin Naughton Jr.