DEV Community: Melissa Payne

Just Pick For Me: A Restaurant Picker for My Mom That Runs Entirely in Her Browser

Melissa Payne — Sun, 04 Oct 2026 23:46:25 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

My mom has the hardest time picking a restaurant, and I'm not much help either. It's not that there are too many places, or not enough. We just can never figure out what we want, so it always ends with "just pick someplace."

Just Pick For Me was born from that. Instead of showing her a long list, it asks four easy "this or that" questions (sit down or grab-and-go, light or hearty, familiar or something new, close by or worth a drive), finds real places nearby, and picks one for her with a short, friendly reason why.

A few touches I added just for her:

It knows her name. The first time she opens it, it asks what to call her. After that it greets her and talks to her by name.
It shows its work. The result lists the answers that led to the pick, so it never feels random.
It learns what she likes. "Let's go here!" saves a place as a favorite, and the AI leans toward favorites when she wants something familiar. "Never suggest this place" means she never sees it again. "Not tonight" just picks another.
Directions in one tap to get her there, just in case it is a new one.

Mom's (raw) reactions:

A little bland but seems simple enough
Nice loading bar
Do I have to give it permission to my location? Is that safe?
Clear and not too wordy so that's nice
Should it be doing something here?

Her "Should it be doing something here?" is exactly the rough edge I list under What's Next, and her location question is why I made sure the app is honest about what leaves her computer. "A little bland" is fair too. Making it look better is on the list.

Demo

just-pick-for-me-nn2kz.ondigitalocean.app

Try it here

App Tour:

Home Screen
Name Pop-up
Loading bar
The only thing that leaves her computer is her location, and the browser asks permission first
The result
Clicking let's go here saved it.
'Not tonight' or 'Never suggest this place' picks another
Just in case you ran out of options you get this screen

Code

melissa-24 / just-pick-for-me

Just Pick For Me

View on GitHub

How I Built It

The stack: Vite + React for a simple, lightweight static site, the OpenStreetMap Overpass API for real nearby restaurants (free, no API key), and Qwen 2.5 0.5B, an open-weight model, running inside the browser with Transformers.js. No server, no API key, nothing to install.

Getting there was the real adventure:

WebLLM on the GPU. My first version used WebLLM to run a model on the graphics card. It worked once, then kept crashing. My laptop has Intel UHD integrated graphics, and Windows kept resetting the GPU because it thought it had frozen.
Smaller and smaller models. I tried Gemma 2 2B, then Gemma 3 1B, then Llama 3.2 1B. I shrank the prompt, fed it in smaller chunks, and switched from 16-bit to 32-bit math. Same crash every time. That's when I realized the problem wasn't the model, it was the graphics card. (Glad I did this on my laptop instead of my regular programming Mac).
Moving to the CPU. I switched to Transformers.js, which can run models on the regular processor instead. It's slower, but it can't crash the graphics card, and it works on everyday computers like my mom's. Gemma's browser version turned out to use an operation the CPU engine doesn't support, so I landed on Qwen 2.5 0.5B.
Teaching a tiny model to behave. A 0.5B model is small, and it showed: it copied lines from the list, put names in the wrong place, and once wrote a fake restaurant review. ("I ordered the Margherita…") So I gave it one job at a time:
- Pick: I start its answer for it ("The best choice is number…") so it only has to add a digit.
- Explain: a separate request about only the chosen place, again starting the sentence for it ("Melissa, Giacomo's Pizza…") so it just finishes the thought.
- Safety net: if the sentence still comes out wrong, the app writes a friendly one from the real data, so Mom never sees nonsense.

I also added debug logging that shows every prompt, raw reply, and timing in the console, which is how I figured most of this out.

A few smaller things I'm proud of:

A setup screen written for my mom. My first draft said the app would "download" an AI model. Then I realized the word download alone would make my mom and others like her hesitate. Now it says the first visit "takes a few minutes to get set up," explains that nothing gets installed, and tucks the details into an "Is this safe?" section.
A StrictMode bug. React runs effects twice in development, which could have started two model downloads at once. I fixed it by caching the loading promise instead of the finished model.
Spinner timing. The CPU gets so busy that the browser couldn't draw the "thinking" spinner before the model started. One requestAnimationFrame gave it a moment to paint first.

What's Next

There are still rough edges. On a slower computer, some buttons don't always show that something is happening right away, and for someone like my mom, that's a real problem: if nothing happens, she'll assume it's broken.
Next on my list are clearer "working on it" feedback on every button and moving the AI into a background worker so the page stays responsive while it thinks.
Of course making it look better is always on this list.

Why Does Open Innovation Matter?

With a closed API, my mom's name, what she's in the mood for, and her restaurant likes and dislikes would go to an AI company's server every time she asked about dinner, and I'd be paying for every request. With an open-weight model running in her own browser, the AI part never leaves her computer. The only thing that goes out is her approximate location, to OpenStreetMap, so it can find restaurants nearby. It costs nothing to run no matter how many people use it.

And the biggest reason only became clear while building: I tried five models in one afternoon. When one crashed my graphics card, I tried a smaller one. When the GPU wouldn't cooperate at all, I moved the whole thing to the CPU. When Gemma wouldn't run there, I switched to Qwen. With a closed API, I'd have been stuck with whatever one company offered and whatever hardware it needed. Open models let me keep adjusting until it ran on the kind of computer my mom actually owns.

Prize Categories

Best Use of DigitalOcean: the app is deployed on DigitalOcean App Platform as a static site.

A visual guide to help Developers

Melissa Payne — Fri, 17 Sep 2021 04:35:57 +0000

I love helping people. I love teaching Web Development. In my lecture I use a lot of analogies to help explain some of the basic concepts. One of the most common things I find that many students struggle with is understanding when and how to use padding and margin. What if I told you that the element you are trying to style is a couch in your living room? Using HTML and CSS you state where in the living room you would like to place the couch in reference to other items you have in there. Using CSS you also move this couch around. So what in the world am I getting at?

Easy. Margin is the space around the couch. It is what keeps your couch a certain distance away from the chair and the TV stand. Now padding. See that is the fluffiness of the couch. That's all internal to the element that is the couch. In this case the border would be the fabric on the outside of the couch. It's what holds the padding in.

For some of my students picturing things this way helps give them a visual way to understand how things are behaving. Granted not every student needs these visuals, but that doesn't mean that they can't still help.

So as I can't help every new or experienced developer this past weekend I wanted to try and take my analogies and give them some visuals and publish them for the whole world to see.

BeeDev's Helper's is the site that I have started to do just this. I am sure that this will always be a work in progress. I mean why wouldn't it be. There is always another way to describe things or picture things. Right now there isn't much to the site, just a few pages but they are good pages.

It isn't mobile friendly yet either, but I will get it there. What matters is I am proud of what I have done so far, and that I won't stop adding to it.

Feel free to share the link, give suggestions on what to add or make better. I welcome the advice.

A Web Developers Journey

Melissa Payne — Tue, 02 Feb 2021 07:21:14 +0000

I started a blog at the end of 2020 to create a place to log my journey as a Web Developer. Even if I am the only one that will ever read it, I think it will be interesting to see the posts years from now and how I felt when new challenges came up or something good happened.

Background

For my post here today I want to talk about the Project that I have been working on for the last 4 weeks at Lambda, our Labs project. Even though I have been hired already and I am teaching Web Development that doesn't mean I don't deserve to get my endorsement through Lambda.

The project that we are working on is for Human Rights First, but more specifically it is about asylum cases. When someone seeks asylum in the US there is a process that they must go through to be granted or denied asylum.

The idea behind our project is to have a searchable database of uploaded (redacted) case files for representatives to go through. How often has Judge A granted asylum for Group type X.

When I was assigned the project I honestly had no clue what it was about and was kinda worried about it. Can I do this project justice not knowing anything about it? I don't know anyone that has asked for asylum, or at least I don't believe I do, so how could I possibly work on a project like this?

Well my team is amazing. From the Web Developers to the Data Scientists we have all been putting in our 100% best. Turns out knowing what the project is about isn't as important as understanding what the stakeholder is looking for and turning their wishes into functions....so to speak.

Groups, the good bad and....

Working in a group isn't always a good experience. However it should always be a learning experience. I got lucky during my labs experience and was paired up with some amazing folks. Both the fellow Web Developers and the Data Scientists we all amazing to work with.

On the Web Developer side we had quite a few challenges to over come. The biggest one that we chose to take on for the front end team was the upload button. We realized that with the project ahead of us having the ability to upload the case files for others to search through was important. Working on the display of things was equally important as well so we split our time between everything.

In working on the upload button and functionality we realized that it was going to be a bit more complicated that we first thought. The Stakeholder wanted to have the ability to add tags to the form that would add the file and parameters to the database. Not generally a problem until we realized the complexity of the tags. What we ended up needing was going to be a kinda hierarchy of sorts where we would need to pick a main category, which will then show its sub categories. Once that is chosen a list of tags would be shown as well as an option to add a new one. We understood the reasons for having this but that didn't mean it was a function that would be easy to replicate.

We didn't fully solve it only due to some bugs in the backend, however we did leave some good detailed notes so that the next team that works on it know what we did and what needs to be done.

The end has come .... now what?

Well now that our time to work on the project has come to a close, it's time to present the project to the Stakeholder. What works, what doesn't, things like that.

What works is that the visual aspect of the site looks much better. We went from this:

To this:

Makes it look much more inviting but also is more responsive.
Before we started working on the project the upload button was shown on the page, but it wasn't connected to anything. Now we have this:

Although not connected to the backend to be able to save the files or submit the form, but it has functionality and that is important.

For the next team we have set them up so that they can connect the backend to the upload button as we set it all up it just needs to be wired. Other features that will need to be worked on will be a download button, as well as a way to save searches. The biggest issue I can see that the next team encountering would be in the download. Will it download just the file or will there be other material downloaded as well?

Not my project so how can it help me?

Now here is something that I asked myself when I first started labs. This project wasn't something that I would have worked on or came up with but the experience that I gained both in working with a diverse team and with a code base that was already started and had some bugs is more than worth it. I can not describe how beneficial working on a project can be.

My final thoughts

I am grateful for everything that both Labs and Lambda has shown me and taught me.

If you want to follow my blog here is the link:
https://blog.melissa-longenberger.com

HoneyBees Game of Life

Melissa Payne — Sun, 25 Oct 2020 02:47:22 +0000

So I am a student of Lambda School and have finished the Core Web Developers part of the course and have been working with Computer Science or more specifically Python for the last unit. I can tell you I am NOT a fan of python.

For the end of the 1st Computer Science Unit we have our usual end of unit Build Week (or in the part time program build weeks) and our project was to create our own version of Conway's Game of Life.

My name Melissa in Greek means Honeybee, so I wanted to change up the grid from boring 'ol square cells to hexagonal cells. Well building a hexagonal grid in react wasn't too hard since there was a cool npm package I could use. Being able to to click single hexagon cells proved to be a bit interesting. I was able to click the grid and change the whole grids color but that wasn't what I wanted to do. With some help from fellow students, and even my instructor, I was finally able to get just the single hexagon cells to click on their own.

Building the logic for the actual Game of Life however certainly proved to be more difficult that I realized and currently as of this post still not done. Since I needed to have a working application by the end of the Build Week I chose to add the boring square grid. Now don't panic I am not giving up on the hexagonal grid just yet. Like I said though I needed to turn in a working application. And I did.

So what I did was create pages in my application the boring square ones and then the hexagonal one. Check out the project here:
http://game-of-life-by-melissa.vercel.app/

Now by now you are wondering what this has to do with Hacktoberfest. Well https://thecodingtrain.com has a game of life challenge on their site so although I had to do this for my school that doesn't mean I can't submit my version to their git repository and with luck eventually their site as well. So I did.

I am very proud of this project even as it stands as it is as of this post. I refuse to give up on that Hexagonal Grid. I may even add more pages for other versions. Who knows.

React Style May the 4th Challenge

Melissa Payne — Sun, 11 Oct 2020 20:31:53 +0000

What I Learned From Hacktoberfest

My first real contribution to someone else's project was through Coding Train's Repository. I took on Coding Challenge #101 - Called May the 4th. I put a spin on it of course. I didn't use the programs that the website uses, instead I used React. It took me a bit to get the basics done, but I did it. I might make tweaks here and there but the official PR was accepted and published to their site here https://thecodingtrain.com/CodingChallenges/101-may-the-4th.html.

Here is my live link that they published https://coding-train-may-the-4th.vercel.app/

I even went on and made a few changes here and there and published a new version through a different branch on my own repository here https://coding-train-may-the-4th-pages.vercel.app/.

I would love some feedback on what you think on either live version.

1st Hacktoberfest

Melissa Payne — Thu, 08 Oct 2020 02:58:46 +0000

What I learned so far!

In January I joined the ranks of Lambdalorians, and started the Full Stack Web Development Track at Lambda School. Best decision I have made in some time. For a Part Time student like myself the school takes over 1 year to go through 4 intense Units of Web Development, 2 Units of Computer Science, and then a few Units of Career and other team building projects. As of this post I am about halfway through the Computer Science portion.

Man have I learned a lot. Front End, Back End, and now Python. But thats not all this school teaches. Nope. At the end of July I also gained the title of Team Lead (TL). A unique position in the school where I get to go back through the core units but not as a student, or not just as a student, but as a Mentor to 6-10 students.

It was through fellow TL's that I learned about Hacktoberfest. Where I quickly decided that this was something I not only wanted to participate in as a Web Developer but as a maintainer. Well those same TL's wanted to gather some good projects for Dev's of all levels and present them to fellow students to help them delve into the world of Open source. So having 2 big projects that I have been working on in my github organization BeeDev Services I offered up the 4 repositories. 2 Front End React apps and their corresponding Backends.

But just passing on those links wasn't enough I soon learned. I also needed to have a solid README.md file. Having seen tons of these files from repositories that the school has us work in I did know that mine had to be good.

Hopefully I did a good job. Here is a list of the ones that I added and welcome extra help on.
Front End = https://github.com/beedev-services/new-help-guide
Back End = https://github.com/beedev-services/help-guide-database-api

Front End = https://github.com/beedev-services/web-dev-journey
Back End = https://github.com/beedev-services/blog-api

I can't wait to see what others can contribute to these and what else I can contribute to others.

Melissa

Adding js to react app

Melissa Payne — Fri, 24 Apr 2020 05:07:54 +0000

I have a js function for a chat service. Typically when building a site and using this I simply add the function to the .js file that is linked to the page that I want this chat service to show. I am unsure how I can still accomplish this when using react. Is is simply just like linking another .js file?