DEV Community: FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Initiating the DEVengers org. Check out our Introduction!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Sat, 09 May 2026 00:10:07 +0000

Unofficial invite-only group for creators

FrancisTRᴅᴇᴠ (っ◔◡◔)っ for DEVengers

May 8

Welcome to the DEVengers Organization! A group of Extraordinary Individuals that Influenced Dev.to the platform has ever seen!

#discuss #community #watercooler #meta

Comments 3

2 min read

Welcome to the DEVengers Organization! A group of Extraordinary Individuals that Influenced Dev.to the platform has ever seen! 🚀

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 08 May 2026 18:28:58 +0000

Disclaimer: This is a Fan group that is built with love and passion to the Dev.to platform. This group is not affiliated with the Official Dev.to Team in any capacity! This post will be continuously edited based on feedback and updates!

Introduction

Welcome to the DEVengers organization! It is a group of carefully selected individuals that has proven themselves above and beyond their niche and is here to showcase it to the Dev.to platform!

This group is founded by me (Francis)! When I first joined Dev.to, I found many talented individuals sharing their thoughts, work, and advice to the platform. It was helpful for me to expand my skills as a developer and the community is really supportive!

This has led me into creating this organization! The goal is to select individuals who has proven themselves to go above and beyond the expectation they set upon themselves. Additionally, members will share their posts on their specific niche with high quality and easy to follow for everyone on Dev.to!

Content to Expect

Depending on the individual, the content varies. There is no set "theme" to what the DEVengers post. It can be anything ranging from tips/tricks, opinions on DEV, etc. However, the posts will be high quality and useful for developers that needed it!

How do I join?

The recruitment process is not simple. It will depend on each individual and there is no telling on if you are qualified. If the organization leader believes that you are fit for the group, the leader will send the invite via email using the Invite feature.

Thanks!

This is our introduction! Thank you for reading! Feel free to leave any questions or concerns below!

What is your WPM (Words per Minute)? #2

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 05 May 2026 14:28:36 +0000

Cover Video is from DC's Legends of Tomorrow on Guitar

I am curious, What is your WPM?

The highest WPM and Accuracy for the 1 minute and 5 minute, shared in the comments, will be featured on my next Monthly Dev Report respectfully :)

Take the 1 Min Test Take the 5 Min Test

Current Dev.to World Record Holder

Here are the current record holders!

1-minute Challenge! 🏅

Jatin Sharma Follow

Turning Web Dreams into Reality, Just Like Tony Stark's Vision

@j471n With a 121 WPM with 98% accuracy!

5-minute Challenge! 🏆

Jon GottfriedFollow

Co-founder of Major League Hacking

@jonmarkgo With a 114 WPM with 98% accuracy!

Submission Instruction

Complete the challenge. Either do 1 minute, 5 minute, or both!
In the comments, screenshot your result and tell me your favorite music! See below for example submission:

My Favorite Music

Good Luck! Submission is closed by May 22!

EasyPollVote [Dev Log #4]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 01 May 2026 15:14:37 +0000

Welcome to the Forth DEV LOG!

Welcome to the forth Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

For example, a user can create their own poll. Their poll can be something like "Do you like Cats or Dogs?" following the two options users can vote on "Cats" or "Dogs". Then, they will be able to send the private link to anyone and the voters can vote on it without the need to create an account!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Nothing new other than cleaning up code. @sylwia-lask made a poll and here are the results!

As mention in the last Dev Log, I will now be discussing how the Custom Polls work!

Part 1

Here is the HTML code based on the image above:

<form onSubmit={handleSubmit} className="w-full p-4 sm:p-6 md:p-8">
    <h2 className="text-xl font-semibold text-center p-4 sm:p-5 border-4 border-indigo-200 border-b-indigo-500">
        Create a Poll
    </h2>

    <div className="mt-5 mb-5 justify-center">
        {/* TITLE */}
        <label>
            <h1>Poll Title</h1>

            <input
                type="text"
                placeholder="Poll Title (required)"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full mb-4 p-3 border"
                required
            />
        </label>

        <label>
            <h1>Poll End Date</h1>

            {/* END DATE */}
            <input
                type="datetime-local"
                value={endDate}
                onChange={(e) =>
                    handleEndDateChange(e.target.value)
                }
                className={`w-full mb-1 p-3 border ${endDateError ? "border-red-500" : ""
                    }`}
                required
            />
        </label>

        {/* ERROR */}
        {endDateError && (
            <p className="text-red-500 text-sm mb-3">
                {endDateError}
            </p>
        )}
    </div>

    {/* OPTIONS */}
    <label className="block mb-2 font-medium">
        Poll Options
    </label>

    <div className="w-full mb-4 p-4 sm:p-6 border">
        {options.map((opt, index) => (
            <div
                key={index}
                className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mb-3"
            >
                <input
                    type="text"
                    placeholder={`Option ${index + 1}`}
                    value={opt.text}
                    onChange={(e) =>
                        handleOptionChange(
                            index,
                            e.target.value
                        )
                    }
                    className="flex-1 p-3 border"
                    required={index < 2}
                />

                <div className="flex gap-2">
                    <input
                        type="color"
                        value={opt.color}
                        onChange={(e) =>
                            handleColorChange(
                                index,
                                e.target.value
                            )
                        }
                        className="w-12 h-12 p-1 border cursor-pointer"
                    />

                    {index >= 2 && (
                        <button
                            type="button"
                            onClick={() =>
                                removeOption(index)
                            }
                            className="px-3 py-3 bg-red-500 text-white"
                        >
                            ✕
                        </button>
                    )}
                </div>
            </div>
        ))}

        {options.length < 4 && (
            <button
                type="button"
                onClick={addOption}
                className="w-full mb-2 p-3 border"
            >
                + Add Option
            </button>
        )}
    </div>

    {/* SUBMIT */}
    <button
        type="submit"
        disabled={loading || !!endDateError}
        className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400"
    >
        {loading ? "Submitting..." : "Submit"}
    </button>

    {message && (
        <p className="text-sm text-center mt-3">
            {message}
        </p>
    )}
</form>

In this form, we have the main functionalities:

"handleSubmit"
"setTitle"
"handleEndDateChange"
"handleOptionChange" and "handleColorChange"
"addOption" and "removeOption"

I will be discussing in reverse order.

"addOption" and "removeOption"

Nothing big is going on. Basically, the user have the option to create up to 4 options for the voter to vote on and being able to delete the options as well:

// Add/Remove options (max 4, min 2)
const addOption = () => {
    if (options.length < 4) {
        setOptions([...options, { text: "", color: "#a855f7" }]); // Add option
    }
};
const removeOption = (index: number) => {
    if (options.length <= 2) return;
    setOptions(options.filter((_, i) => i !== index)); // Remove option
};

"handleOptionChange" and "handleColorChange"

Speaking of options, you have the ability to enter a name for that option and the color associate with it.

// Poll options w/ color associated with each option
const handleOptionChange = (index: number, value: string) => {
    const updated = [...options];
    updated[index].text = value;
    setOptions(updated);
};
const handleColorChange = (index: number, color: string) => {
    const updated = [...options];
    updated[index].color = color;
    setOptions(updated);
};

"handleEndDateChange"

Based on the input, it get stored:

const handleEndDateChange = (value: string) => {
    setEndDate(value);
    setEndDateError(validateEndDate(value)); // Validate the date
};

"setTitle"

Just storing in a variable :)

"handleSubmit"

I save the biggest one for last!

// Handling submit of the form
const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage("");


    const filteredOptions = options.filter(
        (opt) => opt.text.trim() !== ""
    );

    try {
        // duplicate check uses filtered options only
        for (let i = 0; i < filteredOptions.length; i++) {
            for (let j = i + 1; j < filteredOptions.length; j++) {
                if (filteredOptions[i].text.trim().toLowerCase() === filteredOptions[j].text.trim().toLowerCase()) {
                    setMessage("Options cannot be identical!");
                    setLoading(false);
                    return;
                }
            }
        }

        const isoEndDate = new Date(endDate).toISOString();

        // POST request one all the validation is complete
        const res = await fetch("/api/poll", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title,
                options: filteredOptions,
                endDate: isoEndDate,
            }),
        });

        const data = await res.json();

        if (!res.ok) {
            throw new Error(data.error || "Something went wrong");
        }

        const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

        setMessage(
            "Poll created successfully! Share this link: " + pollUrl
        );

        // reset form
        setTitle("");
        setEndDate("");
        setEndDateError("");
        setOptions([
            { text: "", color: "#22c55e" },
            { text: "", color: "#3b82f6" },
        ]);
    } catch (err: any) {
        setMessage(err.message);
    } finally {
        setLoading(false);
    }
};

The first big thing it it does is ensuring there are no duplicate values in the options section. If there are no duplicate names, we then proceed to set the date to an ISO and do a POST request on api/poll.

// POST request one all the validation is complete
const res = await fetch("/api/poll", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        title,
        options: filteredOptions,
        endDate: isoEndDate,
    }),
});

It uploads the title, options, and its enddate of the poll.

Once the user submits the form, it generates a link for the user to share with others to vote on their poll!

const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

setMessage(
    "Poll created successfully! Share this link: " + pollUrl
);

In the api/poll/route.ts, it only has a single POST request:

export async function POST(req: Request) {
    try {
        const body = await req.json();

        const { title, options, endDate } = body;

        // 1. Validate input
        if (!title || !endDate || !options || options.length < 2) {
            return NextResponse.json(
                { error: "Invalid input" },
                { status: 400 }
            );
        }

        // 2. Validate ISO date (already normalized from client)
        const normalizedEndDate = new Date(endDate);

        if (isNaN(normalizedEndDate.getTime())) {
            return NextResponse.json(
                { error: "Invalid date format" },
                { status: 400 }
            );
        }

        if (normalizedEndDate.getTime() <= Date.now()) {
            return NextResponse.json(
                { error: "End date must be in the future" },
                { status: 400 }
            );
        }

        // 3. Insert Poll
        const { data: pollData, error: pollError } = await supabase
            .from("Poll")
            .insert([
                {
                    PollTitle: title,
                    Poll_EndDate: endDate,
                    Poll_Ended: false,
                },
            ])
            .select()
            .single();

        if (pollError) {
            return NextResponse.json(
                { error: pollError.message },
                { status: 500 }
            );
        }

        // 4. Insert Options
        const optionsPayload = options.map(
            (opt: { text: string; color: string }) => ({
                poll_id: pollData.id,
                option_text: opt.text,
                option_color: opt.color || "#a855f7",
                Votes: 0,
            })
        );

        const { error: optionsError } = await supabase
            .from("VoteOptions")
            .insert(optionsPayload);

        if (optionsError) {
            return NextResponse.json(
                { error: optionsError.message },
                { status: 500 }
            );
        }

        return NextResponse.json({ pollId: pollData.id });

    } catch (err: any) {
        return NextResponse.json(
            { error: err.message || "Server error" },
            { status: 500 }
        );
    }
}

Pretty much we do an insert in two tables where we insert into the Poll table and insert to the VoteOptions table, where the VoteOption has a Foriegn key linked to the Poll.

You may also noticed this part, which we will get to later:

Poll_Ended: false,

Part 2

When the user linked on an existing poll, this is what the structure look like:

{/* RESULTS */ }
<div className="p-4 sm:p-6 md:p-8">
    <h1 className="text-center text-xl font-semibold">
        Total Votes: {totalVotes}
    </h1>

    {options.map((opt) => {
        const votes = Number(opt.Votes) || 0;
        const percentage =
            totalVotes > 0 ? (votes / totalVotes) * 100 : 0;

        return (
            <div
                key={opt.id}
                className="flex justify-between items-center p-4 sm:p-5 shadow-md outline outline-black/5 dark:bg-gray-800 border-2 border-gray-80 dark:border-gray-700 m-2"
                style={{
                    background: `linear-gradient(to right, ${opt.option_color} ${percentage}%, transparent ${percentage}%)`,
                }}
            >
                <span className="font-medium bg-black text-white px-2 py-1 rounded text-sm sm:text-base">
                    {opt.option_text}: {votes}
                </span>
            </div>
        );
    })}
</div>

{/* VOTING FORM */ }
{
    !hasVoted && !pollEnded && (
        <form
            onSubmit={handleVote}
            className="p-4 sm:p-6 md:p-8 flex flex-col gap-2"
        >
            <h1 className="font-medium mb-2">Choose your Vote!</h1>

            {options.map((opt) => (
                <label
                    key={opt.id}
                    className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                    <input
                        type="radio"
                        name="vote"
                        value={opt.id}
                        checked={selected === opt.id}
                        onChange={() => setSelected(opt.id)}
                        className="cursor-pointer"
                    />

                    <span className="flex-1 text-sm sm:text-base">
                        {opt.option_text}
                    </span>
                </label>
            ))}

            <button
                type="submit"
                disabled={loading}
                className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400 mt-5"
            >
                {loading ? "Submitting..." : "Submit Vote"}
            </button>
        </form>
    )
}

{/* MESSAGE */ }
{
    (message || hasVoted) && (
        <p className="mt-4 text-center text-sm p-4 sm:p-5">
            {message}
        </p>
    )
}

It is structured similar to the Demo Poll I discuss on the last Dev Log. Most of it is trying to fetch data from the database and displaying it in the UI.

In another component, we have a timer set. If the timer has reach the end date (where the user has set the end date), it will set the boolean to true and it will remove the ability to vote on that poll.

const now = new Date();
const end = new Date(poll.Poll_EndDate);
const pollEnded = now >= end;

// update DB if not already ended
if (pollEnded && !poll.Poll_Ended) {
    await supabase
        .from("Poll")
        .update({ Poll_Ended: true })
        .eq("id", poll.id);
}

Note: The feature of auto delete a poll will be implemented in the future.

And that's it! Future developments will continue after the end of the Spring Semester! I appreciate the feedback from the community and feel free to provide feedback if you haven't already!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

🗓️ Monthly Dev Report: April 2026

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 28 Apr 2026 22:44:48 +0000

Post Cover is "Soda Pop" from Kpop Demon Hunters featuring @javz, @embernoglow, @konark_13, @nickytonline and @meg_gutshall!

Hey everyone! I bring you my development journey on what I have discovered, accomplishments for this month, and the goals for next month!

Additionally, I will share some posts highlights on what post I am proud of sharing to Dev.to and my top 3 posts that stood out to me this month!

Winners of the WPM Challenge 🖥️

Before we get into that, thank you everyone who participated in the "What's your WPM" challenge! Here are the winners for the month!

Winner of the 1-minute Challenge! 🏅

Jatin Sharma Follow

Turning Web Dreams into Reality, Just Like Tony Stark's Vision

@j471n With a 121 WPM with 98% accuracy!

Winner of the 5-minute Challenge! 🏆

Jon GottfriedFollow

Co-founder of Major League Hacking

@jonmarkgo With a 114 WPM with 98% accuracy!

Congratulations! Stay tuned for the next WPM Challenge next week! Now on to the program :)

✨ Dev.to Posts Highlights! ✨

Here is one of the posts I am proud of for this month!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ for Virtual Coffee

Apr 27

Your Developer Journey: Progress or Plateau?

#discuss #community #learning #beginners

Comments 4

4 min read

Made a post under the Virtual Coffee Organization for the first time! This post talks about things to look for if you are still learning as a developer!

Here is the top 3 posts that I have discovered that stood out to me!

Ready-to-use markdown template

Giorgi Kobaidze

Apr 26

15 Essential Sections Every README Needs: Give Your Project What It Deserves

#documentation #opensource #tutorial #development

154

Comments 80

11 min read

@georgekobaidze A guide on making your project stand out by having these essentials for your README!

Art rated below gameplay despite high effort

EmberNoGlow

Apr 22

I created my first game and decided to leave GameDev

#discuss #gamedev #godot #productivity

Comments 23

2 min read

@embernoglow Talked about his first game jam experience and things he has learned about Game Development!

April Fools Challenge Submission ☕️🤡

Konark Sharma

Apr 11

I Couldn’t Afford Earth, So I Built Something Better

#showdev #devchallenge #418challenge #ai

Comments 40

3 min read

@konark_13 A kind of broke boi created a Real Estate application, for the April Fools challenge, where you can buy planets (Great job if anything regardless).

Monthly Discovery 🔍

🔍 Claude Mythos = Ultron?

🔍 Pewdiepie's AI beats ChatGPT.

🔍 A fun one! Destroying a Pay-to-Win Minecraft Server with HTML code.

Accomplishments 🏆

✅ One PR got merged onto Forem!
✅ Created the "Open Sourcerer" series!

Overcoming environment setup for a first PR

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Apr 13

The Open Sourcerer of Forem: Beyond the UI

#discuss #community #forem #opensource

Comments 39

4 min read

✅ Made Dev Logs on my Full Stack Application!
- https://dev.to/francistrdev/series/38450
✅ Got the "#howtodevto Hero" Exclusive Badge for this post!

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Mar 20

Get Started on Dev.to! A Beginner's Guide to Engage with the Community! 💡

#discuss #community #beginners #howtodevto

152

Comments 71

6 min read

✅ Got Tag Moderator for the #Discuss Tag! I am now a Complete Moderator!

✅ Now a Full Member of Virtual Coffee!
✅ Continued interacting with the Dev.to community.

Still working on... 🔨

🔨 The last Dev Log for the EasyPollVote App for now. Should be release this week!

Goals for Next Month 🎯

📝 Continue Forem Contribution.

Note: Due to the surges of Pull Request recently, I might have to hold it off due to the unusual amount of Pull Requests on Forem. I heard something about AI Agents causing this, but that is just a theory.

📝 Clean up Resume.
📝 Clean up my portfolio and publishing it on Dev.to for Review.
📝 Continue interacting with the Dev.to community.

Feedback 💬

What else should I do for May?
Any questions/comments/advice or tips for the Monthly Report? Leave a comment below! I would love to hear from you!

Your Developer Journey: Progress or Plateau?

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Mon, 27 Apr 2026 14:39:05 +0000

Introduction

Everyone has different starting points in their developer journeys. This can range from Game Developers, Web Developers, etc. Regardless of what your career is in tech, it is important for us to keep track of our progress. Most importantly, if we still have the ability to self-learn with discipline.

Tech is always changing and it is important for us to keep ourselves up to date with Tech as well as honing our skills as a developer. There is “no ending” to learning in this field since it is always changing. Although we can’t learn everything, there is a checklist that determines, in my opinion, if we are keeping ourselves up-to-date and still leveling up our skills in the field of choice. Here is the list!

You are making progress if you are…

1. Learning and completing tasks at a healthy pace!

Whether you are completing an online course or obtaining certification from freeCodeCamp, consistency is key! Having a good consistency is important because it will prevent you from being burnt out.

For example, let's say we have Person A, where he does his assignment on the last minute. On the other hand, Person B does his assignments little by little each day. Assuming both turns in the assignment on time, who do you think will be more burnt out? It will be Person B!

Although Person B does little each day, it allows him to learn as-he-go and being able to explain the solution he has with confidence. On the other hand, Person A will be the opposite. Although he turns his assignment on time, it wouldn't retain much information because his goal is turning it in on time instead of learning, which is important!

Are you completing a task just to score points or are you completing a task while learning something new?

2. Trying New Things!

Regardless if you are a Game Developer or a Back-end Engineer, it doesn't hurt to try something new whether it is part of your role or not. Even if you do not have the ability to try a certain thing, you could always write or talk about it to other people in the community you are in!

It is always a good idea to try something out of your comfort zone and be expose to something you don't know about!

3. Having Good Organization Skills!

Organization is huge! It allows you to complete tasks in a timely manner as well as not using up brain power to remember if you miss anything or not.

For a good start, I recommend using a physical planner and bring it to you wherever you go. If you are more digital, I recommend using Notion to make your planner! There are other free tools out there that will allow you to make yourself a personalize planner!

4. Not Comparing Yourself to Others!

Imposter syndrome is a thing in the tech community and it is important to identify them early on. As one say:

Comparing yourself to others is the thief of joy.

Always remember that as long as you are making progress, you are fine. It's also healthy to celebrate your wins each week or each month. That way, you will be proud of the progress you made instead of contemplating and overthinking if you are good enough.

You are good enough!

5. Staying Inform on the latest Tech News

Basically what you are doing right now (being on Dev.to)! You can also stay inform by joining the VirtualCoffee community, Youtube, or other communities you are part off. As a bonus point, you get to meet new people and connect with others in job opportunities!

Conclusion

Your journey is unique and can be inspiring to others! Regardless of your skill level or where you are at, it is important to have self-discipline and being able to make progress. That way, you can show your expertise to others and show that you have use your time wisely. Having 10+ years as a Developer with lots of knowledge is more worth than 10+ years as a Developer with little knowledge.

Remember, the hardest part is not starting something. The hardest part is having discipline to ensure you are making consistent progress to reach your goals.

What do you think? What are some things you do to ensure you are making progress in your development journey! Let us know in the comments!

EasyPollVote [Dev Log #3]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 24 Apr 2026 15:30:43 +0000

Welcome to the Third DEV LOG!

Welcome to the third Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Made small progress. Still fixing the issue of the End Date where it is inconsistent. Speaking of timing, I need to fix the PokeAPI, so it can update on the appropriate date.

Anyway, added a Title on the front page :)

Also, thank you @sylwia-lask for the feedback on the responsive issue!

The issue should be fixed now! :D

With the changes made, I did mention I will get into detail on how the front page (Voting your Pokemon form) functionality work. Do note the solution I have is not perfect and I had ChatGPT to assist me on this project. Feedback is greatly appreciated :)

Demo Voting Poll in detail!

I will be discussing on this demo poll. The main functionality is when you start to submit the form. This is the current structure:

{/* Form */ }
<form onSubmit={handleSubmit} className="flex flex-col gap-2 p-10">
    <h1 className="text-center text-xl font-semibold">
        Voting Form
    </h1>
    <input
        name="name"
        placeholder="Name (required)"
        value={formData.name}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    <input
        name="email"
        placeholder="Email (required)"
        value={formData.email}
        onChange={handleChange}
        className="p-2 border"
        required
    />

    {pokemonList.map((pokemon, index) => (
        <label key={index} className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
            <input
                type="radio"
                name="vote"
                value={pokemon.name}
                onChange={handleChange}
            />
            {pokemon.name}
        </label>
    ))}

    <button disabled={loading} className="bg-blue-500 text-white p-2">
        Submit
    </button>

    {message && <p>{message}</p>}
</form>

You may notice the two big variables: handleChange and handleSubmit.

For handleChange, nothing really big is going on. It is basically updating the formData variable based on the user's input. So when the user click submit, the formData will be sent to the database.

const [formData, setFormData] = useState({
    name: "",
    email: "",
    vote: "",
    // Not uploaded to the Database. This is used for route.ts switch case
    action: "Demo",
});


...


// Handles anything Input related on the Voting Demo Form
const handleChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
};

For the handleSubmit, this is where the main functionality takes place!

// When the Form is submitted
const handleSubmit = async (e: any) => {
    e.preventDefault();
    setMessage("");

    // If the user did not vote a specific pokemon, error message is shown
    if (!formData.vote) {
        setMessage("Error: Please select a Pokémon to vote for.");
        return;
    }

    // If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
    const res = await fetch("/api/vote", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: formData.name,
            email: formData.email,
            vote: formData.vote,
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        }),
    });

    const data = await res.json();

    if (!res.ok) {
        setMessage(data?.error || "Error: Form submission failed.");
    } else {
        setMessage("Vote submitted successfully!");
        setFormData({
            name: "",
            email: "",
            vote: "",
            action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
        });
    }
};

When the user clicks "Submit", it checks to see if the user selected their vote. If not, it prompts the error to the user that they need to vote:

// If the user did not vote a specific pokemon, error message is shown
if (!formData.vote) {
    setMessage("Error: Please select a Pokémon to vote for.");
    return;
}

If the check is all good, it performs a POST request on /api/vote and sending it to the database. After that, the form clears out:

// If all inputs are entered, perform a POST request in the route.ts where we head to the "Demo" switch statement
const res = await fetch("/api/vote", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        vote: formData.vote,
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    }),
});

const data = await res.json();

if (!res.ok) {
    setMessage(data?.error || "Error: Form submission failed.");
} else {
    setMessage("Vote submitted successfully!");
    setFormData({
        name: "",
        email: "",
        vote: "",
        action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case
    });
}

That's pretty much what's happening on the client side. You may also notice this part:

action: "Demo", // Not uploaded to the Database. This is used for route.ts switch case

In the api/vote folder, I have multiple PUT requests in where inside of the PUT request, there is a switch case. I won't be able to go into detail now, but one thing to note that it is used to identify which code to execute. In this case, it's "Demo":

case "Demo": {
    const { name, email, vote } = body;

    if (!name || !email || !vote) {
        return NextResponse.json(
            { error: "Missing name, email, or vote" },
            { status: 400 }
        );
    }

    // Insert the row that contains their name, email, and the vote they voted for
    const { error } = await supabase
        .from("VoteDemo")
        .insert([
            {
                Name: name,
                Email: email,
                Vote: vote,
            },
        ]);

    if (error) {
        console.log("Supabase insert error (VoteDemo):", error);

        return NextResponse.json(
            { error: error.message },
            { status: 500 }
        );
    }

    return NextResponse.json({
        success: true,
        message: "Vote saved successfully in VoteDemo",
    });
}

Simply put, it does an insert statement to the "VoteDemo" table of the Name, Email, and Vote (yes @bingkahu, I saw your many votes. on that database).

That is pretty much it for that page. Next week, I will discuss more detail on how the Custom Polls work!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

Unpopular Opinion: Do not use OpenClaw...not yet.

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 21 Apr 2026 23:35:31 +0000

This is a submission for the OpenClaw Writing Challenge

Context

This is going to be short post. The goal is for me is understanding OpenClaw and to see why people use OpenClaw. I did quick research on OpenClaw and I will detail on what I find as a bare bone and why you should not consider OpenClaw yet.

Disclaimer: Take this post as a grain of salt since there is a very good chance that there is something I did not mention about OpenClaw whether it is good or bad since this is researched on a surface level and is based on what I have seen so far.

With that said, to get things out of the way really quick:

I never used OpenClaw before.

I know this sounds contradictory since you read the title to not use OpenClaw from a guy who never uses OpenClaw.

I don't hate it. From what I have seen, I think OpenClaw is a great tool for developers and is accessible for developers getting into AI Agents. However, seeing it rise quite quickly into popularity, it does raise concerns for me and I will tell you why. First, we need to know what OpenClaw is.

Okay, What is OpenClaw?

Based on their official website, it's an AI that does things. In other words, it's literally Jarvis from Iron Man. It can read/write emails for you, open browsers, build and use your GitHub to host a website...pretty much anything a human can do using a computer. If you can do a task on a computer, OpenClaw can do it.

On paper, this sounds legendary. An AI agent that can do anything?

Heck Yea!

Gone with the days where we use GitHub Copilot to do programming tasks.

However, if you think about it, it sounds very scary since OpenClaw can do anything. Even though it is scary, there are positives that I can give credit to OpenClaw.

Good Side of OpenClaw

Here are some good things I heard about OpenClaw!

1. Open Source!

From the name itself "OpenClaw", one would assume it is Open Sourced, which it is! Their repository has over 300k Stars and a lot of people are contributing to it. It's great to see it open source because it gives people transparency, especially when it's an AI agent that can do anything. Puts away the stress if you are worried about a program doing malicious things. Feel free to visit their repository for more details!

openclaw / openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

🦞 OpenClaw — Personal AI Assistant

EXFOLIATE! EXFOLIATE!

OpenClaw is a personal AI assistant you run on your own devices It answers you on the channels you already use. It can speak and listen on macOS/iOS/Android, and can render a live Canvas you control. The Gateway is just the control plane — the product is the assistant.

If you want a personal, single-user assistant that feels local, fast, and always-on, this is it.

Supported channels include: WhatsApp, Telegram, Slack, Discord, Google Chat, Signal, iMessage, IRC, Microsoft Teams, Matrix, Feishu, LINE, Mattermost, Nextcloud Talk, Nostr, Synology Chat, Tlon, Twitch, Zalo, Zalo Personal, WeChat, QQ, WebChat.

Website · Docs · Vision · DeepWiki · Getting Started · Updating · Showcase · FAQ · Onboarding · Nix · Docker · Discord

New install? Start here: Getting started

Preferred setup: run openclaw onboard in your terminal OpenClaw Onboard guides you step by step through…

View on GitHub

2. Easy to set up!

With being open source, they also have documentation for setting up OpenClaw! It's free, can host it locally, and you are open to use OpenRouter to add your API keys into OpenClaw, so you can manage your token usage.

3. Partnered with VirusTotal for Security!

On their page, they mentioned that they recently partnered with VirusTotal for security. They mention the importance of it, but the thing that is important is sensitive information, which they covered on their blog:

Feel free to read more about it here: https://openclaw.ai/blog/virustotal-partnership

What's the issue?

If OpenClaw is in a good spot at the moment, what's the issue?

The issue isn't the progress they are making. Don't get me wrong, right now, they are making good progress on fixing the issues, it's open source, and taking security seriously. It comes down to these things in my opinion that stops me from using OpenClaw.

1. An AI that does...anything

When it comes into being a programmer, you will have to take some risks such as npm installing packages to your computer and other things you need. I am conformable with this since I am aware of what I am installing.

I am currently not conformable with an AI agent doing the tasks and doing things in the background that I am not aware of. I like to be aware of things of what the AI agent is doing. Now, you may be asking:

What's different from GitHub Copilot CLI?

I might not be using it to the fullest potential, but the way I used it, it is more sand boxed. By that, I mean that I used the CLI in my Visual Studio Code only. It's more focused and If I asked anything, the minimum it will do is asking permission to search documentation online. I like this simplicity and aware of what the agent is doing and asking for permission every time.

When you have OpenClaw, you can ask to do a task, but it will do whatever it takes to complete that task. Since it is just "out of the open" on your computer, you have to be careful on how you prompt something to the AI Agent, which doesn't sit right with me since I am quite picky on how I word things and making sure the AI agent understand my requests.

You could argue that I should buy a Mac Mini (which seems to be the trend) to use OpenClaw by itself. But..why though?...

It's too much money and It's not my forte to buy a whole new computer just to run an AI agent for that purpose.

2. How much Tokens do you have?

Even running OpenClaw with Ollama, it still takes a lot of space just to run an AI agent. Typically, people will use AI on the cloud for this case which burns tokens...a lot.

I recently asked the Virtual Coffee Community that me and @jarvisscript are in. One person spoke their experience using OpenClaw where that person stated:

I’m using the $20/month ChatGPT subscription to run OpenClaw, and having it use my $200/month Claude subscription to run Claude Code. I definitely wouldn’t pay that much just for OpenClaw, but I already have the Claude subscription for work and OpenClaw is providing me with > $20/month in value so it’s worth it for me to buy the ChatGPT subscription.

If you are okay spending money to get the best out of OpenClaw, that's totally fine. In my opinion, I like to use free tools and ensuring the expectation of using that tool is worth it.

3. Too early (for me) to trust OpenClaw

Just because it became successful in a short amount of time, it doesn't mean that it is immune for it to fail. You can probably name a good amount of companies and projects being successful early on and quite quickly too, but it resulted in failure for many reasons. I always have this quote in mind:

The quicker the rises, the harder the fall.

I am not saying OpenClaw will fail, I am saying be cautious about the tools that was just release to the public before using it. That tends to be with me whenever I am using any services and tools.

Imagine this, let's say a company rises really quickly and that so many people sign up to use their services. Because of the rise of quick popularity, hackers will see this as an opportunity. If something really bad happens (like a databreach), not only the company will have a bad reputation, but MILLIONS OF DATA will be leak.

This is the worst case scenario. The reason I brought this up is because of what happen to FTX that made me think of this scenario.

Note: FTX did not have a data breach. But the "feeling" of the event that happened is the same (at least for me).

What is FTX and why is it important?

If you don't know, FTX is a crypto exchange that went bankrupt because of fraud. In summary, they lied on their financial report that they claim that they have a lot of money, but in reality, they were in severe debt. As a result, the company went bankrupt and MILLIONS of people lost a lot of money as a result.

Keep in mind that FTX is not a "random" company. It is quite well sponsored and a lot of Online Influencers promote it (even the mainstream media). There were a lot of trust in the community and believe that FTX will keep their money safe, which was not the case.

I hope you can understand where I am coming from. If you would like to learn more, Coffeezilla made a video on why FTX collapsed in detail:

Sure, the example I gave did not align to the FTX incident. What I am trying to say is that in this context for OpenClaw having a vulnerability that affects millions, it is quite scary to think (for an AI agent that does ANYTHING).

I am not stopping you from using OpenClaw if you believe that it hits all the green flags you expect such as being trustworthy, transparency, and such (which seems to be the case with OpenClaw!).

Again, I am saying that the tool is too early for me to use it and I would rather wait a bit before using it to see how it goes, especially in the state of the AI bubble.

Conclusion

Overall, I wouldn't recommend using OpenClaw just yet. I recommend waiting for a bit to see where it goes. Typically, for me, I wait for a year or so to see how far it has gotten. If everything is all good, then I would consider using it.

However, if you are a type of person where you are really bold and want to explore the unknown with zero anxiety, feel free to use it at your own risk. It's just that it doesn't sit right with me having an AI agent that is doing the work with minimum supervision. It's too much of a hassle for me.

In my opinion, I won't be using OpenClaw anytime soon unless if I were to have a lot of money just to buy a PC that only runs OpenClaw. The selling point of where an AI does anything didn't sit right with me. On paper, it sounds great. However, the more you think about it, the more scarier it gets that we are getting close to getting ourselves a real life Ultron. I would prefer to have an AI agent to be more sand boxed then letting loose into the wild and having the possibility that one miscommunication in the prompt will allow OpenClaw to delete System32.

Then again, I am just a guy on Dev.to :)

I am wondering what you think about OpenClaw. What's your experience and do you recommend using OpenClaw? Any thoughts? Feel free to let me know in the comments!

EasyPollVote [Dev Log #2]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 17 Apr 2026 19:19:32 +0000

Welcome to the Second DEV LOG!

Welcome to the second Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Made some UI changes in the Front Page!

It is smaller and compact since I didn’t like where you have to scroll down. The only time you have to scroll down is when your screen is small or you are in mobile!

The Poll Demo of choosing your favorite Pokémon is no longer hard coded! It was seen that you guys want to have more options (more that in a bit) since @sylwia-lask want to vote for Umbreon! 😊

I look into the PokeAPI since they provided all information on Pokemon such as images, colors, names, etc.

For the Demo, I made it where it uses the PokeAPI to fetch the Pokémon data that includes the name, image, and primary color of the Pokémon. Since the demo only allows the user to choose two options, we get two random Pokémons.

type Pokemon = {
    name: string;
    sprite: string;
    color: string;
};

const TOTAL_POKEMON = 1010;

...

const [id1, id2] = getWeeklyPokemonIds();

const fetchOne = async (id: number): Promise<Pokemon> => {
   const [pokemonRes, speciesRes] = await Promise.all([
      fetch(`https://pokeapi.co/api/v2/pokemon/${id}`),
      fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`),
   ]);

   const [pokemonData, speciesData] = await Promise.all([
      pokemonRes.json(),
      speciesRes.json(),
   ]);

   return {
      name: pokemonData.name,
      sprite: pokemonData.sprites.front_default,
      color: speciesData.color.name,
   };
};

const pokemonResults = await Promise.all([
   fetchOne(id1),
   fetchOne(id2),
]);

setPokemonList(pokemonResults);

The Poll randomizes the Pokémon each week, which gives the user fresh choices about choosing their favorite!

function getWeekNumber() {
    const now = new Date();
    const start = new Date(now.getFullYear(), 0, 0);

    const diff = now.getTime() - start.getTime();
    const oneDay = 1000 * 60 * 60 * 24;
    const dayOfYear = Math.floor(diff / oneDay);

    return Math.floor(dayOfYear / 7);
}

function getWeeklyPokemonIds(): [number, number] {
    const week = getWeekNumber();

    const id1 = (week % TOTAL_POKEMON) + 1;
    const id2 = ((week * 7 + 13) % TOTAL_POKEMON) + 1;

    return id1 === id2 ? [id1, (id2 % TOTAL_POKEMON) + 1] : [id1, id2];
}

Note: The Pokémon randomize each week has not been fully tested. We are about to find out later in the weekend if it does change!

Note: There is no functionality where it wipes the data in the database, though it will be implemented in the future

That is all for the DEMO Poll! But wait, there’s more!!

You may notice that there is a link where you can create your own Poll!

When you go to that page, it gives you a form to create your own Poll by providing:

Poll Title
The Poll End date (If the poll reaches the end date, the poll will end and the button to submit your vote will be hidden)
Poll Options (You can have up to 4 options!)

If you want to create a poll, now you can! 😊

Once you create the poll, you will see the message under the button that gives you a link to share to others on voting on your poll.

Poll created successfully! Share this link: https://easypollvote.vercel.app/poll/53

When you click the link, the poll format is similar to the Demo as shown below.

Note: There are currently no restrictions on voting more than once. That feature is in my TODO list and will be implemented in the future.

Note: The end date has not been tested. Again, we are about to find out ultimately if the flow does as intended. Do note it is still a work in progress, so expect any bugs. Please report the bugs in the comments if you encounter anything unusual!

Without going to detail, the custom poll actually takes two tables.

We have "Poll" table, which consist of:

ID (Primary Key)
created_at (timestamptz)
PollTitle (string)
Poll_EndDate (timestamptz)
Poll_Ended (bool) (This determines if the end date of the poll has reached)

We also have "VoteOptions" table, which consist of:

ID (Primary Key)
poll_id (Primary and Foreign Key of the Poll table's ID)
option_text (string)
Votes (Int)
option_color (string)

Next time, I will be talking about in detail on how the flow works for the demo and the custom poll!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

If you like to vote on my custom poll on who you want to be your mentor. Would you choose @ben, @jess, @jonmarkgo or @theycallmeswift?, feel free to vote on my poll here: https://easypollvote.vercel.app/poll/53

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

The Open Sourcerer of Forem: Beyond the UI

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Mon, 13 Apr 2026 21:42:25 +0000

Introducing a New Series "The Open Sourcerer of Forem"!

I have been wanting to get into contributing to Open Source for some time now. However, it was difficult for me because it is quite intimidating.

Not only you have to contribute to a Repository with Hundreds of people, but you also have to set up your environment which I believe is the hardest part into getting started on contributing in general. This process requires the user to read documentation, fix errors along the way, etc.

Fortunately, after posting the article on how I used Google Gemini in my Winning Google Gemini: Writing Challenge, I was able to start actual contribution and I was grateful that one of my Pull Requests got merge for the first time! I hope you guys enjoy this series :D

Check out the post that start it all:

Built with Google Gemini: Writing Challenge

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Mar 3

I used Google Gemini for the First Time. A Deep Analysis of my Experience so far! ✨

#devchallenge #geminireflections #gemini #bash

Comments 14

11 min read

Welcome Sourcerers!

Welcome to the series where I tell a tale of an Open Sourcerer of Forem (which is me!) made contribution to the Official Forem Repository! I will be sharing the issue, the Pull Request, and what I have learned (which you may find it useful if you want to contribute)!

The Issue

There is an issue named "UI Issue" by @konark_13:

UI Issue #22902

Konarksharma13 posted on Mar 05, 2026

Describe the bug

While browsing Dev.to, I noticed a UI issue where two layouts appear to overlap, resulting in a combined and messy layout. This causes visual misalignment on the page and affects readability.

To Reproduce

Go to https://dev.to/devteam/welcome-thread-v367-33cn
Navigate to the comment.
Hover over the likes over the comment likes.
Notice that two layout components overlap and merge into an inconsistent layout

Expected behavior

The layout should render correctly without overlapping elements. Each component should maintain its intended structure and spacing.

Screenshots

https://github.com/user-attachments/assets/dcb6f2bb-8579-49d2-babb-c3c2f53ed464

Desktop (please complete the following information):

OS, version: Mac
Browser, version: Brave

Smartphone (please complete the following information):

Not tested on mobile.

Additional context I regularly use Dev.to and noticed this while browsing. It may be a minor UI issue, but I thought it would be helpful to report it so it can be reviewed if necessary.

View on GitHub

This issue states that the UI z-index is out of place, specifically on the multiple reactions. For example, you notice that this UI z-index is incorrect:

This is my first issue I tackle as an Open Source Contributor. I decide to tackle this since it allows me to get a sense of the Code-Base in general.

The first steps I did was to find the ClassName or ID of the element responsible for the issue. That way, I can search up the name in Visual Studio Code and look for that name in a CSS file.

When I began investigating, I found the ClassName responsible, which is crayons-article-actions.

On my Visual Studio Code, I search the name and it seems to be in the SCSS file article.SCSS. I change the Z-index to the highest number and began making my Pull Request from there.

The Pull Request

Here is the Pull Request I made to solve this issue:

Z-Index Increase for the Emoji UI #22905

FrancisTRAlt posted on Mar 05, 2026

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

Fixed the UI issue on the Emoji where you can see the "Like" button over the list of emojis as shown below:

Before:

After:

This also happen in the GIF. It is fixed now:

Before:

After:

Related Tickets & Documents

Related Issue #22902
Closes #22902

QA Instructions, Screenshots, Recordings

1. Go on any post on Dev.to.

2. Inspect the element page and look for the class name "crayons-article-actions print-hidden".

3. Change the CSS.

Instead of: z-index: var(z--sticky)

It should be: z-index: 9999

4. Comment out the z-index for this class below:

5. Then scroll and it should be the highest z-index of the page.

What gif best describes this PR or how it makes you feel?

View on GitHub

All it does is increase the "z-index" to 9999. It is worth noting that this is not a "great" solution, but it does solve the issue for now.

Later on, @ben refine this solution:

// Ensure this is above comments but below dropdowns/modals/popovers (like billboards)

z-index: calc(var(--z-dropdown) - 1);

Ultimately, the issue was fixed as shown below:

What I learned

Here is what I learned after working on this issue!

1) Humble Beginning

Before this PR, I made my first Pull Request, which did not get merged. I realized that I was creating a Pull Request that I believe that is needed and not what Forem needs. There is no shame into that and sometimes you fumble before you can succeed. Not every Pull Request will get merged and that's ok!

When contributing to any open source, understand their needs and accomplish it. To start off, look at their issues and find an issue that seems doable to tackle. It can be as simple as fixing the UI, or changing documentation. Whatever it may be, make sure it aligns to their needs!

2) Slow Down

Even after the Pull request got merge, I had a conversation in that issue with @konark_13 about it. I feel like it went too quickly since I was so eager into completing that issue.

According to the Forem's documentation, you have at least 2 weeks to work on the issue. That should give you a lot of time. It is also important to document your work as well and keeping it updated, so that the Repository maintainer will know that you are still working on the issue.

Overall, communication is important to any collaboration! Apologies @konark_13 if I was tackling this issue too quickly and not giving you a chance!

I want to become an Open Sourcerer of Forem! Where do I start?

Everything you need is on the Official Forem GitHub Repository!

forem / forem

For empowering community 🌱

Forem 🌱

For Empowering Community

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…

View on GitHub

I suggest to setup your environment and making sure everything is working. Ultimately, you are trying to get the localhost to run!

You made it to the end!

You have made it to the end Traveler! Thank you for reading this chapter and stay tuned for the next chapter!

Questions or Comments? I would love to hear your thoughts about this tale of The Open Sourcerer of Forem!

EasyPollVote [Dev Log #1]

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Fri, 10 Apr 2026 20:23:00 +0000

Welcome to the First DEV LOG!

Welcome to my first Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

It is an application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

The Current Stack

This application is built using the Next.js + Supabase Template to start off!

Current Progress

Right now, it is bare bone and hard-coded. The main functionality is integrating the GET and POST requests from Supabase. Currently, there is only one table that takes the following:

Name (String)
Email (String)
Vote (String)

With that said, on the submission form, you only need to enter your name, email, and chose either Pikachu or Blastoise. This is currently hard coded to test out Supabase.

Note: Currently, there is no validation on whether you voted more than once. Therefore, you are able to vote more than once if you like!

When you submit the Form, it checks to see if you vote a specific Pokemon. If you did not select either, it will give you an error message that you need to Vote. Otherwise, it will perform a POST request.

if (formData.vote == "") { // All values need to be submitted
   setMessage("Error: Please select a Pokémon to vote for.");
} else { // Upload the data to the database via POST request
   const res = await fetch("/vote", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
   });

   if (!res.ok) {
      setMessage("Error: Form submission failed. Please try again.");
   } else { // Form has been submitted and reset the form
      setMessage("Form submitted successfully! Thank you for voting.");
      setFormData({ name: "", email: "", vote: "" });
   }
}

When displaying the votes, it preforms a GET request where it gets the total votes and then display the votes in the appropriate category.

useEffect(() => {
   async function fetchVotes() {

      const res = await fetch('/vote'); // your GET route
      const data = await res.json();

      // Count votes
      let pika = 0;
      let blast = 0;
      let totalVotes = 0

      data.TotalVotes.forEach((row: { Vote: string; }) => {
        if (row.Vote === 'Pikachu') pika++;
        if (row.Vote === 'Blastoise') blast++;
      });
      totalVotes = pika + blast;

      // Set the scores after calculation
      setTotalVotes(totalVotes);
      setPikachuVotes(pika);
      setBlastoiseVotes(blast);
      setLoading(false);
   }

   fetchVotes();
}, []);

All the requests to the database are located in the "Vote" folder, which contains the route.ts!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

Forem (Dev.to) is slow, so I del...optimized it.

FrancisTRᴅᴇᴠ (っ◔◡◔)っ — Tue, 07 Apr 2026 20:06:35 +0000

This is a submission for the DEV April Fools Challenge

Disclaimer: This post is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very satire. Although you already know this based on context clues, I just want to let you know before hand just in case if somehow you miss the "clues". Forem is great and @ben, @jess and @peter did nothing wrong to me or anyone in this community! :)

What is happening

I notice that Forem has been receiving a lot of traffic lately and it is slowing down my Windows 7 PC. Don't get me wrong, I like the idea Ben is creating for Forem and allowing communities to come together. However, I notice it is very slow on low ended computers and I feel like Forem is not really accessible for those who does not have a powerful PC. How can you have an empowering community if that community is using a low ended PC?

It's hard to show what it is like for me to use Forem since I can't record using OBS since you know...OBS is slow and Forem is slow which equals Slower so here is an accurate representation of using Forem on an everyday basis.

To be fair, the best thing about Forem is that it is Open Source! I can contribute to my needs and express my wants! I heard Ben is a wonderful person and he loves to take community ideas! Besides, Jess mentioned in her "A Year of Change and Persistence" post where Dev.to was created by @ben, @jess, and @peter which they are known as PBJ, like the sandwich. This shows me that they are nice people and they are definitely the type of people where you can joke around with!

WeCoded 2026: Echoes of Experience 💜

Jess Lee

Mar 31

A Year of Change and Persistence

#devchallenge #wecoded #career #dei

108

Comments 31

4 min read

Their inclusiveness and kindness inspired me with this Pull Request that I did and I believe it will optimize their platform to great extent and I believe this Pull Request will be the next best thing to AI in my opinion based on the solution I have.

What I...Built?

I heard people are building this and building that to make the project better, but it's never about deleting. I recently read a post by the @the_nortern_dev on the skill of coding:

NorthernDev

Feb 17

The most valuable skill in 2026 isn't writing code. It is deleting it.

#discuss #softwareengineering #career #productivity

134

Comments 121

2 min read

It is true! You learn the skill as a dev by deleting it, so I took that inspiration and optimize the code by removing redundancy and refactoring the code where it can speed things up for Forem. I have learn a lot from this such as learning a new technology and using GitHub!

I also heard AI is mainstream so I use Google Gemini to help me with this Pull Request. One of the things it helped me is figuring out how to make it O(1) constant time for Forem and this is what it gave me:

Based on this response, I edit the code base and made the Pull Request!

The Pull Request that ends all Pull Requests

I am so happy to share my PR, which I included below!

Remove Redundancy to Prevent Heavy Traffic #23110

FrancisTRAlt posted on Apr 07, 2026

What type of PR is this? (check all applicable)

[x] Refactor
[ ] Feature
[x] Bug Fix
[x] Optimization
[ ] Documentation Update

Description

This PR address where traffic is slow when it comes to computers running Window 7 or before. This PR fixes the issue where it removes modern code and refactor to legacy code where it runs on all systems whether you are running Windows 7 before or later. The time complexity reduces to O(1) as well as space complexity where both were initially O(n).

Related Tickets & Documents

Related Issue #AprilFools
Closes #AprilFools

QA Instructions, Screenshots, Recordings

Go to Forem.com to see the changes.

UI accessibility checklist

[x] Semantic HTML implemented?
[x] Keyboard operability supported?
[x] Checked with axe DevTools and addressed Critical and Serious issues?
[x] Color contrast tested?

Added/updated tests?

[x] Yes
[ ] No, and this is why: please replace this line with details on why tests have not been included
[ ] I need help with writing tests

What gif best describes this PR or how it makes you feel?

View on GitHub

Note: Please @ben I need this. Forem is kind of slow. I optimize the code, so please check it out! I emailed the Forem Team and they tried not to laugh man. They sent me this and I feel like this is a mockery to the Dev.to community!

Code in Detail

This is the solution I did.

and that's how I optimized it. Pretty straightforward.

How I Built It?...

Like any other open source, you edit the code base. The solution I had was unique. Instead of typing letters/characters/symbols, I just press "Backspace" on my keyboard and it did the magic. It reminds me of Vibe Coding. Different approach, same solution or something.

It's quite revolutionary actually. I learn about how to make new lines, tab spaces, etc. Like one said:

If there is a void, there is nothing to destroy.

This applies here. How can someone steal information in a website if there is nothing to steal. We are continuously building and refining firewalls and security and overengineering it to the point where we forgot the ability to think simple. Just remove it.

Scam would not exist if the product does not exist. If anything, I called that free space. Healthy for the environment and no need to build more data centers and other technology stuff!

I heard there is a Prize Category, so I guess honorable mentions?

I like to shout out to Google Gemini for this process since it helped me in the Pull Request. I treat AI as I treat my car.

Anyway, before making the Pull Request, I had to make sure Forem was slow to begin with and here was its response:

With this answer, I can confirm 100% that Forem is Slow since AI is always right. Google Gemini gave me motivation to make a difference to Forem and I am glad to make this Pull Request to the Official Forem Repository.

Also a shout out for me giving an Ode to Larry Masinter. Not sure or something but I heard he likes tea 🫖. However,

I don't know where it is...

Also also, I shout out to this community since I believe we all agree that this change will make a significant impact to the community on the daily basis!!! I encourage the community to like/comment/share/and spam ping the Dev Team (please don't actually) so we can get this change implemented ASAP!!

Prize Category TLDR: Best AI, Teapot, Community.

Take a look at the new Forem!

If you would like to see a faster Forem for empowering communities, check it out here where I did a video demonstration on the differences.

If you like to see the demo version yourself that I self-hosted, check it out below!

See Demo here! Questions/Comments/Feedback? Love to hear you!