DEV Community: Mustofa Ghaleb Amami

Build & Ship a Real App From Your Phone — No Laptop Needed

Mustofa Ghaleb Amami — Sat, 21 Mar 2026 15:38:12 +0000

For most of computing history, building software required a dedicated machine. You needed a laptop, a development environment set up just right, a code editor, a terminal, package managers — and hours of configuration before you ever wrote a single line of your actual idea.

That's a high bar. And it kept a lot of people out. That bar just got a lot lower.

I shipped two live apps from my phone. No laptop. No local dev environment. No IDE. Just me, my phone, and three tools: Claude, GitHub Copilot, and Vercel.

🚀 The Three Tools (And What Each One Does)

Think of this as a three-person team, except each "person" is an AI tool — and they each have a very specific job.

🤖 Claude — Starts the project. Describe what you want in plain English. Claude writes the full boilerplate: file structure, code, configuration, everything. No setup, no scaffolding — just a complete starting point.
⚡ GitHub Copilot — Handles updates. Once your project exists, Copilot Agent reads your entire codebase and makes changes based on plain-language instructions. It edits the right files, commits, and pushes — all from your browser.
🚀 Vercel — Previews & ships. Connect your GitHub repo to Vercel once, and every push triggers an automatic deployment. Real preview URL to share and test. When you're happy, deploy to production with a tap.

That's the whole stack. Three tools, three clear roles, zero laptop.

01 — Start with Claude

Open claude.ai on your phone's browser. Write something like:

"Build me a calculator app with a clean UI. Use HTML, CSS, and vanilla JavaScript. Keep it simple and mobile-friendly."

Claude responds with a complete project. Copy the files into your GitHub repository — you can create one and paste files right in the browser at github.com. No terminal, no clone, no setup.

02 — Iterate with Copilot Agent

Open GitHub Copilot in your browser with Agent mode turned on. Point it at your repo. Now make requests:

"Add a calculation history panel on the side."
"Make the buttons larger on mobile."

Copilot reads your existing code, makes the right edits, and commits them. You don't touch a single file manually. Repeat this as many times as you need — each iteration is just a sentence.

03 — Preview and Ship with Vercel

Every commit you push triggers a build on Vercel. You get a preview URL — a real, live, shareable link — within a minute or two. Test it on your phone. Send it to a friend. When it's ready, promote it to your production domain.

That's the full loop. Claude starts it. Copilot refines it. Vercel ships it. All from your phone.

Real Proof: Apps I Built This Way

I didn't just theorize about this workflow — I used it to ship two real apps.

calculator.amammustofa.com — A fully functional calculator app with calculation history. Described it to Claude, had Copilot add the history feature, and Vercel had it live at my domain in under an hour. All from my phone.
hijriah.amammustofa.com — An Islamic Hijriah ↔ Gregorian calendar converter. A real utility app, with real users, built without ever opening a laptop.

Both apps are live right now. Both were built entirely on mobile.

💡 Why This Matters

The common narrative is that AI tools make existing developers faster. That's true. But the more interesting thing is what happens at the edges — when people who couldn't build before suddenly can.

You don't need a CS degree. You don't need to memorize syntax. You don't even need a laptop. If you have an idea and a phone, you have a development environment.

The bottleneck used to be access to tools and knowledge. Now it's just whether you have something worth building. That's a meaningful shift.

🚀 Try It Tonight

Here's a 30-minute starting point:

1. Open Claude and describe your app
Go to claude.ai on your phone. Describe an app you've been meaning to build. Be specific about what it should do and look like. Copy Claude's output into a new GitHub repo — create one and paste files right in the browser.

2. Use Copilot Agent to iterate
Open github.com and enable GitHub Copilot with Agent mode. Navigate to your repo. Ask Copilot to make a change, add a feature, or fix something. Let it do the work and commit.

3. Deploy on Vercel
Go to vercel.com and connect your repo. Import it, set your domain if you have one, and deploy. Your app will be live at a real URL in minutes.

Your phone is already a development environment. You just didn't know it yet.

GitHub Copilot in 2025: Agents, PR Reviews & Coding on the Go

Mustofa Ghaleb Amami — Sat, 21 Mar 2026 15:36:57 +0000

When GitHub Copilot first launched, it felt like a very clever autocomplete — one that could finish your function after reading a comment. That was already useful enough. But over the past year, Copilot has quietly grown into something much more interesting: an AI that can take on entire tasks end-to-end, leave review comments on your PRs like a senior teammate, and even follow you away from your desk via the GitHub mobile app.

If your mental model of Copilot is still "it fills in my code as I type", this post is for you. Let me walk through the three changes that have made Copilot genuinely indispensable in my day-to-day workflow.

🤖 Copilot Agents: Let It Do the Whole Thing

Agent mode is the headline feature of modern Copilot. Instead of suggesting the next line, you give Copilot a goal — "add input validation to the registration form and write tests for it" — and it figures out the steps on its own: reading the relevant files, making the changes, running tests, and fixing failures until everything is green.

What makes this feel different from just pasting code into Chat is that Copilot operates on your actual workspace. It reads the files it needs, edits them, runs your terminal commands, and iterates. It's the difference between asking someone for advice and handing them the keyboard.

Agent mode is available today in VS Code (as "Copilot Edits" and the experimental agent panel), JetBrains IDEs, and increasingly through GitHub itself for Copilot Workspace. The sweet spot for agents right now:

🧪 Writing test suites: Give it a module and ask for full coverage — it reads the code, writes tests, runs them, and fixes failures.
♻️ Refactoring: Rename a concept across the whole codebase, migrate to a new API, or split a large file — without touching every file yourself.
🐛 Bug fixing: Paste a failing test or error log. Copilot traces the cause, makes a fix, and confirms the test passes.
📄 Boilerplate generation: Scaffold a new feature end-to-end: component, service, types, and tests — all consistent with your existing patterns.

One thing I've learned: be specific about the outcome you want, not the steps. "Add form validation" is fine; "use Zod, keep existing field names, and make sure error messages are inline" is much better. The more constraints you give it, the less back-and-forth you need.

🔍 Copilot on Pull Requests: Your Always-Available Reviewer

One of the most underrated Copilot features is its ability to review pull requests. Once enabled for a repository, Copilot automatically reviews every PR and posts inline comments — the same way a human reviewer would — pointing out potential bugs, suggesting improvements, and flagging anything that looks off.

The comments appear in the standard GitHub PR review interface. You can respond to them, apply the suggested one-line fixes directly from the diff view, or dismiss them just like any other review comment. There's no separate workflow to learn.

Beyond line-level review comments, Copilot also generates a plain-language PR summary at the top — a quick paragraph explaining what changed and why — which is handy when you're reviewing someone else's work and want context before you dive into the diff.

What Copilot PR reviews catch well:

Edge cases the author missed (empty arrays, null values, boundary conditions)
Inconsistency with patterns used elsewhere in the codebase
Security concerns in input handling or data access
Missing error handling or inadequate logging
Opportunities to simplify logic or remove duplication

It is not a replacement for human review — it occasionally flags things that are intentional, and it won't catch issues that require deep domain knowledge. But as a first pass that runs before anyone else even looks at the PR, it catches a surprising amount. On my team, the number of review rounds before merge dropped noticeably after we enabled it.

📱 Copilot on Mobile: Code Review in Your Pocket

This one surprised me more than I expected. GitHub's mobile app (iOS and Android) now has Copilot Chat built right in. That means you can pull up a PR on your phone during your commute and ask Copilot to summarise the changes, explain a confusing diff, or tell you if there are any concerns — all in plain English, without needing to mentally parse the raw diff on a small screen.

You can chat with Copilot about the specific PR you're looking at, ask it general questions about the repository, or even explore files. It's the same model as the desktop, just in a conversational format that works well on a phone.

In practice, I use it mostly for three things away from my desk:

Quick PR triage — checking if a PR is ready to review or still needs work, without opening a laptop
Async code questions — asking about a piece of code someone mentioned in a message, so I can respond with something useful
Catching up after meetings — getting a plain-English summary of what changed while I was in calls

To enable it: update the GitHub app on iOS or Android, navigate to any repository or pull request, and look for the Copilot icon in the toolbar. Sign in with your GitHub account that has Copilot enabled and you're ready.

💡 Tips That Actually Help

Be specific about constraints, not just goals
"Add error handling" gives Copilot too much freedom. "Add error handling using our existing AppError class, log with the existing logger, and return a 422 for validation errors" gives it exactly what it needs.

Ask agents to explain what they did
After an agent finishes a task, follow up with "explain the changes you made". It forces you to actually review the output and often surfaces decisions that need your input.

Treat PR review comments as a starting point
Copilot's review comments are suggestions, not verdicts. Use them to catch things you might have missed, but dismiss anything that doesn't apply to your context. Over time you get a feel for which categories of comment are reliable for your codebase.

Use mobile Copilot for async, not deep work
The mobile experience shines for quick questions and triage. For anything requiring actual editing or multi-turn investigation, wait until you're back at your desk with the full IDE experience.

Always review before merging
Agent-generated code is often surprisingly good, but it is not infallible. Read through changes before committing them, especially in security-sensitive areas. Copilot moves fast — your job is to make sure it moved in the right direction.

⚠️ Things Worth Knowing

Agents can go sideways: Occasionally an agent will loop on a failing test or make a change that breaks something else. Set a time limit in your head — if it's been more than a few iterations without progress, take back the keyboard.
PR reviews are noisy at first: When you first enable Copilot reviews on a large codebase, it will flag patterns that are actually fine for your project. Spend 20 minutes on the first few PRs dismissing and categorising — it gets much cleaner quickly.
Mobile is read-heavy by design: The mobile Copilot is great for understanding and discussion, not for large-scale edits. Don't try to use it to write features on your phone — that's not the use case it was built for.
Security always needs human eyes: For authentication flows, cryptography, or data access, don't rely solely on Copilot's review comment or agent output. These areas need careful human review regardless of what AI suggests.

🎯 Final Thoughts

The version of Copilot in 2025 is meaningfully different from the one that launched. Agents let you delegate whole tasks rather than individual lines. PR review integration means every pull request gets a first-pass review before any human looks at it. And mobile support means you can stay informed and answer questions about your codebase from anywhere.

None of these features replace the judgment, taste, or domain knowledge that good engineers bring — but they do eliminate a lot of the friction that gets in the way of shipping. If you haven't revisited Copilot recently, it's worth a fresh look.

MobX 6 with multiple stores using React hooks

Mustofa Ghaleb Amami — Sat, 20 Feb 2021 17:33:58 +0000

When an app becomes bigger and more states to manage. We can add more stores making the store specific to their usage. In this post, I am going to share my approach to how to manage states with multiple stores to your react site.

Get started

Assumed you have a React app ready, we can install the necessary dependencies to work with MobX.

npm i mobx mobx-react

Create stores

We will create 2 stores, user and note store, user store will only have a user name as observable and a set function to modify the name. Note store will be keeping an array of notes. To display communication between stores, each note will have the user name who posts the note. Afterward, we can use the store to our app using hooks.

To begin, create a new folder called stores in the src directory
/src/stores/

Create user store

Add a new file inside stores folder /src/stores/user.store.js

// src/stores/user.store.js

import { makeAutoObservable } from "mobx";

class userStore {
  name = "John doe";

  constructor() {
    makeAutoObservable(this);
  }

  setUserName = (name) => {
    this.name = name;
  };
}

export default userStore;

the makeAutoObservable utility function introduced in MobX version 6.0 and above, you can use makeObservable/decorate if you use the older version of MobX.

Create note store

Add a new file inside stores folder /src/stores/note.store.js

// src/stores/note.store.js

import { makeAutoObservable } from "mobx";

class noteStore {
    notes = [];

    constructor() {
      makeAutoObservable(this);
    }

    addNote(note) {
        let send_note = { note };

        this.notes.push(send_note);
    }
}

export default noteStore;

Link the stores together

We will create context hooks as the interface to connect to the stores using hooks and create a root/main store that will link all of our stores. Root store will also be used to communicate between stores

Create root store

Add an index file inside stores folder /src/stores/index.js

// src/stores/index.js

import UserStore from "./user.store";
import NoteStore from "./note.store";

class RootStore {
  constructor() {
    this.userStore = new UserStore(this)
    this.noteStore = new NoteStore(this)
  }
}

note that we are passing this to the stores so that every store will have access to other stores by accessing the context passed to their constructor

Communicate between stores

Modify note store /src/stores/note.store.js so that each note addition will have the user name who post it

// src/stores/note.store.js

import { makeAutoObservable } from "mobx";

class noteStore {
    notes = [];

    // `this` from rootstore passed to the constructor and we can 
    // assign it to a variable accessible in this class called 
    // `rootStore`. Therefore, we can access other store like 
    // useStore for e.g (this.rootStore.userStore)
    constructor(rootStore) {
        this.rootStore = rootStore;
        makeAutoObservable(this);
    }

    addNote(note) {
        let send_note = { note };

        // check if name is available on userstore
        if (this.rootStore.userStore.name) {
          send_note.username = this.rootStore.userStore.name;
        }

        this.notes.push(send_note);
    }
}

export default noteStore;

Expose stores from context

Modify index /src/stores/index.js to use react context on the root store

import React from "react";
import UserStore from "./user.store";
import NoteStore from "./note.store";

class RootStore {
  constructor() {
    this.userStore = new UserStore(this)
    this.noteStore = new NoteStore(this)
  }
}

const StoresContext = React.createContext(new RootStore());

// this will be the function available for the app to connect to the stores
export const useStores = () => React.useContext(StoresContext);

Use the stores in the app

All store setup is now done, Great!. now it's time to use them in our app.

We will create the component in src/App.js file to access the stores, the component will have two input fields,
the first input field will be to change the name. the name changed will be reflected in a text above the input field.
the second input field will be to add a new note. note list can be found below the input field.

// src/App.js

import { useState } from "react";
import { useObserver } from "mobx-react";
// this is the hook function we have made on `stores/index.js` to access all of our stores
import { useStores } from "./stores";

export default function App() {
  // here you can access all of the stores registered on the root store
  const { noteStore, userStore } = useStores();
  const [note, setNote] = useState("");

  // tracking the name change
  const handleNameChange = (e) => {
    e.preventDefault();
    const {
      target: { value }
    } = e;

    // access the user store set name action
    userStore.setUserName(value);
  };

  // tracking the note change
  const handleNoteChange = (e) => {
    e.preventDefault();
    const {
      target: { value }
    } = e;

    setNote(value);
  };

  const addNote = () => {
    // access the note store action adding note to the notes array
    noteStore.addNote(note);
  };

  // since we want to observe the change in name and list, useObserver is required, otherwise, we can straightaway return jsx
  return useObserver(() => (
    <div className="App">
      <h1>hello {userStore.name}</h1>

      <h2>Change your name here</h2>
      <input type="text" value={userStore.name} onChange={handleNameChange} />

      <h2>Insert note</h2>
      <input type="text" value={note} onChange={handleNoteChange} />
      <button type="button" onClick={addNote}>
        Add note
      </button>

      <h2>Note list</h2>
      {noteStore?.notes?.length ? (
        noteStore.notes.map((note, idx) => (
          <div key={idx}>
            <h3>from {note.username}</h3>
            <code>{note.note}</code>
          </div>
        ))
      ) : (
        <p>No note on the list</p>
      )}
    </div>
  ));
}

🎉 End result

End notes

There are still many improvements that can be done from here, make stores that suit your needs, add more functions, handling APIs, persistent stores by saving them to local/session storage, and many more. Let's try those in the next post 😉

My Coding Journey, and Coding Tips

Mustofa Ghaleb Amami — Sat, 23 Jan 2021 20:27:44 +0000

Hello Everyone and dev.to!

I am Mustofa, Indonesian, 22 yo. This is my first time writing an article, probably in my entire life, so this might have many mistakes within the contents or words. This is just to share my coding journey briefly and give some coding tips from my opinion and experience. Last but not least, I hope this post can be useful for some people. Enjoy.

My coding journey

High school

5 years ago In a small city where everyone's popular job was only when you become a doctor, police, accountant, or business. Everyone and I thought I might become a great doctor. So I took a science stream in my high school. That day I got my laptop broken and brought it to a random tech workshop in a nearby mall, the way he was fixing it looked really cool so it gains my curiosity in IT. We had great conversations and became friends. He told me many interesting things about IT and taught me an important lesson You can do anything if you know how to search on google. It made me start learning how to fix basic computer problems like troubleshooting internet connection or installing windows. After gaining all the knowledge, I start doing a part-time job fixing my friends/teacher computer and gain satisfaction from it, that's when I decide to defy everyone's hope of me becoming a doctor. And go into the IT world.

University

Soon after graduation, I attended a 3 years IT degree in a private university which shocked me, I never knew I need to CODE!. while everyone else had the basics of coding, I only knew how to fix internet issues on computers. On my first day, the lesson was about variables, when the lecture explaining what is string, I can only think of guitar string!. It comes to the realization that coding is an impossible thing for me. Then, I started to divert my path by joining a part-time job as a salesman and a technical assistant. I gave my best for non-coding theory related subject and nearly failed all of the coding subjects. I can barely pass because my friends helped me out.

Internship

2nd year of study without knowing how to code, the university sends the students for an internship as preparation before 3rd year. I barely pass the phone internship interview because I googled out the answers. I never saw in my life someone can actually code back then until I met this person called R in the intern place. As an intern, he built a website in less than 2 hours live in front of me for his freelance work. Soon we became friends and learn to code together, It was very hard on the first day to understand it. It gave me a severe headache and nosebleed at night that day learning the basics of HTML/CSS/js and a bit of ASP.net C# to build a simple form. The reason why I got motivated is that he showed the result of everything he taught in a real-life scenario, which was pretty cool. One thing he always said to me Nothing is impossible here, so every error has a solution, taught me to not be afraid of getting errors on my code. From there onwards, I got an assignment from the company to build a signup/login form. I experimented with many things while building this form, especially the styles. because looking at the style changing keeps me motivated. but in the end, I failed to meet the deadlines and ends up transferring the assignment to someone else. Many assignments came after that, some success, and some failed.

Post internship + Last year at university

After 3 months of internship, I got used to HTML/CSS/js and CRUD concept in C#. My senior friend contacted me asking if I can make an e-commerce website for her. I did not ask for money nor anything at that time, my only aim was only to learn. I took the project, I asked R for advice since I never got a project this big before. Instead of listening to lectures, I was busy coding in class. for some deadlines, I need to stay up late until seeing a sunrise. I stopped my part-time job at that time and focus just on completing the project. The most time consuming and also the most important learning process was debugging errors, I encountered many errors and mistakes. Searching errors on Google and reading the stack overflow question & answer properly was the real key to code. It's hard to read at first, but I kept forcing my brain to just read it. In the end, the project was completed after 3 months, even without getting anything, it was a life-changing project for me. The senior was happy and start spreading words to her friends, by then I started doing many freelance IT project, but that time, I started collecting money from them.

Work

Soon after graduation, I join a fintech company as a front-end developer. Here I studied coding best practices, better application architecture, new/latest frameworks, and development workflow in the workplace. I am inspired to write a blog after watching a youtube channel Web programming Un pas to share the knowledge and contribute to the community if you know how to code already. After this post, I wanted to try to post more useful articles related to coding.

Coding tips

The hardest thing is to start, and consistently doing it. To do that, you need to have a career goal and project goal. It is easier to keep yourself motivated that way rather than learning it only just for the sake of learning it.
e.g of career goal: I want to work in company 'A' as a developer or I want to build a tech company or I want to have a good income from solving problems with the app I create.
e.g of project goal: I want to build a resume portfolio, I want to build an e-commerce app for my business
Start small. You do not need to create a big project at first, it will end up tiring yourself and get you overwhelmed. Instead, try small thing first,
e.g: showing up hello world text to screen, creating a button and its types, create header navigation, etc.
Every little thing matters. Showing up text to the screen or buttons might sound a little or a simple change, but in practice, it is not at all, especially for beginners. Appreciate yourself even by showing Hello world to the screen or terminal.
Do not confuse yourself too much with the environments at first.
In case your goal is to show text on the screen.
take this java code example:

public static void main(String[] args) {
        // Will print hello world
        System.out.print("Hello world");
}

I used to ask myself these questions: What is System or What is System.out do or Why does it use string[] args. It is not wrong to ask these questions, but these will confuse you as beginners and as you confuse, you will lose motivation. We just have to stick to the goal to show the text to the screen, so the real question to keep it simple is
Which block of code is responsible for displaying my text

System.out.print("ANYTHING INSIDE HERE");

Learn from having errors and mistakes. You will undoubtedly encounter errors, if possible have some friends/community to share your mistakes or errors, if not, google is your best friend. It's better to not jump straight to google or community first when having errors. because most of the errors caused by common mistakes like a typo, or missing symbols like a semicolon, colon, dot, or comma.
Choose your resources. This is the list of my resources
youtube.com
codecademy.com
freecodecamp.org
udemy.com
etc
For starters, just follow what the tutorial says, you can follow exactly what it does, and after completing it, you can try to start creating something similar to it on your own, or working toward your goal.

Thank you for reading until this point. I hope you have a great day ahead. 😉 💪 💪