The goal is simple: add AI that works reliably, without overengineering it.

What We're Building

I built the Calorie Counter as a solo project. Users can type a food item (or upload a photo) and get back structured nutrition data, a health score, and recipe video recommendations.

The AI handles two things:

1. Text input → Extract detailed nutrition information

2. Image input → Identify the food item from a photo, then extract nutrition

Everything else, health scoring, video search, data persistence, is handled by regular code. This is the first principle: use AI only where it adds value.

1. Structured Outputs with Zod

The biggest mistake I see developers make is treating LLM responses as free-form text and then writing fragile parsing logic. OpenAI supports structured outputs: you pass a schema, and the response is guaranteed to match it.

First, define your schema with Zod:

import { z } from "zod";

const FatDetailsSchema = z.object({
  saturated: z.number(),
  unsaturated: z.number(),
  trans: z.number(),
});

const CarbohydrateDetailsSchema = z.object({
  fiber: z.number(),
  sugar: z.number(),
  starch: z.number(),
});

export const NutritionScoresSchema = z.object({
  food_item: z.string(),
  calories: z.number(),
  protein: z.number(),
  fat: z.number(),
  fat_details: FatDetailsSchema,
  carbohydrates: z.number(),
  carbohydrate_details: CarbohydrateDetailsSchema,
  cholesterol: z.number(),
  sodium: z.number(),
  potassium: z.number(),
  vitamin_c: z.number(),
  calcium: z.number(),
  iron: z.number(),
});

Then use zodResponseFormat when calling the API:

import { zodResponseFormat } from "openai/helpers/zod";

const response = await client.chat.completions.parse({
  model: MODEL,
  messages: [
    { role: "system", content: systemPrompt },
    { role: "user", content: userPrompt },
  ],
  response_format: zodResponseFormat(NutritionScoresSchema, "NutritionScores"),
  temperature: 0.3,
});

return response.choices[0].message.parsed!;

The key things here:

• zodResponseFormat tells OpenAI to return JSON matching your Zod schema. No manual parsing needed.

• temperature: 0.3 keeps responses consistent. For factual data like nutrition info, you want low creativity.

• .parsed! gives you a fully typed object. Your TypeScript types and your AI output are the same schema.

This is much cleaner than parsing free-form text with regex or hoping the model returns valid JSON.

2. Handling Rate Limits with Retry Logic

If you're using OpenAI (or Azure OpenAI), you will hit rate limits eventually. A simple retry wrapper with exponential backoff handles this gracefully:

async function withRetry<T>(fn: () => Promise<T>, maxRetries = 3): Promise<T> {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (err: unknown) {
      const status = (err as { status?: number }).status;
      if (status === 429 && attempt < maxRetries) {
        const delay = Math.pow(2, attempt) * 1000; // 1s, 2s, 4s
        await new Promise((r) => setTimeout(r, delay));
        continue;
      }
      throw err;
    }
  }
  throw new Error("Unreachable");
}

Then wrap your API calls:

const response = await withRetry(() =>
  client.chat.completions.parse({
    model: MODEL,
    messages: [...],
    response_format: zodResponseFormat(NutritionScoresSchema, "NutritionScores"),
    temperature: 0.3,
  })
);

This only retries on 429 (rate limit) errors. Other errors fail immediately: you don't want to retry on a bad prompt or authentication failure.

3. Vision API: A Two-Pass Approach

For image analysis, I used a two-call pattern:

Call 1: Identify the food — Send the image to GPT-4o's vision endpoint with strict guardrails.

const base64Image = imageBuffer.toString("base64");

const visionResponse = await withRetry(() =>
  client.chat.completions.create({
    model: MODEL,
    messages: [
      {
        role: "system",
        content: `You are a precise food image analyzer. Your rules:
1. Determine if the image contains food or not
2. Never classify non-food items as food
3. If the image contains people, landscapes, or non-food objects,
   respond with is_food: false`,
      },
      {
        role: "user",
        content: [
          { type: "text", text: "Analyze this image and return a JSON response..." },
          {
            type: "image_url",
            image_url: { url: `data:\({mimeType};base64,\){base64Image}` },
          },
        ],
      },
    ],
    response_format: { type: "json_object" },
  })
);

Call 2: Normalize the output — A second, cheaper call formats the vision result into a clean schema.

Why two calls instead of one? The vision model is good at identifying food, but its output format can be inconsistent. A dedicated formatting pass gives you reliable structure. This is cheaper and more predictable than asking the vision model to do both at once.

4. Keep AI Out of What Doesn't Need It

This is the part most developers skip. The Calorie Counter computes a health score for every food item — but this is done algorithmically, not by the LLM:

export function calculateHealthScore(nutrition: NutritionData): HealthScore {
  // Each nutrient has a signed weight: positive = good, negative = bad
  const weights = {
    protein: 0.15,
    fiber: 0.12,
    vitamin_c: 0.08,
    calcium: 0.08,
    // ...
    saturated_fat: -0.12,
    trans_fat: -0.15,
    sugar: -0.10,
    sodium: -0.08,
  };

  // Score each nutrient against its healthy range,
  // multiply by weight, sum to get 0-10 score
}

Why not ask GPT for the health score? Three reasons:

• Cost — Every LLM call costs money. A math function is free.

• Consistency — The same input always produces the same score. LLMs can vary.

• Debuggability — When a score seems wrong, you can trace the algorithm. With an LLM, you'd be guessing.

Rule of thumb: If the logic can be expressed as a deterministic function, don't use AI for it.

5. API Route Structure

Keep your API routes thin. They should validate input, call your AI functions, and return the response:

// app/api/calculate-nutrition/route.ts
export async function POST(request: Request) {
  const body = await request.json();
  const parsed = CalculateNutritionRequestSchema.safeParse(body);

  if (!parsed.success) {
    return NextResponse.json(
      { error: "Invalid request", details: parsed.error.flatten() },
      { status: 400 }
    );
  }

  const nutrition = await getNutritionInfo(parsed.data);
  const healthScore = calculateHealthScore(nutrition);
  const videos = await getRecipeVideos(nutrition.food_item);

  return NextResponse.json({ nutrition, healthScore, videos });
}

Zod validates the input. The AI function returns typed data. The health score is computed. Videos are fetched. No middleware chains, no abstraction layers — just a straightforward pipeline.

6. Client-Side: Don't Overthink It

On the frontend, a simple loading state is often enough:

const [loading, setLoading] = useState(false);
const [result, setResult] = useState<NutritionResult | null>(null);

const handleSubmit = async () => {
  setLoading(true);
  try {
    const response = await fetch("/api/calculate-nutrition", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ food_item, quantity, unit }),
    });
    const data = await response.json();
    setResult(data);
  } catch (err) {
    setError("Something went wrong. Please try again.");
  } finally {
    setLoading(false);
  }
};

I deliberately did not use streaming here. For a nutrition lookup, the user needs the complete table: partial results aren't useful. Streaming adds complexity (managing chunks, partial UI states, error handling mid-stream). It makes sense for chatbots, but not for structured data.

Add streaming when the user benefits from seeing partial output. Skip it when they need the complete result.

7. Cost Control Checklist

A few practical things that keep API costs in check:

• Validate before calling — Client-side validation prevents empty or garbage requests from hitting the API.

• Limit file sizes — The calorie counter enforces a 10MB image limit client-side. Smaller images = fewer tokens.

• Use low temperature — For factual queries, temperature: 0.3 or lower reduces token usage and gives more focused responses.

• Hybrid approach — Use AI for what requires intelligence (food identification, nutrition extraction). Use regular code for everything else (scoring, video search, CRUD).

Wrapping Up

Adding AI to a Next.js app comes down to a few principles:

1. Use structured outputs — Zod schemas with zodResponseFormat eliminate parsing headaches.

2. Handle failures gracefully — Exponential backoff for rate limits, Zod validation for inputs.

3. Keep AI scoped — Not everything needs an LLM. Deterministic logic should stay deterministic.

4. Skip streaming for structured data — Simple request/response is easier to build and debug.

5. Control costs at every layer — Validate early, limit payloads, use low temperature.

If you have questions or want to share how you're integrating AI into your apps, find me on X.

Since then, AI tools have become part of my daily workflow. Not as a replacement for thinking, but as a developer assistant that helps me move faster. In this post, I'll share how I actually use AI while coding, the tools I rely on, and a few prompt techniques that consistently work well.

AI output is a starting point, not production-ready code. Everything still needs to be reviewed and tested.

Why I Started Using AI for Development

The biggest benefit of AI in development is simple: it removes friction. There are many small moments while coding where you lose time:

• forgetting syntax

• looking for an example of a library

• writing repetitive boilerplate

• debugging something trivial

Normally, this means searching documentation or opening multiple forum threads. With AI, I can often get a working example immediately, which helps me focus on solving the real problem instead of hunting for information.

That said, I follow one important rule: AI output is a starting point, not production-ready code. Everything still needs to be reviewed and tested.

Tools I Use

Two tool types currently play the biggest role in my workflow: inline/code-aware suggestions in the editor, and chat-style assistants for explanations and small design decisions.

• Editor extensions (quick inline help)

  • GitHub Copilot: great for small completions, boilerplate, and autocomplete inside VS Code.

  • Tabnine / Codeium: fast, often lower-latency completions for common patterns.

• Chat assistants (conversations and context)

  • ChatGPT (or similar): for explaining errors, generating minimal reproducible examples, and creating tests or migration snippets.

  • Built-in IDE chat (when available): keeps context local to the repo and speeds up iterative fixes.

• Local / enterprise models

  • Self-hosted LLMs or private model endpoints when working with sensitive code or closed-source corpuses.

• Supporting tools

  • Linters and formatters (ESLint, Prettier) to keep AI-generated code consistent with project style.

  • Test frameworks (Jest, Mocha) and E2E tools (Playwright) to verify changes quickly.

  • Snippet managers and PR templates to speed up review/merge tasks.

When to pick which: use editor extensions for small lines or glue code; use chat assistants when you need explanations, refactors, or to generate unit tests and alternatives.

Real Before/After Examples

Below are real, minimal examples that I’ve used as teaching material in my own posts and internal docs. For each: the problem, the prompt I used, the before code, the AI suggestion summary, the after code, why it works, and how I verified it.

Example 1 — Missing await / unhandled rejection (Mongoose-style save)

Prompt I used: I have this Express handler — it sometimes causes unhandled promise rejections and downstream code reads stale data. Suggest a minimal fix, explain briefly, and add proper error handling.

Before

// routes/users.js
app.post('/users', async (req, res) => {
  const user = new User(req.body);
  user.save(); // missing await
  res.status(201).json({ id: user._id });
});

AI suggestion (summary)

• Await the save() call and wrap in try/catch so errors are caught and the response is sent only after the save completes.

After

// routes/users.js
app.post('/users', async (req, res) => {
  try {
    const user = new User(req.body);
    await user.save(); // wait for DB write to finish
    res.status(201).json({ id: user._id });
  } catch (err) {
    console.error('Failed to create user', err);
    res.status(500).json({ error: 'Could not create user' });
  }
});

Why this works

• await ensures the DB operation finishes (and any errors surface) before sending a response. try/catch prevents unhandled promise rejections and gives a clear error response for callers.

How I verified

• Hit the endpoint with valid and invalid payloads; confirmed response status codes and no unhandled rejection logs. Also ran a quick integration test for DB write/read.

Example 2 — Missing return after early response (headers already sent)

Prompt I used: This Express route sends a 400 on missing input but crashes with "Cannot set headers after they are sent." Show a minimal fix and explain.

Before

app.post('/login', async (req, res) => {
  if (!req.body.email) {
    res.status(400).send('Missing email');
  }

  const user = await findUserByEmail(req.body.email);
  // further processing that may call res.json()
  res.json({ id: user.id });
});

AI suggestion (summary)

• Return immediately after sending the error response (or use an else), so the rest of the handler doesn't execute.

After

app.post('/login', async (req, res) => {
  if (!req.body.email) {
    return res.status(400).send('Missing email'); // return stops execution
  }

  try {
    const user = await findUserByEmail(req.body.email);
    if (!user) return res.status(404).send('User not found');
    res.json({ id: user.id });
  } catch (err) {
    console.error(err);
    res.status(500).send('Server error');
  }
});

Why this works

• Returning after res.* ensures the handler stops; adding try/catch and additional guards prevents multiple responses and handles errors gracefully.

How I verified

• Ran tests for missing email and nonexistent user; no header errors and correct status codes returned.

Example 3 — Using async map without Promise.all (array of Promises)

Prompt I used: I map over an array and call an async function inside map, but I see wrong behavior because the responses are not awaited correctly. Suggest a minimal fix and explain.

Before

async function fetchAll(ids) {
  // getDataForId returns a Promise
  return ids.map(id => getDataForId(id)); // returns array of promises, not awaited
}

const results = await fetchAll([1,2,3]);
console.log(results); // unexpected: array of unresolved promises

AI suggestion (summary)

• Use Promise.all to await all Promises returned by map. Alternatively, use for...of with await if you need sequential execution.

After (parallel)

async function fetchAll(ids) {
  const promises = ids.map(id => getDataForId(id));
  return Promise.all(promises); // waits for all promises to resolve
}

const results = await fetchAll([1,2,3]);
console.log(results); // array of resolved values

After (sequential, if order/ratelimiting matters)

async function fetchAllSequential(ids) {
  const results = [];
  for (const id of ids) {
    results.push(await getDataForId(id)); // sequential await
  }
  return results;
}

Why this works

• map returns an array of Promises; Promise.all converts that into a single Promise that resolves when all inner Promises resolve. Use sequential await when you need ordering or rate-limiting.

How I verified

• Added a mock getDataForId with delays and confirmed fetchAll waits for all results; compared timings between parallel and sequential versions.

Prompt Techniques & Patterns That Work for Me

A few patterns I repeatedly use to get useful, concise results from chat assistants:

• Be explicit about what you want:

  • Bad: "Fix this bug"

  • Better: "This Express handler throws X when Y. Return a minimal fix that preserves the existing API and add a Jest unit test that covers success and the error case."

• Ask for three things in order: the fix, a short explanation, and a test/example.

  • Example prompt:

    I have this Node.js function: [paste]. It throws "X". Provide (1) a minimal code fix limited to this file, (2) a 2-sentence explanation of root cause, and (3) a Jest unit test.

• Use constraints to limit scope:

  • "Keep changes to a single file"

  • "Prefer built-in Node.js APIs"

  • "Explain in 2–3 sentences"

• Request alternatives and trade-offs:

  • "Give me two different fixes and list the trade-offs (performance, complexity, compatibility)."

• Ask for verification steps:

  • "Give the minimal steps I can run locally to verify this fix, including example curl commands or test commands."

• When generating tests:

  • Ask for positive, negative, and edge-case tests.

  • Ask for mocks/stubs for external dependencies.

Verification & Testing Checklist

Before merging any AI-assisted change, I run through this checklist:

• Does the change have unit tests that cover expected and error cases?

• Do linters/formatters (ESLint, Prettier) pass?

• Is behavior covered by integration/E2E tests if it touches external systems?

• Any new dependencies? Check license and security implications.

• Any secrets accidentally exposed in the prompt or AI output (API keys, internal URLs)? Remove and rotate if needed.

• Manual review — ensure readability and alignment with project architecture.

• Run CI pipeline locally where possible.

Automate as much of this as you can (pre-commit hooks, CI checks).

Caveats & Ethics

AI is helpful, but it has limitations:

• Hallucinations: models can invent APIs, return incorrect code, or make up package names. Always verify.

• Licensing: code examples may be influenced by training data. Be cautious when copying complex implementations verbatim into proprietary codebases.

• Secrets: never paste API keys, private tokens, or sensitive internal code into public chat services. Prefer local/private models for sensitive work.

• Overreliance: AI speeds up many tasks but don't skip core practices like code review, tests, and security audits.

• Attribution: attribute examples where appropriate, and confirm license compatibility of any third-party snippets.

Practical Setup Tips

• Configure your editor and team with shared settings for linters and formatters so AI-generated code matches style.

• Create prompt templates in a snippet manager for common tasks (bug fixes, tests, refactors).

• Use small, focused prompts and iterate — give the AI the minimal reproducible example.

• Keep a changelog of AI-assisted fixes for future reference and learning.

Conclusion

AI hasn't replaced my judgment, but it has removed the busywork that ate minutes and hours every day. The result: more time to think about architecture, design, and the tricky parts of problems that actually require human insight.

If you want to apply this to your workflow:

• Start small: use AI for tests and tiny bug fixes first.

• Build a short prompt template for your team.

• Add verification steps in CI to guard against hallucinations and regressions.

This article covers the use of bcrypt to securely store user passwords in MongoDB through Node.js. It explains the project structure, setting up express web server, configuring MongoDB, creating an auth controller, and testing with postman. In conclusion, bcrypt is a secure algorithm for password hashing and is recommended for safe storage of sensitive data.

In this article, we'll use the npm library bcrypt to store user passwords in MongoDB. To demonstrate this, let's take an example of the sign-in process for a user. To keep things simple, there are just two fields: username and password.

In the end, we will construct the project structure in this way.

First, we will install the npm libraries.

npm install express mongodb bcryptjs body-parser cors --save

You can use mongoose instead of mongodb.

Creating an Express web server

Let's create a new file called server.js in the root folder, which will be our main file.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

const corsOptions = {
    origin: 'http://localhost:8081'
}
app.use(cors(corsOptions));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function (req, res, next) {
    res.header(
        "Access-Control-Allow-Headers",
        "x-access-token, Origin, Content-Type, Accept"
    );
    next();
});
app.get('/', (req, res) => {
    res.json({ message: 'Welcome to Mongodb auth' });
});
require('./app/routes/auth.routes')(app);
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server running at ${PORT}`);
});

We are using body-parser to create the req.body object by parsing the request.

Setting up MongoDB

We will create a file called db.config.js within the config folder of the app, which will store all database-related configurations.

module.exports = {
    HOST:"localhost",
    PORT: 27017,
    DB: "bcryptdemo",
    USER: "users"
}

Let's now create a file called mongodb.js in the root folder for connecting.

const dbConfig = require('./config/db.config');
const MongoClient = require('mongodb').MongoClient;
let conn;

exports.getConnection = async () => {
    if (conn) {
        return conn;
    }

    try {
        conn = await MongoClient.connect(`mongodb://\({dbConfig.HOST}:\){dbConfig.PORT}/`, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        });
        if (conn) console.log('Mongodb connected successfully!');
        return conn;
    }
    catch (err) {
        console.log('Error in mongodb connection', err);
        process.exit();
    }
}

Creating an Auth Controller

We have a signup and signin function to demonstrate hashing.

Signup

const bcrypt = require('bcryptjs');
const dbConfig = require('../config/db.config');
const conn = require('../mongodb');

exports.signup = async (req, res) => {
    const client = await conn.getConnection();
    const db = client.db(`${dbConfig.DB}`);
    bcrypt.hash(req.body.password, 12)
        .then(function (hashedPass) {
            const user = {
                username: req.body.username,
                password: hashedPass
            }
            db.collection(`${dbConfig.USER}`).insertOne(user);
            res.send({ message: 'Registered user successfully!' });
        }).catch((err) => {
            return res.status(500).send({ message: err });
        });
}

The bcrypt hash function takes two parameters - the password to be hashed, and the salt or saltrounds. In this case, it's set to 12, which means the bcrypt module will go through 2^12 iterations in order to hash the data.

The result of hash function looks like \([algorithm]\)[cost]$[salt][hash]

\(2a\)12$A1iqBUXMMVEUAIimj9FJmeGLDwaLOz6g2i13WKVHEg3rteKLEYvLy
 |  |  |                     |
 |  |  |                     hash-value = GLDwaLOz6g2i13WKVHEg3rteKLEYvLy
 |  |  |
 |  |  salt = A1iqBUXMMVEUAIimj9FJme (base64 encoded to 22 characters)
 |  |
 |  cost-factor => 12 = 2^12 rounds
 |
 hash-algorithm identifier => 2a = BCrypt

Signin

To sign in, we need to find the hashed password from the database and use the compare function to compare the plaintext password with the hashed one.

exports.signin = async (req, res) => {
    const client = await conn.getConnection();
    const db = client.db(`${dbConfig.DB}`);
    db.collection(`${dbConfig.USER}`).find({ username: req.body.username }).toArray((err, user) => {
        if (err) return res.status(500).send({ message: err });
        if (!user[0]) return res.status(404).send({ message: 'User not found' });
        bcrypt.compare(req.body.password, user[0].password).then((isPassValid)=>{
            if (!isPassValid) return res.status(401).send({ message: 'Invalid Password!' });
            res.send({
                id: user[0]._id,
                username: user[0].username,
                message: 'Signed in successfully!'
            });
        }).catch((err) => {
            return res.status(500).send({ message: err });
        });
    });
}

compare function returns a boolean.

We can add middleware to prevent duplicate entries when signing up.

app.post("/auth/signup", [verifySignUp.checkDuplicateUsername], AuthController.signup);

In verifySignUp.js, let's add the below code snippet:

checkDuplicateUsername = async (req, res, next) => {
    const client = await conn.getConnection();
    const db = client.db(`${dbConfig.DB}`);
    db.collection(`${dbConfig.USER}`).find({ username: req.body.username }).toArray((err, user) => {
        if (err) return res.status(500).send({ message: err });
        if (user[0]) {
            return res.status(400).send({ message: `Username ${user[0].username} already exists` });
        }
        next();
    });
};

Testing

We will use Postman to test the signup and sign-in process and check MongoDB to see if the password was saved.

For some negative test cases:

Let's try adding the same user!

Entering an incorrect password.

We can view the password in its hashed form in MongoDB.

In conclusion, bcrypt is a secure algorithm for password hashing and is recommended for safe storage of sensitive data. It is more secure than other methods of password hashing due to its use of a cost factor, which makes it more difficult for attackers to brute force the password. Additionally, it is an easy to use library that is available in Node.js and can be easily integrated into web applications.

Installing pm2

npm install pm2 -g

Start and name a process

pm2 start app.js --name myApp

Start and auto-restart on file change

pm2 start app.js --watch 

List apps

pm2 list /*Shows all the processes*/
pm2 prettylist /*Prints process list in beautified JSON*/
pm2 describe 0 /*Display all information about a specific process*/
pm2 monit /*Monitor all processes*/

Logs

pm2 logs  /*Display all processes logs*/
pm2 flush  /*Empty all log files*/
pm2 reloadLogs /*Reload all logs*/

Misc

pm2 status /*Shows process status(online, stopped, errored), restart count, uptime, cpu and memory usage*/
pm2 stop id|name /*Stop a process*/
pm2 restart id|name /*Restart a process*/
pm2 delete id|name /*Delete a process*/
pm2 stop all /*Stop all processes*/
pm2 restart all /*Restarts all processes*/
pm2 delete all /*Removes all processes from pm2 list*/

Some extras

ENV_VARIABLE_NAME="VALUE" pm2 restart <pid> --update-env /*This will add an environment variable to your process*/
pm2 env <pid> /*This will print all the process.env variables*/

The code is available on GitHub. I suggest forking the codebase so that it will be easier for you to follow along.

The repos are:

• Serverless code
• React code

Also, there is a quick and dirty demo for you, if you are interested.

Let's get started.

Content

• What is serverless?
• Prerequisites
• Dependencies and setup
• Project Structure
• Some Coding
• Deployment
• Configuring with React

What is serverless?

Traditionally, when we deploy our web application to a server, we are charged for keeping the server up, even if, there is no request. We are responsible for its uptime and maintenance. Serverless is an architecture where you build and run applications and services without worrying about infrastructure management. So, now we can quickly build, configure and deploy resources with a few commands. We only pay for the compute time we consume. There is no charge when our code is not running.

We have many serverless framework providers such as:

• Google's Cloud Functions
• Amazon's AWS Lambda functions
• Microsoft's Azure functions,
• Cloudflare

Here we are going to use AWS Lambda functions as our cloud service provider. Lambda is an event-driven, serverless computing platform that executes your code in response to various events.

Now let's check out some tools needed to build our todo app:

Prerequisites

1. AWS account
2. MongoDB Atlas -- to host our todos
3. Node.js 8.10 or above
4. ReactJS

Dependencies and setup

First of all, create a node.js project with the following dependencies

and install serverless module:

npm install -g serverless

serverless is an application framework to build and deploy functions to different serverless platforms such as AWS Lambda, Google cloud functions etc.

Next, create an IAM(Identity and Access Management) user in your AWS console by following this guide. Note the Access key ID and Secret access key. We'll need them for configuring our app.

serverless config credentials --provider aws --key  your-Access-key-ID --secret your-secret-access-key

Next, we'll need a database to store our todo items. For the sake of simplicity, let's use MongoDB Atlas, a hosted MongoDB service to host our MongoDB instance. Create your database cluster using this tutorial.

Project Structure

After setting up the above dependencies, we are going to write some code for our serverless app. Here is how the directory structure looks like:

Some Coding

• Let's write server.js where we'll put only the logic for running our lambda function with the serverless-http module.

const serverless = require('serverless-http')
const app = require('./lib/app')
module.exports.run = serverless(app)

Here, you can see we are packing our Express app into a lambda function run. serverless-http module allows us to 'wrap' our API for serverless usage.

• To connect to our Atlas cluster, we need to pass our connection string as

'mongodb://<username>:<password>@<cluster>:27017,<host>.mongodb.net:27017,<host N>.mongodb.net:27017/<database>?ssl=true&replicaSet=<replicasetName>&authSource=admin&retryWrites=true'

The code looks like following:

mongoose.connect(config.mongoConnectionString, { useNewUrlParser: true });

Here, we are using mongoose node module to connect to the remote MongoDB cluster.

• Adding routes in index.js

const express = require('express');
const router = express.Router();
const todos = require('../controllers/todos.controller');

router.use('/todos', todos);
module.exports = router;

• Writing some logic

We have a schema Todo in lib/models which has a single property called title.

const mongoose = require('mongoose');
const TodoSchema = new mongoose.Schema({
  title: String
});
module.exports = mongoose.model('Todo', TodoSchema);

Moving further, we are going to write some CRUD operations in todo.controller:

const express = require('express')
const router = express.Router()
const Todo = require('../models/todo')

router
    .get('/', async (req, res) => {
        const todos = await Todo.find().select('title').sort({"_id": -1});
        res.set("Access-Control-Allow-Origin", "*");
        res.json(todos);
    });

router
    .post('/', async (req, res) => {
        if (!req.body) {
            return res.status(403).end();
        }
        const todo = await Todo.create(req.body)
        res.set("Access-Control-Allow-Origin", "*");
        res.json(todo);
    });

router
    .put('/:id', async (req, res) => {
        if (!req.body) {
            return res.status(403).end();
        }
        const todo = await Todo.findByIdAndUpdate(req.params.id, {
            $set: req.body
        }, {
            $upsert: true,
            new: true
        })
        res.set("Access-Control-Allow-Origin", "*");
        res.json(todo);
    });

router
    .delete('/:id', async (req, res) => {
        const todo = await Todo.deleteOne({
            _id: req.params.id
        })
        res.set("Access-Control-Allow-Origin", "*");
        res.json(todo);
    });

module.exports = router;

In the above snippet we implemented basic CRUD operations using mongoose.

• Configuring serverless.yml with all the function and general settings.

service: todo-app-api

provider:
  name: aws
  runtime: nodejs8.10
  stage: dev
  region: us-east-1

functions:
  app:
    handler: server.run
    events:
      - http:
          path: api/todos
          method: any
          cors: 
            allowCredentials: true
            origin: '*'
            headers: 
              - accept
              - Content-Type
              - Origin
              - User-Agent
              - Referer
      - http:
          path: api/todos/{id}
          method: any
          request:
            parameters:
              paths:
                id: true
          cors: 
            allowCredentials: true
            origin: '*'
            headers: 
              - accept
              - Content-Type
              - Origin
              - User-Agent
              - Referer

As mentioned above, our lambda function is run. We are informing this to serverless through handler. Our path for GET and POST i.e for read and create operations is api/todos. Similarly, for update and delete we have PUT and DELETE requests and the API is api/todos/{id}.

Deployment

Now to deploy, we just need to run serverless deploy and it's done! If your deployment is successful, you will see a .serverless folder getting created in your project.

You can now use a tool like Postman to test your endpoints.

Creating a front-end using React

In this section, we'll build a simple UI using React that interacts with our serverless APIs. The UI will be similar to this:

and functionality will be something like this:

https://www.youtube.com/watch?v=stafuvXwPdU

**Note: ** We are not going to write any CSS here. You can style your component as you want.

• We'll use create-react-app to create the basic structure. Just run create-react-app todoapp to get started. Make sure you have installed create-react-app npm module globally before issuing the above command. The project structure will look something like this:

• First, let's add an input form to our main component App.js:

<div>
    <input
          placeholder="Enter Task"
          ref={c => {
                this.inputElement = c;
          }}
          value={this.state.currentItem.text}
          onChange={this.handleInput}
      />
      <button onClick={this.addItem}>Add Task</button>
 </div>

Our function addItem is called when we want to add a new todo item. This is done by hitting our serverless endpoint using fetch:

addItem = async (e) => {
    e.preventDefault();
    const newItem = this.state.currentItem;
    if (newItem.title !== '') {
      const response = await fetch('https://b3tcfb1z62.execute-api.us-east-1.amazonaws.com/dev/api/todos', {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json',
            'User-Agent': 'todo',
          },
          body: JSON.stringify({title: newItem.title}),
          method:'POST'
      });
      const json = await response.json();
      const items = this.state.items;
      items.unshift(json);
      this.setState({ items: items });
      this.inputElement.value = '';
    }
  }

• To show the todo items, we need to create a component TodoItems and add it to App.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';

class TodoItems extends Component {
  constructor() {
    super()
    this.state = {
      listItems: []
    }
  }
    
  render() {
    const todoEntries = this.props.entries
    const listitems = todoEntries.map((item) => {
      return (
        <TodoItem key={item._id} item={item} editItem = {this.props.editItem} deleteItem= {this.props.deleteItem}/>
      )
    });

    return <ul>{listitems}</ul>
  }
}

export default TodoItems

To fetch the todo entries, we need to call our GET API in componentDidMount() of App.js and set the result in the items state. We'll pass this as entries prop to TodoItems

  componentDidMount = async () => {
    const response = await fetch('https://b3tcfb1z62.execute-api.us-east-1.amazonaws.com/dev/api/todos', {
      headers: {
				accept: 'application/json',
				'Content-Type': 'application/json',
				'User-Agent': 'todo',
			},
      method:'GET'
    });
    const json = await response.json();
    this.setState({items : json});
  }

Here is how we use TodoItems component inside render function of App.js:

<TodoItems entries={this.state.items} editItem={this.editItem} deleteItem={this.deleteItem}/>

In TodoItems component, we will iterate over the entries and return a TodoItem component which shows each item's title.

    const todoEntries = this.props.entries
    const listitems = todoEntries.map((item) => {
      return (
        <TodoItem key={item._id} item={item} editItem = {this.props.editItem} deleteItem= {this.props.deleteItem}/>
      )
    });

    return <ul>{listitems}</ul>

Here is how our TodoItem component looks like:

import React, { Component } from 'react';

class TodoItem extends Component {
  constructor() {
    super()
    this.state = {
      editMode: false
    }
  }
  toggleEdit = e => {
    e.preventDefault();
    this.setState({ editMode: !this.state.editMode });
  }

  callUpdateAPI = (e,title) => {
      e.preventDefault();
      if (e.keyCode === 13) {
        this.props.editItem(title,this.props.item._id);
        this.toggleEdit(e);
      }
  }
  render() {
      const item = this.props.item;
      return (
        <li key={item._id}>
          {!this.state.editMode ? <span>{item.title}</span>
          :
            <input
                defaultValue={item.title}
                ref={c => {
                    this.inputElement = c;
                }}
                onKeyUp = {e => { this.callUpdateAPI(e,e.target.value) }}
            />
      }{!this.state.editMode ?<button type='submit' onClick={this.toggleEdit}>Edit Task</button>: <button type='submit' onClick={e => { this.props.editItem(this.inputElement.value,this.props.item._id); this.toggleEdit(e); }}>Update</button>} <button type='submit' onClick={() => this.props.deleteItem(item._id)}>Delete Task</button>
        </li>
      )
    }
}

export default TodoItem

• Now coming to update part, when we click on Edit Task our todo item will be converted into an input tag with an update button. To achieve the above, we are using a state variable called editMode.

On clicking the Update button, we will call our PUT API,

callUpdateAPI = (e,title) => {
      e.preventDefault();
      if (e.keyCode === 13) {
        this.props.editItem(title,this.props.item._id);
        this.toggleEdit(e);
      }
  }

Here is how the fetch call for update looks like:

editItem = async (title,id) => {
    const response = await fetch(`https://b3tcfb1z62.execute-api.us-east-1.amazonaws.com/dev/api/todos/${id}`, {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json',
            'User-Agent': 'todo',
          },
          body: JSON.stringify({ title: title }),
          method:'PUT'
        });
    const json = await response.json();
    this.state.items.forEach(item => {
      if(item._id === json._id) {
        item.title = json.title;
      }
    });
    this.setState({ items: this.state.items});
  }

• Similarly, to delete a task we will add a button Delete Task in our TodoItem.js.

<button type='submit' onClick={() => this.props.deleteItem(item._id)}>Delete Task</button>

and delete it using DELETE API call

deleteItem = async(id) => {
    const filteredItems = this.state.items.filter(item => {
      return item._id !== id
    })
    const response = await fetch(`https://b3tcfb1z62.execute-api.us-east-1.amazonaws.com/dev/api/todos/${id}`, {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json',
            'User-Agent': 'todo',
          },
          method:'DELETE'
        })
    const json = await response.json();
    if (json.deletedCount === 1) {
      this.setState({ items: filteredItems});
    }
  }

The entire code is available in two separate GitHub repos:

• Serverless code
• React code

Feel free to check them out and play around with the code. Here is a demo of the app in case you want to check out a live version. I hope you enjoyed reading this. Let me know what you think in comments below!

So, here is a list of such Node.js interview questions with their answers that will help you crack basic JS interviews.

What is Node.js?

Node.js is a platform built on Chrome's V8 engine to run JavaScript on the server. It is a single-threaded event-based platform.

Why is Node.js Single-threaded?

Node.js applications use "Single Threaded Event Loop Model" architecture to handle multiple concurrent clients. Node.js works on Event Loop which is single threaded and uses multiple threads internally to execute asynchronous code. Node.js is non-blocking which means that all functions ( callbacks ) are delegated to the event loop and they are ( or can be ) executed by different threads ( worker threads ). So, if you make a synchronous call which is CPU intensive it will block the thread. Hence we go for an asynchronous call which has better performance and scalability when they are single-threaded over multi-threaded, making Node.js Single-threaded.

Why do people use Node.js?

Node.js allows you to build the entire website only in one programming language i.e JavaScript. Node.js can be used to build different types of applications such as regular web applications, real-time apps, REST API servers etc. It is preferred for the following reasons:

• Fast: Node.js library is very fast in code execution.
• Scalable: It is highly scalable because of its event mechanism which helps the server to respond in a non-blocking way.
• Full Stack JS: People who are comfortable with JavaScript get to use the same language across the whole stack (which means more code reuse)

What are some of the most popular modules of Node.js?

Some libraries/frameworks that are commonly used by Node.js developers:

• express
• fs
• moment
• lodash
• mongoose
• async
• isomorphic-fetch
• passport
• cookie-parser
• jest/morgan

and there are many more. You should ideally keep your own list of favorite npm modules.

Explain callback in Node.js.

A callback is simply a function you pass into another function so that it can be called at a later time.

function cbExample(val, callback){
    if(val == 1){
        callback(true);
    }else{
        callback(false);
    }
}

cbExample(0, 
//the anonymous function below defines the functionality of the callback
function (bool) {
    if (bool) {
        //do something
    } else {
        //do something
    }
});

What is error-first callback?

It is a pattern where a callback function takes an Error object as first parameter and result object as second.

Example:

fs.readFile(path, function(err, data) {  
  if (err) {
    // handle the error
    return console.log(err)
  }
  // use the data object
  console.log(data)
})

What is callback hell and how can you avoid it?

Callback hell is heavily nested callbacks which make the code unreadable and difficult to maintain.

const verifyUser = function(username, password, callback){
   db.verifyUser(username, password, (error, userInfo) => {
       if (error) {
           callback(error)
       }else{
           db.getRoles(username, (error, roles) => {
               if (error){
                   callback(error)
               }else {
                   db.logAccess(username, (error) => {
                       if (error){
                           callback(error);
                       }else{
                           callback(null, userInfo, roles);
                       }
                   })
               }
           })
       }
   })
};

We can avoid callback hell by :

• modularization: breaking callbacks into small independent functions

const verifyUser = function(username, password) {
   db.verifyUser(username, password)
       .then(userInfo => db.getRoles(userInfo))
       .then(rolesInfo => db.logAccess(rolesInfo))
       .then(finalResult => {
           //do whatever the 'callback' would do
       })
       .catch((err) => {
           //do whatever the error handler needs
       });
};

const getRoles = new function (userInfo) {
   return new Promise((resolve, reject) => {
       db.connect()
           .then((connection) => connection.query('get roles sql'))
           .then((result) => resolve(result))
           .catch(reject)
   });
};

• using async module: async provides straight-forward, powerful functions for working with asynchronous JavaScript
• using generators with Promises

'use strict';

const fs = require('fs');

function readFile(file, encoding) {
  return new Promise((resolve) => {
    fs.readFile(file, encoding, (err, data) => {
      if (err) throw err;

      resolve(data);
    })
  });
}

function* processFile(inputFilePath, encoding) {
  try {
    const text = yield readFile(inputFilePath, encoding);
    const processedText = text.toUpperCase();
    return processedText;
  } catch (e) {
    console.error(String(e));
  }
}

function execute(generator, yeildValue) {
  const next = generator.next(yeildValue);

  if (!next.done) {
    next.value.then(result => execute(generator, result))
              .catch(err => generator.throw(err));
  } else {
    console.log(next.value);
  }
}

execute(processFile('./input1.txt', 'utf-8'));

• use async/await

const verifyUser = async function(username, password){
   try {
       const userInfo = await db.verifyUser(username, password);
       const rolesInfo = await db.getRoles(userInfo);
       const logStatus = await db.logAccess(userInfo);
       return userInfo;
   }catch (e){
       //handle errors as needed
   }
};

What is a Promise?

A promise is an object whose value is not available yet but will be available in future. This returned value can be a resolved value or a reason depicting why it is rejected. It will be in one of 3 possible states:

• Fulfilled: resolve() was called
• Rejected: reject() was called
• Pending: not yet fulfilled or rejected

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() { //simulate an async call
    resolve('foo');
  }, 300);
});

promise.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

What are modules and what is the purpose of module.exports in Node.js?

Modules are a reusable block of code whose existence does not impact other code in any way. It encapsulates related code into a single unit of code. Modules are important for maintainability, reusability, and namespacing of code.

module.exports = {

    sayHelloInEnglish: function() {
        return "Hello";
    }
    sayHelloInHindi: function() {
        return "Namaste";
    }
}

Here module.exports exposes two functions to the outer world. We can import and use these functions.

var greetings = require("./greeting.js");
greetings.sayHelloInHindi(); //Namaste

Explain in brief the difference among setInterval(), setTimeout(), setImmediate() and process.nextTick().

setInterval(): As the name suggests it can be used to execute a block of code multiple times in fixed intervals.

const intervalObj = setInterval(() => {
  console.log('Execute multiple times');
}, 500);

clearInterval(intervalObj);

setTimeout(): It can be used to schedule code execution after a designated amount of milliseconds.

const timeoutObj = setTimeout(() => {
  console.log('timeout beyond time');
}, 1500);

clearTimeout(timeoutObj);

setImmediate(): It is used to execute code at the end of the current event loop cycle.

const immediateObj = setImmediate(() => {
  console.log('immediately executing immediate');
});

clearImmediate(immediateObj);

process.nextTick(): It can be used to schedule a callback function to be invoked in the next iteration of the event loop.

It's worth noting that process.nextTick() fires more immediately than setImmediate().

function cb(){
  console.log('Processed in next iteration');
}
process.nextTick(cb);
console.log('Processed in the first iteration');
//Processed in the first iteration'
//Processed in next iteration

What are some different ways to do ajax calls in JavaScript?

In the interviews, interviewers often ask to write different types of ajax calls in JavaScript. Refer to the article to know more about different ways to do Ajax calls in JavaScript.

What are some interesting ES6 features?

Default Parameters:

In ES5, the default value is specified inside a function like this:

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'https://hashnode.com'
    ...
}

In ES6, we can put the default values in the function params, right next to the passing arguments:

var link = function(height = 50, color = 'red', url = 'http://hashnode.com') {
  ...
}

Template Literals:

Template literals or interpolation in other languages is a way to output variables in the string.

In ES5,

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

In ES6, we can use ticked string as following:

var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

Multi-line Strings:

In ES5,

var books = 'THE MURDER OF ROGER ACKROYD,\n\t'
                          + 'MURDER ON THE ORIENT EXPRESS,\n\t'
                            + 'AND THEN THERE WERE NONE,\n\t'
                              + 'A MURDER IS ANNOUNCED,\n\t'
                                + 'FIVE LITTLE PIGS\n\t'

In ES6, backticks come to rescue,

var books = `THE MURDER OF ROGER ACKROYD,
MURDER ON THE ORIENT EXPRESS,
AND THEN THERE WERE NONE,
A MURDER IS ANNOUNCED,
FIVE LITTLE PIGS`

Arrow Functions:

Arrow functions provide a more concise syntax for writing function expressions. Arrow functions do not have this. If this is accessed, it is taken from the outside (outer scope).

// (param1, param2, paramN) => expression

// ES5
var addES5 = function(x, y) {
  return x + y;
};

// ES6
const addES6 = (x, y) => { return x + y };

//No parameter

//ES5
var functionES5 = function someFunc() {
    console.log("Hello");
};

//ES6
var functionES6 = () => { console.log("Hello"); };
functionES6(); // Hello

Let and Const

In ES5, variables are declared using var (global scope). In ES6, block scoped let and const is used to declare variables.

Let's see the difference between var, let and const.

function differenceVar(){
  var a =10;
  console.log(a);  // output 10
  if (true) {
   var a=20;
   console.log(a); // output 20 //overriding an existing value
  }
  console.log(a);  // output 20
}

//The let statement declares a local variable in a block scope.
function differenceLet(){
  let a =10;
  console.log(a);  // output 10
  if (true) {
   let a=20;
   console.log(a); // output 20
  }
  console.log(a);  // output 10
}

In case of const the value can be assigned to a variable only once and they can't be changed.

function differenceConst(){
  const MY_VARIABLE = 10; //declaration and initialization are to be done at the same time
  console.log(MY_VARIABLE);  // output 10 
}

Variables declared with let and const remain uninitialized at the beginning of execution whilst variables declared with var are initialized with a value of undefined.

What is the difference between undefined and not defined or Reference Error?

In JavaScript, an undeclared variable is assigned the value undefined at execution and is also of type undefined.

console.log(typeof a); // undefined

A ReferenceError is thrown when we try to access a previously undeclared variable.

console.log(a); // ReferenceError: variable is not defined

What do you mean by hoisting?

Functions and variables that are declared anywhere in the code are moved to the top of the scope due to hoisting.

Note: Only declarations are moved, assignments are left in place.

We should make a habit to declare and initialize JavaScript variables before use. Using strict mode in JavaScript ES5 can help expose undeclared variables.

function foo() {
    var a; // a is hoisted at the top of foo()
    console.log(a); // undefined
    a=2;
}
foo();

foo(); // not Reference Error but TypeError
var foo = function bar() {
....
}

Here foo() is attempting to invoke the undefined value, which is TypeError. Function declarations are hoisted but function expressions are not.

What do you mean by closure?

Closure happens when a function is able to access a variable defined in its enclosing (outer) scope.

The closure has access to variables in three scopes:

• Variables declared in their own scope
• Variables declared in a parent function scope
• Variables declared in the global namespace

function adder(num) { 
    var amount = 5;
    return function () {
        return amount + num;
    }
}

var sum = adder (3);
var output = sum();
console.log(output); //8

What is the difference between .call() and .apply()?

Both call and apply help execute functions. The difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

var min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

What is undefined x 1 in JavaScript?

undefined × 1 is just way of displaying an array's uninitialized index in Chrome's developer console.

var fruits = ["Strawberry", "Banana", "Mango", "Kiwi", "Orange"]
delete fruits[3];

Output of fruits will be: ["Strawberry", "Banana", "Mango", undefined × 1, "Orange"]

How do you add an element to the beginning of an array? How do you add one at the end?

var myArray = ['a', 'b', 'c', 'd'];
myArray.push('end');
myArray.unshift('start');
console.log(myArray); // ["start", "a", "b", "c", "d", "end"]

In ES6, we can use spread operator

myArray = ['start', ...myArray, 'end'];

What are self-executing functions or IIFE?

IIFE (Immediately Invoked Function Expressions) functions are executed right after its definition. It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

The second part creates the immediately executing function expression () through which the JavaScript engine will directly interpret the function.

Example:

(function(){
    console.log('In IIFE');
})();

Note : The function becomes a function expression which is immediately executed. The variable within the expression cannot be accessed from outside it.

I hope this helps people who are preparing for JavaScript and Node.js interviews. If I have left any basic questions, feel free to comment. I am considering making a part two if this gets traction. :)

My new year resolution is to write something every day, even if it's something basic. Out of curiosity, I have been revisiting various ways to make API calls in JS in 2019. In this post, I'll summarize my findings and list various options to make AJAX calls. To keep it simple, let's focus on what they are, their syntaxes and some pros and cons of each option.

XHR

Ajax is the traditional way to make an asynchronous HTTP request. The XMLHttpRequest object can be used to exchange data with a web server.

Syntax

GET Request

const Http = new XMLHttpRequest();
const url='http://example.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}

POST Request

var xhr = new XMLHttpRequest();
xhr.open("POST", '/user', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("name=Ipseeta&id=1");

Fetch API

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

Syntax

The fetch method takes a mandatory request path as argument and returns a Promise.

GET Request

fetch('https://www.example.com', {
        method: 'get'
    })
    .then(response => response.json())
    .then(jsonData => console.log(jsonData))
    .catch(err => {
            //error block
        }

POST Request

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

Pros

1. It’s flexible and easy to use
2. Callback hell is avoided by Promises
3. Supported by all modern browsers
4. Follows request-response approach

Cons

1. Doesn't send cookie by default
2. CORS is disabled by default

jQuery

jQuery is a fast, small, and feature-rich JavaScript library.

Syntax

You’ll need to include the jQuery library in your project to get started.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

GET Request

$.ajax({
    url: '/users',
    type: "GET",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.log(`Error ${error}`);
    }
});

POST Request

$.ajax({
    url: '/users',
    type: "POST",
    data: {
        name: "Ipseeta",
        id: 1
    },
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.log(`Error ${error}`);
    }
});

Pros

The good thing about jQuery is that you will find tons of support and documentation.

Cons

If you are already using a state management library like React, Vue etc, then using jQuery just for ajax is overkill.

Axios

Promise based HTTP client for the browser and node.js It lets you make HTTP requests from both the browser and the server.

Syntax

You can install through npm install axios and import import axios from 'axios' or add through cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET Request

axios.get('/user', {
    params: {
      ID: 1
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

POST Request

axios.post('/user', {
    name: 'Ipseeta',
    id: 1
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Pros

1. It works on both Nodejs and Browser
2. Supports Promise API
3. Can set or cancel a request
4. Can set a response timeout
5. Client-side support for protecting against XSRF
6. Can intercept requests or responses before they are carried out.
7. Automatic transforms for JSON data

Request

Request is designed to be the simplest way possible to make HTTP calls. It supports HTTPS and follows redirects by default.

Syntax

var request = require('request');
request('http://www.google.com', function (error, response, body) {
  console.log('error:', error);
  console.log('statusCode:', response && response.statusCode); 
  console.log('body:', body);
});

Pros

API is easy to use

Cons

It is not Promise-based. If you'd like request to return a Promise instead, you can use an alternative interface wrapper for request.

SuperAgent

SuperAgent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs.

Syntax

SuperAgent has a request object that accepts methods such as GET, POST, PUT, DELETE, and HEAD and then calling .then() (or .end() or await) to send the request.

GET Request

The .query() method accepts objects, which when used with the GET method will form a query-string.

request
   .get('/user')
   .query({ id: 1 })
   .then(res => {

   });

POST Request

request.post('/user')
    .set('Content-Type', 'application/json')
    .send('{"name":"Ipseeta","id":1}')
    .then(callback)
    .catch(errorCallback)

Pros

1. Nice interface for making HTTP requests.
2. Works in both Browser and Node.
3. Multiple functions chaining to send requests.
4. Supports abortion of requests

Qwest

Qwest is a simple ajax library based on promises and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob and FormData.

Syntax

You can use qwest using npm install qwest or via cdnjs https://cdnjs.com/libraries/qwest

GET request

qwest.get('example.com')
     .then(function(xhr, response) {

     });

POST request

qwest.post('/user', {
        name: 'Ipseeta',
        id: 1
     })
     .then(function(xhr, response) {
     })
     .catch(function(e, xhr, response) {
     });

Pros

It supports request cancellation

var request = qwest.get('example.com')
                   .then(function(xhr, response) {
                       // Won't be called
                   })
                   .catch(function(xhr, response) {
                       // Won't be called either
                   });

request.abort();

Cons

XHR2 is not available on every browser. So if needed, you need to verify XHR version

if(qwest.xhr2) {
    // Actions for XHR2
}
else {
    // Actions for XHR1
}

So, we looked at the most popular JS libraries for AJAX calls in this post. Did I miss anything? Feel free to comment below! 🙌

RESTful web services are built to work best on the Web. Representational State Transfer (REST) is an architectural style that specifies constraints, such as the uniform interface, that if applied to a web service induce desirable properties, such as performance, scalability, and modifiability, that enable services to work best on the Web. In the REST architectural style, data and functionality are considered resources and are accessed using Uniform Resource Identifiers (URIs), typically links on the Web.

In simple words, REST stands for Representational State Transfer and it’s an architecture style for creating network based applications. JAX-RS is the Java API specification and Jersey is its reference implementation.

Our goal is to create a RESTful service that can retrieve product and price details by ID. Our app (myRetail RESTful service) should be able to do the following:-

• Responds to an HTTP GET request at /products/{id} and delivers product data as JSON (where {id} will be a number.

• Reads pricing information from a NoSQL data store and combines it with the product id and name from the HTTP request into a single response.

• Accepts an HTTP PUT request at the same path (/products/{id} ), containing a JSON request body similar to the GET response, and updates the product’s price in the data store.

• Delete a product price entry from db.

Example response: {"id":13860428,"name":"The Big Lebowski (Blu-ray) (Widescreen)","current_price":{"value": 13.49,"currency_code":"USD"}}

Okay, lets start with this simple CRUD Restful apis.

Step 1: We will create a dynamic web project in Eclipse.

Step 2: Add web.xml through Generate Deployment Descriptor Stub in Java EE tools.

Step 3: Convert it to a Maven Project.

Step 4: In pom.xml add the following dependencies:-

<!-- https://mvnrepository.com/artifact/asm/asm -->
 <dependency>
    <groupId>asm</groupId>
    <artifactId>asm</artifactId>
    <version>3.3.1</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-bundle -->
 <dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-bundle</artifactId>
    <version>1.19</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/org.json/json -->
 <dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20160810</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-server -->
 <dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-server</artifactId>
    <version>1.19.3</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-core -->
 <dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-core</artifactId>
    <version>1.19.3</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/org.mongodb/mongo-java-driver -->
 <dependency>
    <groupId>org.mongodb</groupId>
    <artifactId>mongo-java-driver</artifactId>
    <version>3.4.2</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-json -->
 <dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-json</artifactId>
    <version>1.19</version>
 </dependency>

Step 5: Update web.xml with the following mapping:-

<servlet>
    <servlet-name>Jersey Web Application</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Jersey Web Application</servlet-name>
    <url-pattern>/myRetail/*</url-pattern>
</servlet-mapping>

Step 6: Creating our POJO classes with @XmlRootElement to define the root element for an XML tree.

@XmlRootElement
public class Product{
    private int id;
    private String name;
    private Price current_price;
...
}

Step 7: We will create a class named MyRetailService with /products as its @Path as per the requirements. Read this for guidelines on resource URI naming conventions. This class will have all our api calls.

a) To create pricing information in Product, we will do a POST request consuming a json/xml of Price type.

@POST @Path("/create")
@Consumes({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Response createPriceData(Price price){
    String success = dao.createPriceData(price);
    return Response.status(201).entity(success).build(); 
}

b) To retrieve all the details of products in myRetail app, we will go for a GET call.

@GET
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Response findAll() {
    List<Product> product = dao.createDummyProducts();
    GenericEntity<List<Product>> entity = new GenericEntity<List<Product>>(product) {};
    return Response.ok(entity).build(); 
}

This is the case when we need to return parameterized types from a JAXRS resource method in the Response . Due to type erasure, it requires special handling in Jersey runtime to determine the generic type that is required to select a suitable MessageBodyWriter. GenericEntity can be used to represent a response entity of a generic type.

c) To update a price value, we will go for PUT

@PUT @Path("{id}")
@Consumes({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML})
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Response updatePrice(@PathParam("id") String id,Product product) {
    Product updatedProduct = dao.update(Integer.parseInt(id),product);
    return Response.status(200).entity(updatedProduct).build(); 
}

d) Delete a price entry from product.

@DELETE @Path("{id}")
public Response delete(@PathParam("id") String id) {
    String response = dao.delete(Integer.parseInt(id));
    return Response.status(202).entity(response).build();
}

We have handled the exceptions by throwing GenericException. However, we still need to create a Handler object to convert this exception into an actual JSON response so we get a nice friendly error message, which is implemented through GenericExceptionMapper.

@Provider
public class GenericExceptionMapper implements ExceptionMapper<Throwable>{
public Response toResponse(Throwable ex){
    if(ex instanceof ProductSearchException){
        return Response.status(Status.NOT_FOUND)
        .entity(new ErrorProps("404", ex.getMessage()))
        .build();
    }else{
        return Response.status(Status.INTERNAL_SERVER_ERROR)
        .entity(new ErrorProps("Some error code, 500 or somthing", ex.getMessage()))
        .build();
    }
  }
}

Step 8: To test, we can use postman or jersey.api.client

private static final String webServiceURI = "http://localhost:8080/myRetail-0.0.1-SNAPSHOT/myRetail/products/";
public static void main(String[] args) {
    Client client = Client.create();
    WebResource webResource = client.resource(webServiceURI);
    createDummyPriceTest(webResource);
}
private static void createDummyPriceTest(WebResource webResource){
    Price price = new Price();
    price.set_id(16483589);
    price.setCurrency_code("USD");
    price.setValue(13.49);
    //or String input = "{\"currency_code\":\"USD\",\"_id\":\"16483589\",\"value\":\"13.49\"}";
    ClientResponse response = webResource.path("create").type(MediaType.APPLICATION_JSON).accept(MediaType.APPLICATION_JSON).post(ClientResponse.class,price);
    if (response.getStatus() != 201) {
        throw new RuntimeException("Failed : HTTP error code : " + response.getStatus());
    }
    String output = response.getEntity(String.class);
    System.out.println(output);
}

Summary of JAX-RS Annotations used

This is a very simple example of a RESTful service that uses JAX-RS annotations. You can check the repo for the DAO layer implementation with the usage of MongoClient. Find the same repo in Kotlin.

What is an anonymous function?

Anonymous function is a function definition that is not bound to an identifier. These are a form of nested function, in allowing access to variables in the scope of the containing function (non-local functions). This means anonymous functions need to be implemented using closures. Simply, lambda is an anonymous function which can be passed around in a concise way.

A lambda expression represents an anonymous function. It comprises of a set of parameters, a lambda operator (->) and a function body.

Return Type

1. When there is a single statement, the return type of the anonymous function is the same as that of the body expression.
2. When there is more than one statement enclosed in curly brackets then the return type of the anonymous function is the same as the type of the value returned within the code block, or void if nothing is returned.

Examples

• Zero parameter

() -> System.out.println("No Params");

• One Parameter

(param) -> System.out.println("One parameter: " + param);

or without parenthesis;

param -> param (Identity function example)

• Multiple parameters

(param1, param2) -> param1 + param2;

• Parameter Types

(int i, String name) -> System.out.println("id:" + i + " name:" + name);

• Code block

(param1, param2) -> { return param1 + param2; }

• Nested lambda expression :Two nested expressions with the first one as closure

(id, defaultPrice) -> {
  Optional<Product> product = productList.stream().filter(p -> p.getId() == id).findFirst();
  return product.map(p -> p.getPrice()).orElse(defaultPrice);
}

• As objects : the lambda expression is assigned to variable, and finally it is invoked by invoking the interface method it implements

public interface MyComparator {
    public boolean compare(int a1, int a2);
}

MyComparator myComparator = (a1, a2) -> return a1 > a2;
boolean result = myComparator.compare(2, 5);

Simply we can relate,

Arrays.sort(personArray, new Comparator(<Person>(){
    @Override
    public int compare(Person p1, Person p2){
        return p1.getAge() - p2.getAge();
    }
});

becomes ->

Arrays.sort(personArray, (p1,p2) -> p1.getAge() - p2.getAge());

Lambda expressions as functional interfaces

Interfaces that contain only one abstract method in addition to one or more default or static methods.

public class Calculator {
    interface IntegerMath {
        int operation(int a, int b);

        default IntegerMath swap() {
          return (a, b) -> operation(b, a);
        }
    }
    private static int apply(int a, int b, IntegerMath op) {
        return op.operation(a, b);
    }

    public static void main(String... args) {
        IntegerMath addition = (a, b) -> a + b;
        IntegerMath subtraction = (a, b) -> a - b;
        System.out.println("40 + 2 = " + apply(40, 2, addition));
        System.out.println("20 - 10 = " + apply(20, 10, subtraction));
        System.out.println("10 - 20 = " + apply(20, 10, subtraction.swap()));    
    }

Here IntegerMath is a functional interface with default method swap. Lambda expressions that implement IntegerMath are passed to the apply() method to be executed.