DEV Community: Jitan Gupta

Claude Code Is Just a While Loop — I Intercepted the API to Prove It

Jitan Gupta — Sat, 25 Apr 2026 06:49:42 +0000

You type one line into Claude Code and hit Enter. In the background, ~80 KB of JSON gets shipped to Anthropic. System prompts, tool definitions, your CLAUDE.md, the full conversation history — all of it, every single request.

The interesting part isn't the size. It's what's inside, why it's structured that way, and why the bill doesn't scale in proportion to it. I put a man-in-the-middle proxy between Claude Code and Anthropic's API to find out. This is the breakdown.

Setting Up the Interception

The trick is routing Claude Code's HTTPS traffic through mitmweb — a browser-based MITM proxy that decrypts requests in flight.

Start the proxy in one terminal:

mitmweb --listen-port 8080

Open http://localhost:8081 in a browser. That's the inspector UI.

In a second terminal, route Claude Code's traffic through it:

export HTTPS_PROXY=http://localhost:8080
export NODE_EXTRA_CA_CERTS=~/.mitmproxy/mitmproxy-ca-cert.pem
claude

Note: The NODE_EXTRA_CA_CERTS line is the part most people miss. Without it, Node's TLS layer rejects the proxy's self-signed cert and Claude Code silently fails.

Now ask something simple — "read package.json and tell me which test framework is used." The proxy lights up. Click into the POST /v1/messages request.

80 KB. For one sentence.

What's Inside the 80 KB

Raw JSON in a proxy inspector is unreadable. I built a small parser that decodes a Claude Code payload into clean sections — you can paste your own intercepted requests in here.

The payload breaks into four parts.

1. System prompt (cached server-side)

"You are Claude Code, Anthropic's official CLI tool. You are an interactive agent..."

This identity block ships on every request. It's deterministic, so it gets cached for 5 minutes.

2. Tool definitions (cached server-side)

Full JSON schemas for every tool — Bash, Edit, Grep, Glob, Read, Write, Agent, and more. Each schema defines parameters, types, when to use the tool, and — interestingly — when not to use it. The Bash tool spec, for example, explicitly tells the model what kinds of operations it should refuse.

This is heavy. It's the bulk of the static payload. It's also cached, so you pay for it once per 5-minute window.

3. CLAUDE.md (injected via message)

This is the surprise. Whatever you write in CLAUDE.md at your project root gets injected — word for word — into every API request as a system reminder.

That means if your CLAUDE.md is bloated with stale rules, every request carries that weight. Optimize it.

4. Conversation history

The messages array — your prompts, Claude's responses, every tool call, every tool result. This is the part that grows.

The Agent Loop

Here's the mental model that made everything click:

Claude Code is a while loop.

while not done:
    payload = assemble(system_prompt, tools, claude_md, history)
    response = api_call(payload)
    if response.contains_tool_call:
        result = execute_tool_locally(response.tool_call)
        history.append(response)
        history.append(result)
    else:
        done = True

There's no separate planner. The loop is the planner. Every iteration, the model decides: do I have enough to answer, or do I need another tool call? If it calls a tool, the result gets appended to history and the loop runs again.

This is why payloads grow over multi-step tasks. I gave Claude a harder job — "run the tests and fix any failing test." It ran Bash, saw a failure, called Read on the failing file, called Edit to patch it, ran Bash again to verify. Four iterations. Four API calls. Each one carrying the cumulative messages array of everything before it.

The proxy showed it clearly: 80 KB → 95 KB → 110 KB → 130 KB.

Why the Bill Doesn't Explode

Naive math says: payload doubles → cost doubles. That's not what happens, and it's the most underrated piece of Claude Code's design.

Prompt caching is the trick. Running cclogviewer on a session log shows the actual token economics:

Request 1: 8,023 tokens cache write + ~2,000 tokens fresh input
Request 2: ~300 tokens fresh + 12,203 tokens cache read
Request 3: ~250 tokens fresh + 12,500 tokens cache read

The numbers that matter:

Cache write is ~25% more expensive than fresh input (one-time hit on the first request)
Cache read is ~10x cheaper than fresh input

So even though every request resends the full system prompt + tool definitions + CLAUDE.md, after the first request those bytes are billed at a fraction of the rate. Only the new parts of the conversation get charged at full price.

Without caching, a 10-tool-call session would scale roughly quadratically in cost. With caching, it scales nearly linearly with the new content produced.

Replaying Sessions Locally

One more thing I didn't expect: Claude Code logs every session locally as JSONL at ~/.claude/projects/<project>/<session-id>.jsonl. Each line is one request or response.

Raw, it's unreadable. But the community built tools for it:

claude-replay — drag a JSONL file in, get a clean visual playback of the conversation, including every tool call and result.
cclogviewer — terminal tool that gives you a token-by-token cost breakdown per request.

If you're debugging a session that went off the rails, or auditing what your team's Claude Code usage actually sent to Anthropic, these are the tools you want.

See It In Action

The proxy walkthrough, the parser breakdown, and the live agent loop land harder visually than in prose:

0:00 — The 80 KB hook
0:30 — Setting up the MITM proxy
2:30 — Decoding the payload with the request parser
4:00 — The agent loop in action
5:30 — JSONL session logs and replay tools
7:00 — Token economics and prompt caching

Quick Takeaways

Claude Code ships ~80 KB per request — most of it is tool schemas and your CLAUDE.md, not your prompt
The agent itself is a while loop — every iteration, the model decides whether to call a tool or stop
Payloads grow with every tool call because messages accumulates
Prompt caching makes that growth ~10x cheaper after the first request
Sessions are recorded locally as JSONL — claude-replay and cclogviewer make them readable

If you're building AI coding tools, copying this architecture is a reasonable starting point. If you're just using Claude Code, optimizing your CLAUDE.md is the highest-leverage thing you can do — it ships on every request.

I'm a Senior Platform Engineer publishing unfiltered breakdowns of how AI coding tools actually work in production. Follow along on YouTube if that's your kind of thing.

🛠️ Tools mentioned:

Request Parser — built for this video, free to use
mitmproxy — the MITM proxy
claude-replay — JSONL session replay
cclogviewer — token-level cost breakdown

Build a Custom MCP Server and Connect It to Your Real App — No Weather API

Jitan Gupta — Fri, 10 Apr 2026 14:07:54 +0000

Your AI tool can already write code, summarize docs, and answer questions. But can it talk to YOUR app?

MCP — Model Context Protocol is the standard that lets AI tools like Claude, Cowork, and others interact directly with external systems. Not through copy-paste. Not through screenshots. Through actual tool calls that read, create, and update data in your app.

I built an MCP server that connects my AI workflow tool (Cowork) to my Content Board app — a web app where I track every YouTube video from idea to published. One prompt, and Cowork reads data from Firestore, processes it, and writes it back. No manual copy-paste. No tab switching.

Here's how I built it, step by step.

What is MCP? Three Parts, That's It

MCP has three components:

Client — the AI tool you're using (Claude Desktop, Cowork, VS Code with Copilot)
Server — the bridge you build. It exposes "tools" — list items, get details, update records. The Client decides when to call which tool
App — your data layer. Firestore, Postgres, a REST API, whatever your app uses

Client says what it needs. Server translates. App provides the data.

Client (Cowork) ←→ MCP Server ←→ Firestore ←→ Content Board

Note: MCP servers aren't just local. GitHub has hundreds of open-source servers. Companies like Canva, Figma, and Slack ship official MCP integrations. But building your own is how you actually understand what's happening under the hood.

Step 1: Scaffold the MCP Server

I used Claude Code to generate the skeleton. One prompt:

"Create an MCP server. Use TypeScript, MCP SDK, define an entry point, and add a ping tool for health checks."

What it produced — a single index.ts:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new McpServer({
  name: "content-board",
  version: "1.0.0",
});

// Health check tool
server.tool("ping", "Check if the server is running", {}, async () => ({
  content: [{ type: "text", text: "pong" }],
}));

const transport = new StdioServerTransport();
await server.connect(transport);

The package.json pulls in two key dependencies: @modelcontextprotocol/sdk and zod for input validation.

Note: Zod isn't optional here. MCP uses it to define and validate tool input schemas at runtime. Every tool parameter goes through Zod.

Step 2: Test with MCP Inspector (No Claude Needed)

Before connecting to any AI client, test your server standalone using MCP Inspector:

npx @modelcontextprotocol/inspector npx tsx src/index.ts

This opens a browser UI where you can see your tools, run them manually, and inspect responses. No Claude subscription required.

Note: Your dev environment and MCP Inspector run in separate processes. If you set env vars in a .env file, you'll need to add them separately in Inspector's environment panel. This tripped me up — the server kept failing because Inspector couldn't find my Firebase credentials.

Step 3: Build Real Tools — The Part That Matters

I built four tools for my workflow:

list_content — list all videos with optional status filter
get_content — get full details for one video (including learnings, feedback, production data)
create_content — add a new video idea
update_content — update any field (status, description, script, etc.)

Here's the key insight — the tool description is the most important part of your MCP server. It's not documentation. It's an instruction for the AI Client to decide when and how to use the tool.

server.tool(
  "list_content",
  `List content items from Content Board.
  Returns: id, title, status, phase, description (truncated).
  Use this to browse what's in the pipeline.
  Supports optional status filter: 'idea', 'draft', 'published'.
  This tool is read-only — it will never modify data.`,
  {
    status: z.string().optional().describe("Filter by status"),
  },
  async ({ status }) => {
    // Firestore query + response formatting
  }
);

If your description is vague, the Client will call the wrong tool or pass wrong parameters. If it's specific — when to use it, what it returns, what it won't do — the Client behaves predictably.

Step 4: Register Locally and Use It

After building and testing all tools in MCP Inspector, register the server locally:

Build the TypeScript project so you have JS output
Edit claude_desktop_config.json (in your user's AppData/Roaming/Claude folder)
Add your server config — command, arguments, environment variables
Restart your AI client

The server shows up as a connector. Now any prompt can use your tools.

The Payoff

I went back to my Cowork session where I'd just approved a video script. One message:

"Here's the video ID — update the shooting script field in Content Board."

Cowork called get_content to load the video details, then update_content to write the script back. Content Board reflected the change on page refresh.

One prompt. Read, process, update. No copy-paste. No tab switching.

See the Full Build

The article covers the pattern, but watching the MCP Inspector debugging, the env var failures, and the live Cowork integration makes it click:

Timestamps for the impatient:

0:00 — What we're building
7:44 — MCP server creation with Claude Code
8:42 — MCP Inspector tutorial
10:00 — Building tools with Firestore
15:09 — Registering in Cowork
16:22 — Key takeaways

What You Walk Away With

MCP = Client + Server + App. That's the entire mental model. Everything else is implementation.
Tool descriptions are instructions, not docs. The AI Client uses them to decide what to call and when. Be specific about what the tool does AND what it doesn't do.
The development pattern is always the same: define tools → test in Inspector → register locally → use. Works for any app, any backend.
Start with your own app. Weather API tutorials teach you the SDK. Building for your real workflow teaches you MCP.

Both repos are open source:

I'm building AI workflows for real engineering teams — not toy demos. Follow along if you want the unfiltered version.

MERN Stack for experience developers -Part 2

Jitan Gupta — Sun, 19 Sep 2021 10:51:43 +0000

If you haven't read first part of this article, read here

In this article we will continue setting up our client-side application.

ReactJS setup

Let's create the React app.
We are again going to use node command line tool for that

npx create-react-app frontend

Note: if create-react-app package is not available, it may prompt you to install it.

Bootstrap

We are going to use bootstrap to design the frontend application.
Learn more here.

npm i bootstrap

Let's import the bootstrap design into app.js file and do some basic changes.

import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

class App extends Component{
  render(){
    return (
      <div className="container">
        MERN-Stack Todo App
      </div>
    );
  }
}

export default App;

If you will run the application, you can see something like below in your browser.

Add routing (React-Router-DOM)

Using react-router-dom we can add routing (multiple pages) into our application.

npm i react-router-dom

Before defining routes, let's create few components first, which we will use to define the pages (routes) in our application. Create create-todo.component.js, edit-todo.component.js and todos-list.component.js into a components folder.

After adding the above files, add some sample codes as follows

// creat-todo.component.js
import { Component } from "react";

export default class CreateTodo extends Component{
    render(){
        return(
            <div>Hi From Create todo</div>
        )
    }
}

// edit-todo.component.js
import { Component } from "react";

export default class EditTodo extends Component{
    render(){
        return(
            <div>Hi From Edit todo</div>
        )
    }
}

// todos-list.component.js
import { Component } from "react";

export default class TodosList extends Component {
  render() {
    return <div>Hi From todos list</div>;
  }
}

Let's add the routing into our App.js file now

// importing react & react-router-dom packages
import { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// importing components
import CreateTodo from "./components/create-todo.component";
import TodosList from "./components/todos-list.component";
import EditTodo from "./components/edit-todo.component";

// importing bootstrap & custom css
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";


class App extends Component {
  render() {
    return (
      <Router> 
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container">
            <Link to="/" className="navbar-brand">
              MERN Stack Demo
            </Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <Link to="/" className="nav-link">
                    Todos
                  </Link>
                </li>
                <li className="nav-item">
                  <Link to="/create" className="nav-link">
                    Add
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div className="container">
          <Route path="/" exact component={TodosList} />
          <Route path="/edit/:id" component={EditTodo} />
          <Route path="/create" component={CreateTodo} />
        </div>
      </Router>
    );
  }
}

export default App;

Let's break above code down:
BrowserRouter is a router implementation that uses HTML history API to keep UI in sync with URL.
Link is used to define anchor tags and to is similar to href.
Route: As you can see, it has few properties like path defines the route & component defines which component to use if the path matches. exact tells that the path should be /, not /xyz or /abc.
Note: To read the parameter passed in the URL like /edit/1, we can use this.props.match.params.id. And while defining such routes, we use /:id.

Let's run the application and see what we have so far

So far, we have added routes and basic components. It's time to design the list component and bind data from server.

Add Axios

Using axios library we can make HTTP requests such as GET, PUT, POST.

npm i axios

Now we are ready to design our todo list

// importing packages
import { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

// functional component
const Todo = (props) => (    
  <tr>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.title}</td>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.description}</td>
    <td className={props.todo.completed ? 'completed' : ''}>{props.todo.priority}</td>
    <td>
      <span className={props.todo.completed ? 'd-none' : ''}><button type="button" onClick={() => props.finished(props.todo)} className="btn btn-primary btn-sm mx-1">Finish</button></span>
      <Link className="btn btn-sm btn-secondary" to={"/edit/" + props.todo._id}>Edit</Link>
    </td>
  </tr>
);

// class component
export default class TodosList extends Component {
  constructor(props) {
    super(props);
    // defining the state of the component
    this.state = { todos: [] };

    // this is required for event binding in react
    this.finishTask = this.finishTask.bind(this);
  }  

  // react life cycle method
  componentDidMount() {
    axios
      .get("http://localhost:4000/todos/") // consuming the get api
      .then((res) => {
        this.setState({ todos: res.data }); // data binding
      })
      .catch((error) => {
        console.log(error);
      });
  }

  // finish task event from table, 
  // Please note, we are making a PUT request to server 
  // to update the status of task
  finishTask(task){
    task.completed = true;
    axios
      .put("http://localhost:4000/todos/" + task._id, task)
      .then((res) => {
        if (res.status === 200) { // checking if the response is ok or not, status code 200 is for ok
          this.props.history.push("/"); // refreshing the page, please don't do this in production level application
        }
      });
  }

  // mapping the todo list
  todoList() {
    return this.state.todos.map((todo, index) => {
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });
  }

  // rendering the output
  render() {
    return (
      <div>
       <h4>Todo List</h4>
       <table className="table">
           <thead>
               <tr>
                   <th>Title</th>
                   <th>Description</th>
                   <th>Priority</th>
                   <th></th>
               </tr>
           </thead>
           <tbody>
           { this.todoList() }
           </tbody>
       </table>
      </div>
    );
  }
}

Functional Component is a JavaScript function that returns some JSX. It does not need to extend anything. And to read data in functional component, we use props.
componentDidMount() is a life cycle method form react which run after the component output has been rendered into DOM.

Note:

As you can see, I am consuming APIs in same file, I am doing it to remove additional complications from this demo app.
Don't forget to read the additional comments written in above code file.

Before running your application, let's add some design for our completed task.

.completed {
  text-decoration: line-through;
}

If you will run the application now, you will see something like below

Note: As you can see I am already having few todos, I have created these todos using Postman, as shown in previous article.

Now, If will click on finish button, you can see the todo item has been marked as complete.

Pro Tip: If you are facing any kind of error and want to debug your code, (a) Open developer tools (ctrl+F12), (b) In source panel search(ctrl+P) for your todo-list.component, (c) add the debugger point on desired line number, and (d) Click on finish button in browser. You will see something like below

Moving ahead, let's design the edit page now

// importing packages
import React, { Component } from "react";
import axios from "axios";

// creating edit todo component
export default class EditTodo extends Component {
  constructor(props) {
    super(props);

    // defining state of the data
    this.state = {
      description: "",
      title: "",
      priority: "",
      completed: false,
      message: "",
    };

    // binding click events
    this.handleInputChange = this.handleInputChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  // fetching the data from server
  componentDidMount() {
    axios
      .get("http://localhost:4000/todos/" + this.props.match.params.id)
      .then((response) => {
        // binding the data into current state
        // the bound data will reflect in page
        this.setState({
          description: response.data.description,
          title: response.data.title,
          priority: response.data.priority,
          completed: response.data.completed,
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  // updating the updated value into current state
  // In HTML, 'name' holds the key defined in above state
  // using which, we are updating the data below
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState({ [target.name]: value });
  }

  // Updating the data
  onSubmit(e) {
    e.preventDefault();
    const obj = {
      description: this.state.description,
      title: this.state.title,
      priority: this.state.priority,
      completed: this.state.completed,
    };
    axios
      .put("http://localhost:4000/todos/" + this.props.match.params.id, obj)
      .then((res) => {
        if (res.status === 200) {
          this.props.history.push("/"); // after successful update, redirecting to list page
        }
      });
  }

  render() {
    return (
      <div>
        <h3>Update Todo</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>title: </label>
            <input
              type="text"
              name="title"
              className="form-control"
              value={this.state.title}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Description: </label>
            <textarea
              type="text"
              name="description"
              className="form-control"
              rows="3"
              value={this.state.description}
              onChange={this.handleInputChange}
            ></textarea>
          </div>
          <div className="form-group">
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityLow"
                value="Low"
                checked={this.state.priority === "Low"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">Low</label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityMedium"
                value="Medium"
                checked={this.state.priority === "Medium"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">Medium</label>
            </div>
            <div className="form-check form-check-inline">
              <input
                className="form-check-input"
                type="radio"
                name="priority"
                id="priorityHigh"
                value="High"
                checked={this.state.priority === "High"}
                onChange={this.handleInputChange}
              />
              <label className="form-check-label">High</label>
            </div>
          </div>
          <div className="form-check">
            <input
              className="form-check-input"
              id="completedCheckbox"
              type="checkbox"
              name="completed"
              onChange={this.handleInputChange}
              checked={this.state.completed}
              value={this.state.completed}
            />
            <label className="form-check-label" htmlFor="completedCheckbox">
              Completed
            </label>
          </div>

          <br />

          <div className="form-group">
            <input
              type="submit"
              value="Update Todo"
              className="btn btn-primary"
            />
          </div>
        </form>
      </div>
    );
  }
}

Let's break few important attributes of HTML code:

name="priority" key defined in state
value="High" HTML element holding the value.
checked={this.state.priority === "High"} current state of HTML element.
onChange={this.handleInputChange} event to be triggerd on check/uncheck event.

Let's edit some todo now

As you can see the data has been updated successfully. And page has been redirect to list again.
Note: I have not added any screen-shot after redirection to make sure you are following along, please confirm by yourself.

Now only create todo task is pending, let's do that now

// importing packages
import React, { Component } from "react";
import axios from "axios";

// create todo component
export default class CreateTodo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      description: "",
      title: "",
      priority: "",
      completed: false,
      message: "",
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    this.setState({ [target.name]: value });
  }

  onSubmit(e) {
    e.preventDefault();
    const newTodo = {
      description: this.state.description,
      title: this.state.title,
      priority: this.state.priority,
      completed: this.state.completed,
    };
    axios.post("http://localhost:4000/todos/", newTodo).then((res) => {
      // after adding todo successfully, clearing the current state & showing success message
      if (res.status === 200) {
        this.setState({
          description: "",
          title: "",
          priority: "",
          message: "Todo created successfully.", 
        });
      }
    });
  }

  render() {
    return (
      <div style={{ marginTop: 10 }}>
        <h3>Create New Todo</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Title: </label>
            <input
              type="text"
              className="form-control"
              name="title"
              value={this.state.title}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Description: </label>
            <textarea
              type="text"
              className="form-control"
              name="description"
              rows="3"
              value={this.state.description}
              onChange={this.handleInputChange}
            ></textarea>
          </div>
          <div className="form-group">
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityLow"
                  value="Low"
                  checked={this.state.priority === "Low"}
                  onChange={this.handleInputChange}
                />
                Low
              </label>
            </div>
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                Medium
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityMedium"
                  value="Medium"
                  checked={this.state.priority === "Medium"}
                  onChange={this.handleInputChange}
                />
              </label>
            </div>
            <div className="form-check form-check-inline">
              <label className="form-check-label">
                <input
                  className="form-check-input"
                  type="radio"
                  name="priority"
                  id="priorityHigh"
                  value="High"
                  checked={this.state.priority === "High"}
                  onChange={this.handleInputChange}
                />
                High
              </label>
            </div>
          </div>
          <p>{this.state.message}</p>
          <div className="form-group">
            <input
              type="submit"
              value="Create Todo"
              className="btn btn-primary"
            />
          </div>
        </form>
      </div>
    );
  }
}

Let's run the application and create some todos, click on add from navbar & you will see a page like below, add some information & click on create todo

Finally, we have completed the code for our todo application.

Few points before wrapping up this article...

Error

Cannot read property of undefined, after clicking finish todo button

This error is occurring because this context is not available in current scope. To resolve this change the function to arrow function. In our demo above, array function has been used.

return this.state.todos.map((todo, index) =>{
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });

below code breaks

return this.state.todos.map(function(todo, index) { // this breaks
      return <Todo todo={todo} key={index} finished={(task) => this.finishTask(task)} />;
    });

Points to keep in mind

Source code of the article can be found here
For debugging your node app, follow YouTube video
You may have noticed that I have used a single repository to manage both of my applications. It is just for this demo. Here is my workspace, and how I am running both applications parallelly.

MERN Stack for Experience Developers

Jitan Gupta — Mon, 13 Sep 2021 16:30:09 +0000

In this article, I am going to cover below points

What is MERN Stack?
Setting up development environment
Todo app development

Database setup - creating database
Backend setup - creating APIs with Node & Express
Frontend setup - creating React app
Making application interactive - consuming APIs.

Before we start, Let me clarify, I am not going to do any comparison of MERN stack with other stacks here.

What is MERN Stack?

MERN (MongoDB, Express, React, Node) stack is a JavaScript stack used for developing web application. Each of these technology play an important role while developing web apps which are as follows:

NodeJs is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. In this case on server.
Note: NodeJs is not a framework or a programming language. It's just an environment.

Express is a NodeJs web application framework which provides a set of features for web & mobile application development. Using Express, we will create the backend APIs.

MongoDB
MongoDB, the most popular NoSQL database, is an open-source document based database. The term NoSQL mean non-relational. It means that MongoDB isn't based on table like relation database structure but provides an altogether different mechanism to store and retrieve data. This form of storage is called BSON (similar to JSON format). Read more here

React
React is a JavaScript library for creating user-interfaces (UI). But it's not limited to creating UI elements, we can develop standalone applications (SAPs) as well using other libraries like react-router-dom, axios and so on.

Let's start building our todo_app.
Problem Statement:
We want to track our daily tasks in a way that, it is always available at our fingertips. We can easily create and update a task. And whenever the task is completed, we can mark it as done.

Solution:
Let's break the problem statement into multiple parts

To make the data persistent we are going to store it in database i.e. MongoDB in our case.
Create few APIs to retrieve, update (this includes marking as complete) and create these tasks. For that we will use NodeJS & Express.
In order make our service available to end user, we are creating a browser based user-interface. For that we will use React.

Environment Configuration

Download and install MongoDB, follow official documentation. You can also install MongoDB Compass which is GUI for MongoDB.
Download and install NodeJS, follow official documentation. After installation you can cross verify by npm -v and node -v.
Download and install Postman, follow official documentation. We need postman to test our APIs.

Database setup with MongoDB

Once you have installed MongoDB, you can go to your installation location, in my case C:\Program Files\MongoDB\Server\5.0\bin>, and type mongo to cross verify.

Let's create database

// From the installation folder
mongo // it will start mongo terminal
use mern_todo // Creating new database mern_todo

Backend setup with Node & Express

// Setting up backend server
mkdir backend // creating backend folder
cd backend 
npm init y // creating package.json file
npm i express body-parser cors mongoose

Express: We have seen it ealier.

body-parser: Node.js body parsing middleware. Using body parser, we parse the request body in required format.

app.use(bodyParser.urlencoded({extended: true})); // Supports URL encoded bodies
app.use(bodyParser.json()); // Supports JSON encoded bodies

CORS is a node.js package for providing an Express middleware that can be used to enable CORS with various options. Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. In simple words, Using CORS we can ensure that the request is coming from authorized source or not.

mongoose: A Node.js framework which lets us access MongoDB in an object-oriented way. Don't forget to checkout the schema part below in this article for clear understanding.

Moving ahead, Let's install Nodemon globally.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

npm i -g nodemon

let's create server.js using which we will be configuring our backend service.

// importing required packages
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
const mongoose = require("mongoose");
const PORT = 4000;

// configuring the middleware
app.use(cors());
app.use(bodyParser.urlencoded({extended: true})); // Supports URL encoded bodies
app.use(bodyParser.json()); // Supports JSON encoded bodies

// connecting to database
mongoose.connect("mongodb://127.0.0.1:27017/mern_todo", {
  useNewUrlParser: true,
});
const connection = mongoose.connection;
connection.once('open', function(){
    console.log('MongoDB database connection established successfully');
});

// listening the request at port 4000
app.listen(PORT, function () {
  console.log("Server is running on Port: " + PORT);
});

Please note, at this point if you will head to http://localhost:4000/, you will see nothing. But in Terminal, you can see the output successfully.

To see the output in browser add below lines before app.linsten section

app.get('/',(_, response) => {
    response.send("Hey, You can see me now!!!");
});

By using Mongoose we are able to use MongoDB database in an object oriented way.
This means that we need to add a Mongoose schema for Todo entity in our project.
Create a folder called models in root directory and add a todo.js file.

// importing required packages
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

// declaring Todo schema
let Todo = new Schema ({
  title: { type: String },
  description: { type: String },
  priority: { type: String },
  completed: { type: Boolean },
});

// exporting to make it consumable
module.exports = mongoose.model('Todo', Todo);

Using Todo schema, we can access the mern_todo database.

Let's create our Todo API:
We are going to follow the REST API architectural style.
REST API Architectural style means, using same URL with different Http verbs (GET, POST, PUT, DELETE) we can perform different-different actions.
Create a folder called routes in root directory and add a todo_routes.js file.

// importing packages
const express = require("express");
const todoRoutes = express.Router();

// importing model to access todo collection in mern_todo database
let Todo = require('../models/todo');

// get - returns list of todos
todoRoutes.route("/").get(function (req, res) {
  Todo.find(function (error, todos) {
    if (error) {
      console.log(error);
    } else {
      res.json(todos);
    }
  });
});

// get by id - returns single todo
todoRoutes.route("/:id").get(function (req, res) {
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    }
    res.json(todo);
  });
});

// update - updates a todo at provided id
todoRoutes.route("/:id").put(function (req, res) {
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    } else {
      todo.title = req.body.title;
      todo.description = req.body.description;
      todo.priority = req.body.priority;
      todo.completed = req.body.completed;

      todo
        .save()
        .then((todo) => {
          res.json("Todo updated");
        })
        .catch((error) => {
          req.status(400).send("Update not possible");
        });
    }
  });
});

// post - adds a todo
todoRoutes.route('/').post(function(req,res){
    let todo = new Todo(req.body);
    todo
        .save()
        .then((todo) => {
          res.status(200).json({'todo': 'todo created successfully'});
        })
        .catch((error) => {
          req.status(400).send("failed to create todo");
        });
});

// delete - removes a todo
todoRoutes.route('/:id').delete(function(req,res){
  let id = req.params.id;
  Todo.findById(id, function (error, todo) {
    if (!todo) {
      res.status(404).send("Todo not found");
    } else {      
      todo
      .delete()
      .then((todo) => {
        res.status(200).json({'todo': 'todo deleted successfully'});
      })
      .catch((error) => {
        req.status(500).send("failed to delete");
      });
    }
  });
});

// exporting the todo routes
module.exports = todoRoutes;

Now add these routes to server.js file

...
...

app.use('/todos', todoRoutes);

app.listen(PORT, function () {
  console.log("Server is running on Port: " + PORT);
});

Let's test the the APIs now
POST

GET

GET by Id

PUT

DELETE

Phew, that was to much work. But finally our backend is ready and tested.

In next article we are going to create our react-app.

Dart for Experienced Programmers

Jitan Gupta — Thu, 02 Sep 2021 13:02:25 +0000

If you know any Object Oriented programming language like C#, Java, and you want to understand the basic fundamentals of Dart. This article is for you.

Before you proceed further, please note, this article contains only examples and syntaxes.

Fundamentals

Dart is static type, object oriented programing language.
Dart support two types of compilation i.e. JIT (Just in Time) and AOT (Ahead of Time).

Just In Time

A JIT compiler converts program source code into native machine code just before program execution. Compilers are usually one of the deciding factors in the speed of an application both in development and when pushed to production. The JIT compilers can be used to improve performance speed and improve application runtime.

Ahead Of Time

The AOT compiler works by compiling your code before it is “delivered” to whatever runtime environment runs the code. The AOT compiler is typically used when the app is ready to be deployed to either an appstore or an in-house production backend.

Read/Write

import 'dart:io';

stdout.writeln("What is your name");
String? name = stdin.readLineSync();
print("My name is $name"); //$name string interpolation

Data Types

Strongly typed data type: int, double, String, bool
Dynamic typed data type: dynamic

void main() {
  int amount = 100;
  var amount2 = 100;

  print("amount: $amount | amount2: $amount2");

  // similarly for String, double, bool

  // dynamic
  dynamic weakVariable = 100;
  print("Weak variable 1: $weakVariable \n");

  weakVariable = "Dart Programming";
  print("Weak variable 2: $weakVariable");

}

String

void main() {
  var s1 = 'Single quotes work';
  var s2 = 'Double quotes work as well';
  var s3 = 'It\'s easy to escpte the string delimiter';
  var s4 = "It's even easier";

  print(s1);
  print(s2);
  print(s3);
  print(s4);
  print('');

  // Raw String
  var s = r'In a raw string, not even \n gets special treatment';
  print(s);

  // String interpolation
  var number = 35;
  var str = "Current number is $number";
  print(str);
}

Type Conversion

void main() {

  // String -> int
  var one = int.parse('1'); // not safe, if 'str' is passed, it will fail
  assert(one ==1); // testing that parsed correctly

  // String -> double
  var onePointOne = double.parse('1.1');
  assert(onePointOne == 1.1);

  // int -> String
  String oneAsString = 1.toString();
  assert(oneAsString == '1');

  // double -> String
  String piAsString = 3.14150.toStringAsFixed(2); // 2 floating point
  assert(piAsString == '3.14');
}

Constant

use const keyword to make a variable const.

Null

if you will to set null, you will get linting error (disable it before testing).

class Num {
  int num = 10;
}

main() {
  var n; // n is null
  // var n = New(); // creating new object of class
  int number = n?.num ?? 0; // if n is null or n.num is 0 then assign 0
  print(number);
}

Function

old school

<return_type> / void <function_name>(param_type param1, param_type param1 ){
  return / nothing in case of void
}

dynamic square(var num) {
  return num * num;
}

int square2(int num) {
  return num * num;
}

Arrow Function => // '=>' is also known as fat arrow function;

dynamic square(var num) => num * num;

nameless function also known as anonymous function

main() {
  var list = ['apples', 'bananas', 'oranges'];
  list.forEach(printF); // old school
}

void printF(item) {
  print(item);
}


// anonymous type
 var list = ['apples', 'bananas', 'oranges'];
  list.forEach((item) {
    print(item);
  });
}

Positional & Named Parameter

// Positional parameter
main() {
  print(sum(2, 2));
}

dynamic sum(var num1, var num2) => num1 + num2;
// ---------
// Named Parameter
main() {
  print(sum(num2: 5, num1: 8));
}

dynamic sum({var num1, var num2}) => num1 + num2;
// ---------
// Combined together
main() {
  print(sum(5, num2: 8));
}

dynamic sum(var num1, {var num2}) => num1 + num2;

Note:
By default named parameters are optional parameter, but you need to handle the null situation.
Updated code

main() {
  print(sum(5));
}

dynamic sum(var num1, {var num2}) => num1 + (num2 ?? 0); // manually handling
// dynamic sum(var num1, {var num2 = 0}) => num1 + num2; // default value

similarly for Positional parameter

dynamic sum(var num1, [var num2]) => num1 + (num2 ?? 0); // manually handling

Class

class Person {
  String name;
  int age;

  // Shortcut
  Person(this.name, [this.age = 18]); // [] optional parameter, in this case age

  // Named Constructor
  Person.Guest([this.name = "Guest", this.age = 18]) {} // optional parameter
  Person.Guest2({this.name = "Guest", this.age = 18}) {} // positional parameter

  void showOutput() {
    print(name + ' ' + age.toString());
  }
}

class X {
  final name; // won't change after assigning first time // runtime
  static const int age = 10; // compile time

  X(this.name);
}
// --------
// Inheritance & overriding
class Vehical {
  String model;
  int year;

  // Shortcut
  Vehical(this.model, this.year);

  void showOutput() {
    print(model + ' ' + year.toString());
  }
}

// inheritance
class Car extends Vehical {  
  double price;

  Car(String model, int year, this.price) : super(model, year);

  // void showOutpu() {
  //   super.showOutput();
  //   print(this.price);
  // }

  @override
  void showOutput() {
    print(this.price);
    print(this.price);
  }
}

Collection[List, Set, Map]:

main() {
  List<String> names = ['name1', 'name2'];
  // List names = ['name1', 'name2']; // List<dynamic>
  // var names = ['name1', 'name2']; // List<String>
  print(names[0]);
}

  // Mutable
  List<String> names = ['name1', 'name2'];
  names[1] = "new name";

  // Immutable
  List<String> names2 = const ['name1', 'name2'];
  names2[1] = "updated"; // while running, this will break;

Set

// Set is an unordered collection of unique item.

var halogens = {'fluorine', 'chlorine', 'fluorine'}; // as you can see, I am trying to add 'fluorine' again, this will throw linting error

// this will work
Set<String> halogens = {'fluorine', 'chlorine'};

Map

// Map is basically a collection of key-value items, similar to Dictionary in C#

  // Map
  Map<String, String> halogens = {'first': 'fluorine', 'second': 'chlorine'};
  var halogens2 = {'first': 'fluorine', 'second': 'chlorine'};
  var halogens3 = {1: 'fluorine', 2: 'chlorine'}; 
  Map<int, String> x = {1: 'fluorine', 2: 'chlorine'};
  var halogens4 = Map();
}

Exception Handling:

 try {


  } on CustomException { // handle custom errors, if the error is of type CustomException


  }  on DomException { // handle Dom Exception


  }catch (e) { // handle all error except above exceptions

  } finally {


  }

Future, Async, Await

Future<String> createOrderMessage() async {
  var order = await fetchUserOrder();
  return "Your order is: $order";
}

Future<String> fetchUserOrder() => Future.delayed(
  const Duration(seconds: 2),
  () => "Some product",
);

Future<void> main() async {
  print("Fetching user order...");
  print(await createOrderMessage());
}

If I have missed any important topic regarding dart fundamentals, please comment down below. I will be more than happy to update this article.