DEV Community: Andrew M

Dumbsite

Andrew M — Tue, 07 Apr 2026 02:35:20 +0000

This is a submission for the DEV April Fools Challenge

What I Built

Dumbsite is, as the name suggests, a stupid website generator : ) It generates brilliantly stupid startup ideas and automatically encrypts them so that you can't actually read what the idea's about. Perfect for when you want to start a business but don't want to know what it does.

The app has lots of unique ideas and groups them into subjects, connectors, and modifiers and they are all ROT13 encrypted.

Demo

https://dumbslte.netlify.app/

How I Built It

Built with react and tailwind CSS.

Idea generation is essentially a template system that groups >50 subjects, connectors, objects, and modifiers to generate around 10,000 unique ideas
Encryption stage is where the implementation of ROT13 cipher takes place.
HTML generation is where each idea generates a downloadable HTML file with the encrypted idea embedded

New Year New Portfolio

Andrew M — Sun, 25 Jan 2026 04:58:32 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m really interested in artificial intelligence and machine learning, especially how coding and research can unite together to tackle complex problems. Besides just building models and exploring new concepts, I also love to play ice hockey (which you can find from the menu), which has taught me both teamwork and persistence.

Portfolio

https://andrewm91.netlify.app
I know that there isn't a google cloud run link but I hope you will still give it a chance

What I'm Most Proud Of

I'm most proud of the beginning sliding GSAP animation, the overall theme and structure, the flow and smoothness of the website, and how fitting and cool everything is.
I also love the 3d model and how it flows throughout the whole website.

100 Coding Terms Explained Like You’re 5

Andrew M — Sat, 19 Jul 2025 01:25:43 +0000

Sometimes the best way to learn hard concepts is to explain them simply. Here are 100 programming and tech terms — explained like you're five.

Programming Concepts

Variable – A box where you keep stuff like numbers or words so you can use them later.
Constant – A box that you’re not allowed to change once you put something in it.
Function – A machine where you put something in and get something back.
Parameter – The stuff you give to the machine (function) so it knows what to do.
Return Value – What the machine gives you back after doing its job.
Loop – Doing the same thing again and again until you're told to stop.
If Statement – A choice: “If this is true, do that. If not, do something else.”
Boolean – Just “yes” or “no” in computer language.
Array – A row of boxes, each with a number and something inside.
Object – A toy with a name tag and a bunch of labels that tell you things about it.

Programming Tools

Compiler – A translator that turns your whole story into computer-speak at once.
Interpreter – A translator that reads your story line by line and explains it as you go.
IDE (Integrated Development Environment) – A big coloring book and toolkit for writing code.
Debugger – A magnifying glass to find mistakes in your story.
Text Editor – A fancy notebook where you write your code.

Data & Storage

Database – A big, organized closet for saving and finding stuff.
Table – A grid in a database, like a spreadsheet.
Row – One line in a table, like one person’s info.
Column – A list of the same kind of thing (like names or ages).
Index – A shortcut list to find things faster.
Primary Key – A special label that makes sure nothing gets mixed up.
Foreign Key – A way to link two tables like holding hands.

Web Development

HTML – The skeleton of a website — it builds the structure.
CSS – The clothes and paint that make your website pretty.
JavaScript – The magic that makes your website do things when you click or type.
Frontend – Everything you can see and touch on a website.
Backend – The secret worker behind the curtain who makes things happen.
API – Like a restaurant menu: you ask for something and get it if it’s on the menu.
JSON – A way to write info that looks like a story computers understand.
AJAX – A way for your website to ask the kitchen for more food without leaving the table.
Cookie – A little snack a website gives you to remember who you are.
Session – The time you spend with a website until you close the tab.
Token – A secret code you use to prove who you are.

Coding Principles

DRY (Don't Repeat Yourself) – If you keep saying the same thing, write it once and reuse it.
KISS (Keep It Simple, Stupid) – Don’t make it harder than it needs to be.
YAGNI (You Aren’t Gonna Need It) – Don’t build something unless you really need it.
Abstraction – Hiding the messy stuff so you only see the useful buttons.
Encapsulation – Wrapping stuff up so people can use it without breaking it.
Inheritance – When one toy gets traits from another toy (like parents and kids).
Polymorphism – When one button works slightly differently depending on the toy.

Version Control (Git)

Git – A time machine for your code.
Repository – A big folder where your code lives.
Commit – Taking a picture of your work so you can come back to it.
Push – Sending your picture to the shared gallery.
Pull – Getting other people’s pictures to your own gallery.
Branch – A separate trail where you can try things without messing up the main path.
Merge – Putting two trails together into one again.
Conflict – When two people colored the same spot differently.

Cloud & DevOps

Cloud – Someone else’s big computer that you can use over the internet.
Server – A computer that gives you things when you ask.
Client – Your computer asking for things.
Container – A box that carries your app and everything it needs.
Docker – A tool that helps you pack your app in a container.
CI/CD (Continuous Integration / Continuous Delivery) – Robots that test and deliver your code automatically.
Environment – The room where your app lives (like a playground or classroom).

Errors & Testing

Bug – A mistake that makes your app do weird stuff.
Crash – When your app gives up and stops.
Exception – A surprise the computer didn’t like.
Unit Test – A little quiz for one tiny piece of your code.
Integration Test – A group project test to make sure all the parts work together.
Regression – When you fix something and something else breaks like whack-a-mole.

Data Structures

Stack – A stack of pancakes — last one you put on is the first one off.
Queue – A line at the ice cream truck — first in, first out.
Linked List – A treasure map where each clue tells you where the next clue is.
Tree – A big family tree of boxes and sub-boxes.
Hash Table – A magical filing cabinet that knows where everything is instantly.

Algorithms

Sorting – Putting things in order (like alphabetizing your Pokémon cards).
Searching – Looking for something in a big pile.
Recursion – When something solves a problem by doing a smaller version of itself.
Big O – A way to describe how long your code takes as the problem gets bigger.
Greedy Algorithm – Always picking the biggest cookie first, without thinking ahead.

Security

Encryption – Turning a message into a secret code.
Decryption – Turning the secret code back into the real message.
Authentication – Proving who you are.
Authorization – Proving you’re allowed to do something.
Firewall – A guard at the door saying “You can’t come in.”
Phishing – A trick where someone pretends to be nice but is trying to steal from you.

Miscellaneous

Syntax – The grammar rules of coding.
Runtime – When the code is actually doing stuff, not just sitting there.
Refactor – Cleaning your messy code without changing what it does.
Open Source – Code you can look at, use, and help make better.
Framework – A kit with pre-built tools so you don’t have to start from scratch.
Library – A collection of code that helps you do stuff faster.
Dependency – Something your code needs to work.
CLI (Command Line Interface) – Talking to your computer using typed instructions.
GUI (Graphical User Interface) – Clicking buttons instead of typing commands.
Cache – A little hiding spot where your computer saves stuff so it can load faster next time.
Latency – The time it takes for your computer to say “hello” and get a reply.
Bandwidth – How much stuff you can send or get at once.
Thread – A worker that can do one task at a time.
Process – A whole team of workers doing their job.
Concurrency – Multiple workers doing things at the same time (or pretending to).
Parallelism – Workers really doing things at the same time, not just pretending.
Garbage Collection – The janitor that cleans up stuff you’re not using anymore.
Heap – A big pile where your stuff goes when you're not sure how long you’ll need it.
Stack (Memory) – A short pile of stuff that disappears fast when you're done with it.
Event Listener – A person watching and waiting for something to happen, like a doorbell.
Callback – A note that says “When you're done, do this next.”
Promise – A pinky swear that says “I'll do it later.”
Asynchronous – Doing things in the background so you don’t have to wait.

Thanks for reading! Let me know which ones made you smile — or which you'd explain even better.

Building a Vanilla JS Intranet Dashboard: A Developer-Centric Approach

Andrew M — Thu, 10 Jul 2025 01:04:26 +0000

Modern Intranet Dashboard: A Developer-Centric Digital Workspace

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I designed a responsive intranet dashboard for Nexus Innovations, a fictional tech company, focusing on developer productivity and team collaboration. The single-page application features:

Personalized welcome area with quick actions
Interactive calendar with event management
Team spotlight section with status indicators
Resource hub with categorized documents
Company news feed and quick-access tools
Accessibility features including dark mode and text scaling

Built exclusively with vanilla HTML, CSS, and JavaScript, the dashboard demonstrates how clean design and thoughtful UX can enhance digital workplace experiences without requiring complex frameworks.

Demo:

View Live Demo on W3Schools

GitHub Repository

Journey

This project challenged me to balance aesthetic appeal with practical functionality. Key decisions I'm proud of:

Performance-First Approach: Used CSS Grid and Flexbox for layout instead of heavier frameworks, achieving 95+ Lighthouse scores.
Progressive Enhancement: Implemented all interactive features (calendar navigation, theme toggles) with vanilla JavaScript that degrades gracefully.
Accessible Design: Followed WCAG guidelines for color contrast and keyboard navigation, going beyond the challenge requirements.
Custom UI Patterns: Created reusable card components with consistent hover states and focus indicators.

The most valuable lesson was optimizing the developer experience while maintaining visual polish. I experimented with several calendar implementations before settling on the current balance between functionality and simplicity.

By submitting, I affirm that I hold all necessary rights or licenses for this submission.

Teamwork in Motion: Office Culture Illustrated with Pure CSS

Andrew M — Tue, 08 Jul 2025 02:45:42 +0000

Teamwork in Motion – CSS Art Tribute to Office Culture

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

I wanted to capture the essence of everyday office life — the little things that make a workplace feel human: hallway chats, shared mugs, sticky notes, plants, and that classic water cooler. This piece, titled "Teamwork in Motion," is a lighthearted tribute to those simple yet meaningful moments. I was especially inspired by both real offices and the fictional ones that stick in our minds, like Dunder Mifflin.

Demo

You can find the code and project files inside the repository:

GitHub Repository: https://github.com/Discovered12345/CSS-Office-Art

If you'd like to host or embed it, feel free to use CodePen or GitHub Pages. The entire scene is created using only HTML and CSS — no JavaScript or external libraries involved.

Journey

This project was built entirely with semantic HTML and CSS, using only 358 lines of code to create a complete office scene. Every element — from the 18px-wide coffee mug handle to the 45px-tall characters — was crafted with box-model fundamentals:

/* Example of CSS craftsmanship */
.head {
  width: 45px;
  height: 45px;
  background: linear-gradient(to bottom, #ffccbc, #d7ccc8);
  border-radius: 50%;
  /* Created facial features with ::before/::after */
}

License

I grant Axero a worldwide, royalty-free license to display this project for promotional or marketing purposes, with credit. Full ownership remains with me.

Author

Andrew Ma

GitHub: https://github.com/Discovered12345

How I Built an AI Agent to Manage My Gmail with RunnerH

Andrew M — Sun, 06 Jul 2025 02:40:19 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I created an Email Inbox Management Agent using Runner H. This autonomous agent logs into Gmail daily, sorts and prioritizes unread messages, summarizes lengthy emails, drafts appropriate replies, and delivers a full summary to Slack. It reduces the time and stress of email overload, especially for busy professionals or teams managing high volumes of correspondence.

Demo

Attached is a screenshot of the workflow summary generated by Runner H:

How I Used Runner H

I built this autonomous workflow entirely within Runner H using well-structured prompts and its built-in plugin integrations. No coding was required — the entire system leverages Runner H's natural language understanding, tool chaining, and memory across steps.

Step-by-Step Breakdown:

Input Prompt Design

I crafted a clear multi-step prompt that Runner H could follow sequentially:
Gmail Plugin Usage

Runner H accessed my Gmail inbox through the Gmail plugin. It retrieved unread emails and extracted necessary metadata — subject lines, senders, and full message content. The tool was able to analyze and manipulate the content directly inside the workflow without needing any scripting.

Categorization

Emails were sorted into three categories:

Urgent (e.g., deadline or immediate issue),
Action Needed (follow-ups, non-critical responses),
Read Later (FYI or low-priority info).

This categorization was done using context cues (like urgency keywords, sender importance, etc.).

Summarization of Long Emails

Emails over a certain threshold (3+ paragraphs) were summarized into 3 concise bullet points. This reduced cognitive overload and made it easy to scan for relevant details.

Drafting Responses

The agent then automatically generated context-appropriate responses. The tone was controlled by instructions to be “professional, brief, and polite.” Relevant details was also filled in using the original email context, avoiding generic or robotic replies.

Manual Reply Flagging

For emails that were ambiguous, highly sensitive, or too complex (like multi-person threads or nuanced decisions), the agent marked them for manual review. These were highlighted in the Slack report.

Slack Integration

Lastly, Runner H compiled a daily summary containing:

The count of each category,
The key urgent items with links,
Drafted replies ready for review.

This summary was automatically sent to a designated Slack channel using the Slack plugin. Now I get a clean email briefing each morning in my Slack workspace.

How to Replicate This Workflow

You can recreate this agent in under 10 minutes using Runner H:

Go to Runner H and click "New Agent".
Paste the multi-step prompt (as shown above) into the input box.
Ensure you enable the Gmail, OpenAI, and Slack plugins via the integrations menu.
Set the agent to run on a schedule — I run it at 7:30 AM every weekday.
Save and test the agent. It will walk through your inbox, summarize, categorize, and report.

Optional: You can customize the tone of the email responses (e.g., friendly, formal), or modify the summary format to send to Notion or a Google Doc instead of Slack.

This entire workflow showcases how Runner H can function like a real executive assistant, handling nuanced tasks like communication triage and writing — entirely from a single prompt and natural-language instructions.

Use Case & Impact

This workflow is designed for anyone who deals with a high volume of daily emails — including startup founders, project managers, customer support leads, and independent professionals.
By automating email triage, summarization, and response drafting, this solution transforms a time-consuming and often overwhelming task into a streamlined daily routine. Instead of spending 30–60 minutes each morning reviewing messages, users receive a prioritized digest in Slack with ready-to-send drafts and action items clearly outlined. This improves response time, reduces decision fatigue, and ensures that nothing important gets missed.
It’s especially useful in remote work environments, where asynchronous communication and task clarity are critical. By integrating AI-driven summarization and Slack for daily reporting, this Runner H workflow modernizes inbox management without requiring any technical skills or scripting.

FuturePath: My Hackathon Project That’s Becoming a Real Startup

Andrew M — Sun, 06 Jul 2025 00:12:15 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

After the Hackathon: FuturePath and the Road Ahead

When I first joined the World’s Largest Hackathon, I wasn’t sure what would come of it. I knew I wanted to build something that mattered — but I didn’t expect to walk away with a project that could become a real startup. What started as a sprint turned into a mission.

What was Built

During the hackathon, I built FuturePath — a career mentorship and planning platform for teenagers, powered by AI. The idea was simple: most students don't know what they want to do after high school, and the systems meant to guide them are either outdated, overworked, or not built with teens in mind.

FuturePath helps solve this by offering:

Personalized AI mentorship
Dynamic career roadmaps
Real-time scholarships and opportunities
Resume builders tailored to high schoolers
A dashboard to track goals and progress

With Bolt.new, I was able to turn this vision into a working platform in record time.

What I Learned

The biggest takeaway? It’s possible to develop quickly while staying empathetic to users.

Using Bolt's infrastructure, I was able to go from zero to fully - functioning in days — without cutting corners. I learned how to:

Architect scalable systems using Bolt serverless functions
Build memory-aware AI experiences using Gemini and Supabase
using AI prompts and tokens as effectively and efficiently as possible and getting the most out of them
Build for humans, not just users — especially for Gen Z students

But more importantly, I learned to listen. Every teen I talked to gave honest, direct feedback. That shaped how the product works, how it talks, and how it helps.

Where It's Going

Since the hackathon ended, FuturePath has become more than a project — it’s become a roadmap for my own future too. I’m now working on:

Adding AI voice conversations (talk to your mentor like a real counselor)
Tavus-powered AI interview coaching
Gamified achievements and career goal milestones
Social features like following friends and exploring peer paths
A mobile-first relaunch for underserved student communities
Partnering with schools and nonprofits for broader access
Launching a freemium model with premium mentorship features

My goal? To turn FuturePath into a startup that reaches millions of students worldwide — especially those who don't have access to personal guidance or private counseling.

What Changed For Me

This month changed how I think about building. It used to be about proving technical skills or chasing perfection. Now, it's about delivering real value as fast and as thoughtfully as possible.

I discovered that I'm not just a coder — I'm a builder, a designer. I gained clarity about my own career by helping others figure out theirs.

And thanks to the hackathon, I'm no longer waiting for the "right time" to start something real. I already am.

Final Thoughts

This hackathon wasn’t just a challenge — it was a launchpad.

I started with an idea and left with a product I believe in. FuturePath has shown me what’s possible when speed meets purpose, and while the event is over, my journey is just getting started.

Submission

This is a solo submission for the World’s Largest Hackathon: After the Hack, published by @discovered12345.

FuturePath: AI Career Mentorship for Teens Built with Bolt at the World’s Largest Hackathon

Andrew M — Sat, 05 Jul 2025 23:49:58 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

FuturePath: Empowering Teenagers with AI Mentorship

In a world where teenagers are overwhelmed with choice and under-supported by resources, FuturePath was created to offer clarity in the chaos.
We saw a simple but profound gap: while industries evolve overnight and career paths shift with new technologies, students—especially in high school — often receive the same generic advice handed out decades ago. Career exploration tools are outdated and most teenagers are left navigating their futures with little more than having to guess.

That’s where FuturePath steps in. Born during the World’s Largest Hackathon: Building with Bolt, FuturePath is a web platform that reimagines how career guidance works. It delivers personalized AI mentorship, real-time opportunity matching, resume-building tools, and career roadmaps — all designed specifically for teens aged 13–18. At its core, FuturePath is built on a bold mission: to democratize personalized career guidance using AI and make it accessible to every student, no matter their background or location.

How Bolt.new Transformed Our Development

Bolt was the backbone of FuturePath’s infrastructure. We used Bolt to quickly build and deploy dynamic features without worrying about scaling or latency. From running scheduled scrapers that collect new scholarships and internships each week, to processing resume templates and managing the PDF downloads, Bolt’s rapid development environment allowed us to iterate fast and deliver functionality that normally takes weeks — within only days.
The AI mentor was also integrated using Bolt’s workflow automation and secure API endpoints. We embedded vector memory so the AI could maintain conversational continuity — remembering the student’s name, goals, and previously discussed plans. This enabled something more powerful than a chatbot: an AI guide that grows with the student over time.

What We Built — A Platform Designed for Real Teens

One of our biggest design choices was to build for teens, not for job seekers or professionals. The UI is visual, interactive, and motivational. Students start by taking a brief career interest survey. Based on this, the AI generates a list of careers that align with their goals, personality, and skills. But the experience doesn’t stop there — they’re also given a step-by-step roadmap: courses to take, internships to apply for, and skills to develop over the next few years.

Our Technical Journey

Building FuturePath required a modular, scalable stack that could evolve quickly while handling complex user flows, AI interactions, and dynamic content generation. We chose technologies that would let us move fast without sacrificing long-term flexibility.

For the frontend, we used Next.js paired with TailwindCSS to build a responsive, teen-friendly UI. Every interaction — from the career quiz to roadmap visualizations to discovering colleges - was designed to feel intuitive and modern.

On the backend, Bolt powered our core services. We used Bolt’s serverless functions to create custom API and process user data securely. The ability to deploy and update logic instantly through Bolt allowed us to move with startup-level speed.

For our AI engine, we integrated Gemini, enhanced with embedded memory via Supabase. This let the AI remember a student’s prior goals, preferences, and progress, giving it the ability to act more like a long-term mentor than a one-time assistant.

We used Supabase not just for AI memory, but also for user authentication, data storage, and tracking individual progress—tying everything together with real-time updates and reliability.

In the end, our technical journey wasn’t just about choosing the right tools—it was about making them work together in service of a deeply human goal: giving students real, personalized guidance for their future.

Lessons Learned

Building FuturePath taught us that AI + empathy is the future of education. Teens don’t just want options—they want someone (or something) to guide them. One student tester said, “It’s like having a counselor that finally gets me.”

We learned that building fast doesn't mean building shallow — especially with Bolt. It gave us the speed of no-code platforms with the control of full-stack development.

What’s Next for FuturePath

Our vision is bold: a world where every teenager graduates high school with confidence and a concrete plan. Whether they want to be a marine biologist, software engineer, social worker, or entrepreneur, they deserve a roadmap — and someone (or something) to walk with them.

We plan to keep expanding FuturePath by:

Adding AI interview coaching (tavus ai calls)
Option where you can talk with an AI (like talking to a counselor)
Adding a premium feature
Building gamified achievement systems
System where you can follow/friend and add other people
Partnering with schools and youth nonprofits
Launching a mobile-first version for lower-access regions

Final Thoughts

Participating in the World’s Largest Hackathon gave us more than just a deadline—it gave us a launchpad. Bolt made it possible for a small team to build a big vision. And FuturePath is just the beginning.

Submission

This is a solo submission for the World’s Largest Hackathon: Building with Bolt, published by @discovered12345 .