DEV Community: ayka.code

Build a Serverless RAG Engine for with Gemini chatbot and deploy it for $0

ayka.code — Fri, 13 Feb 2026 12:30:01 +0000

Master modern AI architecture with Node.js, Gemini 2.5, and Cloudflare R2

👉 Get the Source Code & Template Here

👉 Read the full tutorial here

Introduction: The Problem with "Toy" RAG Apps

Most RAG tutorials skip the hard parts that actually matter in production:

No security model: Users can access each other's private data.
Naive file handling: Large uploads crash your Node.js server.
Expensive infra: AWS egress fees and managed vector DBs drain your wallet.
Blocking operations: Processing files freezes your entire API.

We are going to solve all of these using a production-proven architecture.

The $0 Tech Stack

Every piece of this stack has a generous free tier:

Cloudflare R2: S3-compatible storage with zero egress fees.
Gemini 2.5 Flash: High-performance LLM with a free tier of 15 requests/minute.
PostgreSQL + pgvector: Battle-tested database with native vector support.
BullMQ: Redis-backed job queue to handle heavy processing in the background.

Step 1: Understanding the Architecture

We follow a 4-phase workflow designed for scale:

Direct-to-Cloud Uploads: Browser uploads files directly to R2 using presigned URLs. Your server never touches the raw bytes, preventing memory crashes.
Asynchronous Ingestion: A BullMQ worker handles the "heavy lifting"—downloading, chunking, and embedding—without blocking your API.
Hybrid Retrieval: We use PostgreSQL row-level security so users only search their own data.
Contextual Generation: Gemini generates answers with smart citations (temporary links to the source files).

Step 2: Zero-Cost Storage with Cloudflare R2

Traditional uploads stream data through your server. If 10 users upload 50MB files simultaneously, your server spikes by 500MB and likely crashes.

The Solution: The Reservation Pattern
We issue a time-limited Presigned URL. The browser sends the file directly to Cloudflare.

// Backend: Generate the permission
const { signedUrl, fileKey, fileId } = await uploadService.generateSignedUrl(
  fileName,
  fileType,
  fileSize,
  isPublic,
  req.user 
);
res.send({ signedUrl, fileKey, fileId });

Step 3: Contextual Query Rewriting

If a user asks "Who is the CEO of Tesla?" followed by "What about SpaceX?", a naive vector search for "What about SpaceX?" will fail because it lacks context.

We use Gemma 3-12B to rewrite queries in ~200ms:

// User: "What about SpaceX?"
// Gemma Rewrites: "Who is the CEO of SpaceX?"

This ensures your vector search actually finds the right documents.

Step 4: Hybrid Search with Row-Level Security

Multi-tenancy is the biggest hurdle in RAG. You can't let User A see User B's documents. Instead of filtering in JavaScript (which is slow and buggy), we do it in SQL:

SELECT d.content, d.metadata, f."originalName",
       (d.embedding <=> ${vectorQuery}::vector) as distance
FROM "Document" d
LEFT JOIN "File" f ON d."fileId" = f.id
WHERE (d."userId" = ${userId} OR f."isPublic" = true)
ORDER BY distance ASC LIMIT 5;

This enforces security at the database layer. No accidental data leaks.

Step 5: Visual RAG - Understanding Images

Traditional RAG is text-only. If you upload a receipt, most systems fail. We use Gemini Vision to describe the image in detail, then embed that description.

Input	Gemini Vision Output
Photo of coffee receipt	"Starbucks receipt, Jan 15, 2026. Grande Latte $5.45. Paid with Visa..."

Now, when you search "How much did I spend at Starbucks?", the system finds the image because of its semantic description.

Conclusion: Build vs Buy

Commercial RAG solutions can cost $1,900+/year. By building this architecture, you save that money while gaining skills in:

Distributed systems (BullMQ)
Vector Database optimization (pgvector)
Cloud Security (Presigned URLs)

🚀 Want the Full Source Code?

If you want to save 40+ hours of setup, I’ve packaged this entire production-ready architecture into the Node.js Enterprise Launchpad.

Standard Price: $20
Launch Special: $4 (80% OFF)

It includes the RAG pipeline, Auth, RBAC, Socket.io, and Docker configurations.

👉 Get the Source Code & Template Here

Build Your First REST API with Node.js and Express (in 15 Minutes)

ayka.code — Tue, 10 Jun 2025 09:58:58 +0000

Learning backend development might seem overwhelming at first — databases, APIs, routing, deployment — where do you even start?

Well, here's some good news: You can build your first backend API using Node.js and Express in just 15 minutes. And by the end of this post, you'll have your own working API ready to go!

Let’s jump right in 👇

🚀 What We're Building

A simple Books API with 3 routes:

GET /books — List all books
POST /books — Add a new book
GET /books/:id — Get a book by ID

🛠️ Step 1: Setup Your Project

mkdir books-api
cd books-api
npm init -y
npm install express

Create a file named index.js.

🧠 Step 2: Create a Simple Express Server

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // for parsing JSON

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Run the server:

node index.js

📚 Step 3: Add Book Routes

let books = [
  { id: 1, title: 'Clean Code' },
  { id: 2, title: 'The Pragmatic Programmer' },
];

// GET all books
app.get('/books', (req, res) => {
  res.json(books);
});

// GET a book by ID
app.get('/books/:id', (req, res) => {
  const book = books.find(b => b.id === parseInt(req.params.id));
  if (!book) return res.status(404).send('Book not found');
  res.json(book);
});

// POST a new book
app.post('/books', (req, res) => {
  const book = {
    id: books.length + 1,
    title: req.body.title,
  };
  books.push(book);
  res.status(201).json(book);
});

Now you can:

Use Postman or Insomnia to send GET, POST requests

Try it out at http://localhost:3000/books

🌱 What You Just Learned

How to set up an Express server
Basic routing in Node.js
Handling JSON input
Working with dynamic route parameters

This is the first step toward building real-world backend applications.

🎓 Want to Go Deeper?

This was just a glimpse into what you can build with Node.js. If you enjoyed this, I've created a full all-in-one backend development course that covers:

✅ Node.js, Express, TypeScript
✅ MongoDB, PostgreSQL, Mongoose
✅ REST & GraphQL APIs
✅ Authentication, Stripe, Docker
✅ GitHub Actions, CI/CD, and more

🎁 Grab the course with two options:

💸 Support the course (only $9.99):
https://www.udemy.com/course/express-typescript-nodejs-mongodb-more-the-real-path/?couponCode=93AC6D647A1F2AD85580

🙌 Get it free (for early learners):
https://www.udemy.com/course/express-typescript-nodejs-mongodb-more-the-real-path/?couponCode=FA39975BFDE32309993C

Learn Node.js Before React.js: Mastering Node.js as Your First Step Towards Full-Stack Domination

ayka.code — Sun, 02 Jul 2023 12:27:02 +0000

Are you an aspiring JavaScript developer looking to expand your skills and embark on a journey towards becoming a full-stack developer? It's time to make a smart choice that sets a solid foundation for your programming career. In this blog post, we'll explore why starting with Node.js is the best way to kickstart your full-stack development journey. By the end, you'll understand the immense potential Node.js holds and why investing in my comprehensive Node.js course on Udemy is the perfect next step for you.

Why Node.js before React?

While React is undoubtedly a powerful front-end library, mastering Node.js first opens up a world of opportunities that will enhance your overall development prowess. Here are three compelling reasons to prioritize Node.js before diving into React:

1. Full-Stack Synchronization: Node.js enables you to build both the server-side and client-side components of your application using a single language, JavaScript. This synchronicity results in smoother collaboration between the front-end and back-end teams, facilitating faster development cycles and efficient code sharing.

2. Unleashing JavaScript Everywhere: By focusing on Node.js, you solidify your understanding of JavaScript and unlock its full potential on the server-side. This empowers you to build scalable and high-performance web applications, handle real-time communication with ease, and even dive into areas like machine learning and Internet of Things (IoT).

3. Broader Career Opportunities: Node.js has seen a rapid rise in popularity, with numerous enterprises and startups adopting it as their go-to backend solution. Mastering Node.js not only equips you with in-demand skills but also broadens your job prospects and increases your earning potential as a full-stack developer.

Introducing: Nodejs, Express, Typescript, MongoDb & more: The real path Course,

Ready to take the leap and become a proficient Node.js developer? My course, "Nodejs, Express, Typescript, MongoDb & more: The real path," on Udemy is designed with your learning journey in mind. Here's what you can expect:

- Comprehensive Curriculum: Learn the ins and outs of Node.js, including advanced concepts and best practices. Dive into TypeScript, a statically typed superset of JavaScript, to enhance your code quality and development experience.

- Building a Shopping API: Construct a robust shopping API from scratch, incorporating essential features like user authentication, product listing, cart management, and seamless payment integration using Stripe.

- Real-World Projects: Develop practical skills by working on hands-on projects that mimic real-life scenarios. Gain confidence in building scalable APIs and deploying them to production environments.

- Engaging Learning Experience: Benefit from clear explanations, code samples, and quizzes to solidify your understanding of Node.js and TypeScript concepts. The course also provides ongoing support and a vibrant community to assist you along your learning journey.

Choosing the right path for your full-stack development career is crucial. By starting with Node.js, you'll acquire a versatile skill set that empowers you to create powerful applications across the entire tech stack. Take the next step today by enrolling in my "Nodejs, Express, Typescript, MongoDb & more: The real path" course on Udemy. Unleash your potential, become a sought-after developer, and embark on an exciting journey towards full-stack domination.

Don't wait—invest in your future now!

The Ultimate GraphQL and Apollo Server Course with Express and TypeScript

ayka.code — Sun, 23 Apr 2023 07:39:04 +0000

Are you ready to take your API development skills to the next level? Look no further than *The Ultimate GraphQL and Apollo Server Course with Express and TypeScript! (9.99$ for limited time!)
*
In this comprehensive course, we'll start with the basics of GraphQL and Apollo Server and gradually move on to more advanced topics. You'll learn how to use GraphQL with Apollo and advanced tools and technologies to build powerful APIs.

We'll cover key concepts like queries, mutations, and schemas, as well as advanced topics like SocketIo, JWT, and database migration with TypeORM. You'll also learn how to work with TypeORM and use Postgres with Docker, giving you the tools you need to build scalable and efficient APIs.

The teaching is clear and the content is comprehensive, making this course the ultimate resource for developers looking to master GraphQL and Apollo Server with TypeScript and Express. The skills you'll learn are in high demand in the job market, making this course a valuable investment in your career.

By the end of the course, you'll have the skills and knowledge to build your own GraphQL API using Apollo Server and Express with TypeScript, as well as advanced features like SocketIo and database migration with TypeORM. You'll also be able to confidently work with GraphQL and Apollo Server in your own projects.

Enroll now in The Ultimate GraphQL and Apollo Server Course with Express and TypeScript and take your API development skills to the next level!

Do You Really Need to Learn Every Git Command to be a Senior or Mid-Senior Web Developer?

ayka.code — Sat, 14 Jan 2023 19:20:10 +0000

Read on my personal blog: bracketOrbits

As a web developer, it's important to have a solid understanding of version control and Git is one of the most widely used tools for this purpose. But the question is, do you really need to know every single Git command to be a senior or mid-senior web developer? The short answer is no.

While it's certainly beneficial to have a deep understanding of all the different commands and options that Git offers, it's not a requirement for being a successful web developer. In fact, many experienced developers only use a small subset of the available commands on a regular basis.

One of the great things about the field of web development is that it is constantly evolving and changing. This means that as you progress in your career and take on new projects and challenges, you will naturally learn the Git commands that are most relevant to your work. For example, if you work on a large project with many contributors, you will likely need to know how to resolve merge conflicts. On the other hand, if you work on a smaller project with fewer collaborators, you may not need to use this command as often.

The most important thing is to have a good understanding of the basic Git workflow: how to commit, push, pull, and branch. Once you have a solid grasp of these concepts, you can start to explore more advanced features like merging and rebasing.

Here are some of the most commonly used Git commands that are important for each developer to know:

git init: Initializes a new Git repository.

git clone: Creates a copy of a remote repository on your local machine.

git add: Adds changes to the staging area, preparing them to be committed.

git commit: Records changes to the repository with a commit message.

git status: Shows the status of the current repository, including changes that have been made but not yet committed.

git log: Shows a history of all commits made in the repository.

git diff: Shows the differences between the working tree and the last committed version.

git branch: Shows a list of all branches in the repository, with the current branch indicated by an asterisk.

git checkout: Allows you to switch between branches or restore specific file versions.

git merge: Merges changes from one branch into another.

git pull: Fetches the latest changes from a remote repository and merges them with the local branch.

git push: Pushes the local changes to a remote repository.

Another important aspect of Git is understanding how to use it in conjunction with other tools, such as Github or Gitlab. These platforms provide a convenient way to collaborate with other developers and track issues and pull requests. Knowing how to navigate these platforms and use their features is a valuable skill for any web developer.

In summary, while it's great to have a deep understanding of all the different Git commands, it's not a requirement for being a senior or mid-senior web developer. The most important thing is to have a good understanding of the basic Git workflow and how to use it in conjunction with other tools. And as you progress in your career and take on new projects, you will naturally learn the Git commands that are most relevant to your work.

Maximizing the Power of Child Processes in Node.js: Real-world Examples

ayka.code — Fri, 13 Jan 2023 15:12:44 +0000

Node.js is a popular open-source JavaScript runtime that allows developers to build scalable and high-performance web applications. One of the most powerful features of Node.js is its ability to handle child processes. Child processes allow you to spawn new processes, run shell commands, execute scripts, or even fork multiple processes to handle a heavy workload. In this blog post, we will discuss how to use child processes in Node.js and provide real-world examples of how they can be used to improve the performance and scalability of your application.

Using the Child Process module

The built-in 'child_process' module in Node.js provides several methods for spawning and managing child processes. The most commonly used methods are 'exec', 'spawn', and 'fork'.

'exec' method: This method allows you to...Read more:

Maximizing the Power of Child Processes in Node.js: Real-world Examples| BracketOrbits [👨‍💻]

Learn about the power of child processes in Node.js and how they can be used to improve performance and scalability. Discover real-world exam....

bracketorbits.vercel.app

Mastering React in One Month: A Step-by-Step Guide

ayka.code — Wed, 11 Jan 2023 11:23:41 +0000

Mastering React in One Month: A Step-by-Step Guide| BracketOrbits [👨‍💻]

Learn how to master React in just one month with this step-by-step guide. Dedicate 6 hours a day to studying and practicing, and follow our schedule and r....

bracketorbits.vercel.app

Scaling Node.js Applications: Strategies and Techniques

ayka.code — Sun, 08 Jan 2023 22:41:34 +0000

Check on my personal blog: BraketOrbits

As web applications grow and the number of users increases, it becomes important to ensure that the application can scale effectively to handle the increased load. If an application is unable to scale, it can lead to slow response times and a poor user experience.

One popular backend technology that is often used to build scalable web applications is Node.js. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows developers to build scalable network applications quickly and efficiently.

There are several strategies and techniques that can be used to scale Node.js applications. Some of the most effective strategies include:

Vertical scaling: This involves increasing the resources available to a single server, such as adding more CPU or memory. This can be an effective way to scale an application, but it can become expensive as the application grows.

Horizontal scaling: This involves adding more servers to the application, allowing it to handle more traffic and users. This can be an effective way to scale an application, but it requires careful planning to ensure that the application is able to distribute traffic and data effectively across multiple servers.

Caching: Caching involves storing frequently accessed data in a cache so that it can be quickly retrieved when needed. This can help to reduce the load on the database and improve the performance of the application.

Load balancing: This involves distributing traffic across multiple servers to ensure that no single server is overwhelmed. This can be achieved through the use of a load balancer, which routes traffic to the appropriate server based on factors such as server availability and workload.

Asynchronous programming: Node.js uses an event-driven, non-blocking I/O model, which makes it well-suited for scalable applications. By writing code that makes use of asynchronous programming techniques, it is possible to build highly scalable applications that can handle a large number of concurrent requests.

By implementing these strategies and techniques, it is possible to build scalable Node.js applications that can handle a large number of users and a high volume of traffic. This can help to ensure that your application delivers a fast and reliable experience to your users.

Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions

ayka.code — Fri, 06 Jan 2023 21:41:04 +0000

For clear an better UI you can read this blog post on my personal blog: Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions

If you have a blog or website, you may want to create open graph (OG) images to use when sharing your content on social media platforms. OG images are displayed when someone shares your content on social media, and they help to give context to the shared content and make it more visually appealing.

In this tutorial, we'll look at how to create dynamic OG images in a Next.js application using a serverless function. We'll use the @vercel/og package to create the OG image within the serverlessfunction.

Before we get started, you'll need to have a Next.js application set up. If you don't already have one, you can create a new Next.js project by running the following command:

npx create-next-app

Install the @vercel/og package:

npm install @vercel/og

Now that we have the necessary packages installed, we can create the serverless function that will generate the OG image. To do this, create a og.js in the api folder of your Next.js project and import ImageResponse class at the top of the file:

import { ImageResponse } from '@vercel/og';

Next, we'll set the runtime for the serverless function to "edge" in the config object:

export const config = {
  runtime: 'edge',
};

This will ensure that the function is executed on the edge network, which is required for creating OG images.
Now, let's define the main handler function for the serverless function:

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);
    // code for generating the OG image goes here
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

This function takes a request object as an argument and returns an OG image response. If an error occurs while generating the image, it returns a response with a status of 500 and an error message.

Now let's start adding the code for generating the OG image. First, we'll parse the search parameters from the request URL:

const { searchParams } = new URL(req.url);

Then, we'll check if the title search parameter is present in the query string:

const hasTitle = searchParams.has('title');

If the title parameter is present, we slice it to a maximum of 100 characters and assign it to the title variable, If the title parameter is not present, we set the title variable to the default value of "DevToMars":

const title = hasTitle
  ? searchParams.get('title')?.slice(0, 100)
  : 'DevToMars';

Next, we retrieve the mainTopics search parameter from the query string and split it into an array using the split method:

const mainTopics = searchParams.get('mainTopics').split(",")

This allows us to pass multiple main topics as a comma-separated list in the query string.

Now that we have the title and mainTopics variables, we can use them to render the OG image. To do this, we use the ImageResponse class from the @vercel/og package, which allows us to create an OG image from a React component.

We pass a simple div element with some inline styles applied to it to the ImageResponse class as the React component . The styles specify the layout and appearance of the OG image:

return new ImageResponse(
      (
        <div
          style={{
            backgroundColor: 'black',
            backgroundSize: '150px 150px',
            height: '100%',
            width: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            flexWrap: 'nowrap',
            padding: "65px",
          }}
        >
   {/* The Body of the Image */}
</div>

As you can see, we are displaying the div as a flex because Next.js requires this for every element with more than one child. You can use Tailwindcss for styling, but I don't recommend it because it is not stable and it is not fully supported for generating images with Next.js.

Our image will contain a title that fills up 75% of the image width with some padding and a margin-top of 30px, a logo with a brand name, and a list of main topic tags. :

...
<div style={{
                fontSize: 60,
                fontStyle: 'normal',
                letterSpacing: '-0.025em',
                color: 'white',
                marginTop: 30,
                padding: '0 100px',
                lineHeight: 1.4,
                whiteSpace: 'pre-wrap',
                height: "75%",
                fontWeight: 700,
                textTransform: "capitalize"
            }} className="w-10 capitalize">
                {title}
            </div>
            <div style={{ display: "flex", flexDirection: "row", gap: "10px", alignItems: "center" }} >
                <div style={{ width: "70px", height: "70px", display: "flex" }}>
                    <img 
                        src="https://media.graphassets.com/gncWvSEqRFaBSUPZGoTP"
                        width={70}
                        height={70}
                        alt="devtomars blog"
                    />
                </div>

                <div style={{
                    backgroundClip: "text",
                    color: "transparent",
                    backgroundImage: "linear-gradient(to right, #ec4899, #8b5cf6)",
                    fontWeight: 700,
                    fontSize: 30
                }} >DevToMars</div>


                <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end", justifyItems: "center",width: "75%" }}>
                    {
                        mainTopics.map((topic, i) => (
                            <div key={i} style={{ color: "black",  fontSize: 20, padding: "5px", margin: "3px", backgroundColor: "white", borderRadius: "8px" }}>{topic}</div>
                        ))
                    }
                </div>
            </div>
...

Finally, we pass an option object to create an OG image with a width of 1200 pixels and a height of 630 pixels:

return new ImageResponse(
  // JSX element here
  {
    width: 1200,
    height: 630,
  },
);

And that's it! You now have a serverless function that can generate dynamic OG images for your Next.js application. To use the function, simply make a request to the function's URL with the desired title and mainTopics query parameters. For example:

https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react

This will generate an OG image with the title "My Blog Post" and the main topics "nodejs", "javascript", and "react".
You can then use the generated OG image in your social media sharing tags, like so:

<meta property="og:image" content="https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react" />

That's it! You now know how to create dynamic OG images for your Next.js application using a serverless function. I hope this tutorial was helpful!

Create a Post Editor Similar to Twitter with a Responsive Images Grid with tailwindcss

ayka.code — Thu, 05 Jan 2023 21:02:17 +0000

Check my original blog post for better UI: Create a Post Editor Similar to Twitter with a Responsive Images Grid with tailwindcss

In this tutorial, we will create a React component for a social media post editor that allows the user to write posts and display a grid of selected images while preserving their aspect ratio. The component also allows the user to remove images from the grid.

We're going to use Tailwindcss and nextjs in this tutorial so make sure to install and configure your project following Tailwind css with Nextjs guide.

To get started, let's import the necessary dependencies and create a functional component called PostEditorImages:

import React, { useEffect, useState } from 'react';

const PostEditorImages = ({ images, removeImage }) => {
  // component code goes here
}

Our component will accept two props:

images: an array of images of type File, representing the images to be displayed in the grid.
removeImage: a function that removes an image from the images array and updates the state of the parent component.

Next, let's set up some state variables that we will use to control the layout of the image grid:

const [imagesContainerGrid, setImagesContainerGrid] = useState("grid-cols-2 grid-rows-2");
const [aspectRatios, setAspectRatios] = useState({});

The imagesContainerGrid state variable will hold a string of CSS class names that define a grid template columns of 2 and rows of 2. The aspectRatios state variable will hold an object that maps the index of each image to its aspect ratio.

Now, let's write a useEffect hook that updates the imagesContainerGrid state variable based on the number of images:

useEffect(() => {
  setImagesContainerGrid(images.length >= 3 ? "grid-cols-2 grid-rows-2 h-[300px]" : images.length > 1 ?"grid-cols-2" : "grid-cols-1");
}, [images]);

This useEffect hook will run every time the images prop changes. If there are three or more images, it will set the imagesContainerGrid state variable to a string that specifies a grid with two columns and two rows, with a fixed height of 300px. If there are two or more images, it will set the imagesContainerGrid state variable to a string that specifies a grid with two columns. If there is only one image, it will set the imagesContainerGrid state variable to a string that specifies a grid with one column.

Now, let's write a useEffect hook that calculates the aspect ratio of each image and updates the aspectRatios state variable:

useEffect(() => {
      images.forEach((image, index) => {
        const reader = new FileReader();

        reader.onload = function(event) {
          const data = event.target.result;
          const img = new Image();
          img.src = data;
          img.onload = function() {

            const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
            const numerator = img.width / gcd(img.width, img.height);
            const denominator = img.height / gcd(img.width, img.height);
            setAspectRatios(ratios => ({ ...ratios, [index]: `${numerator}/${denominator}` }));
          };
        };

        reader.readAsDataURL(image);
      });
}, [images]);

This code iterates over an array of images and calculates the aspect ratio of each image. It does this by:

Creating a FileReader object for each image, which allows the code to read the contents of the file as a data URL.
Setting an onload event handler for the FileReader object, which is called when the file has been successfully read. The event handler creates a new image object, sets its src property to the data URL, and sets an onload event handler for the image object.

The onload event handler for the image object calculates the aspect ratio of the image by dividing the width by the greatest common divisor of the width and height, and dividing the height by the greatest common divisor. It then updates the aspectRatios state variable by creating a new object that spreads the existing aspect ratios and adds a new key-value pair for the current image's index and aspect ratio.

Finally, the code calls the readAsDataURL method on the FileReader object, passing in the image file as an argument. This starts the process of reading the file as a data URL.

Finally, let's render the image grid in the component's JSX:

return (
  <div className={` [grid-area:images] grid gap-1 ${imagesContainerGrid}  `}>
    {/* display the selected images */}
    {images.length > 0 &&
      [...images].map((image, index) => (
        <div
          key={image.name}
          className={`relative rounded-md`}
          style={{
            backgroundImage: `url(${URL.createObjectURL(image)})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat',
            width: '100%',
            height: '100%',
            aspectRatio: aspectRatios[index]
          }}
        >
          <button
            className="absolute flex items-center justify-center top-0 text-sm right-0 p-2 text-white rounded-full w-7 h-7 shadow-md bg-black bg-opacity-60 hover:bg-opacity-100"
            onClick={() => removeImage(index)}
          >
            <span>X</span>
          </button>
        </div>
      ))
    }
  </div>
);

This JSX creates a div of grid-area:images that will be defined in the parent component , with the grid class and the imagesContainerGrid class, which defines the layout of the image grid. Inside the div, it maps over the images array and renders a div for each image.
Each image div has a background image set to the image file, and the aspectRatio style property set to the aspect ratio of the image. The div also has a remove button that calls the removeImage function and passes in the index of the image to be removed.

That's it! With these simple steps, we have created a React component that displays a grid of images selected by the user, and allows the user to remove images from the grid.

To use the component, we need to create the SocialMediaTextEditor component which represents the text editor for the the social media app:

const SocialMediaTextEditor = () => {
  const [text, setText] = useState('')// state to store the text;
  const [images, setImages] = useState([]); // state to store the images


  const imageContainerRef = useRef()

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const handleImageChange = (event) => {
    // update the images state by concatenating the selected files with the existing ones
    setImages([...images, ...event.target.files]);
  };

  const removeImage = (index) => {
    // create a new array with the selected image removed
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
  };

  return (...)

Here, we have the handleTextChange to save the latest value of the text field, the handleImageChange and removeImage functions are responsible for adding and removing images from the images list.

Now lets define and style the post editor component using grid template areas with tailwindcss:

return (
   <div
  className={` rounded-lg p-4
    grid gap-y-1
    grid-cols-[40px_5px_1fr]
    grid-rows-[40px_1fr_minmax(0,_max-content)_40px]
    [grid-template-areas:'profile_p1_post'_'empty2_p3_post'_'empty3_p3_images'_'empty4_p4_postActions']`}

>
{/*  */}
  </div>
)

The SocialMediaTextEditor component contains a profile area where you can add a profile image. The post area represents the text field where the user can write their post. The p1, p3, and p4 represent a 5px gap that is defined in the grid-cols-[40px_5px_1fr] layout. The postActions area holds the upload images button and the post button. The emptyX fills in the profile area in all grid rows except the first row, giving the component a similar style to the Twitter post editor.

Now, let's define the JSX code for the profile, text field, and displayed images:

...
⁠   {/* profile area */}
  <div className="[grid-area:profile] rounded-full bg-red-500" />
  {/* post area */}
  <textarea
    className="w-full [resize:none] [grid-area:post] h-fit p-2 rounded-lg text-gray-500  focus:outline-none"
    placeholder="Write your post here..."
    value={text}
    onChange={handleChange}
  />

  {/* display selected images */}
  <PostEditorImages images={images} removeImage={removeImage} />
⁠
...

Now add the jsx code that will allow us to select images from the local system :

...
{/* display selected images */}
 <PostEditorImages images={images} removeImage={removeImage} />

  <div className="[grid-area:postActions] flex flex-row justify-between">
    <div className="justify-self-start flex flex-row gap-2">
      {/* add the input element to select images */}
      <label htmlFor="image-upload" className="cursor-pointer">
        <FaImage size={20} color="rgb(31 41 55)" />
      </label>
      <input
        id="image-upload"
        type="file"
        accept="image/*"
        multiple
        onChange={handleImageChange}
        className="hidden"
      />
    </div>
    <button
        className="bg-red-500 justify-self-end hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
    >
        Post
    </button>
 </div>
⁠
...

You can import the FaImage component from react-icons package.

That's it! You now have a fully functional social media post editor component with a responsive display images grid and a style similar to the Twitter post editor. Of course, you still need to create the logic for uploading the images to the server.

I hope this tutorial was helpful in showing you how to display and manage a grid of images in a React app. Happy coding!

Monolithic vs Microservices Architecture: A Comprehensive Guide

ayka.code — Wed, 04 Jan 2023 19:38:16 +0000

Original article: bracketOrbits

When it comes to building software applications, there are many different approaches that developers can take. One of the most common debates in the world of software development is the choice between monolithic architecture and microservices architecture.

What is Monolithic Architecture?

On the one hand, a monolithic architecture is a traditional approach that involves building a single, self-contained application. All of the different features and functions of the application are bundled together in a single codebase, and the application is deployed as a single unit.

A real-world example of a monolithic application is an e-commerce website that includes a shopping cart, a product catalog, a payment gateway, and a customer management system. All of these features are bundled together in a single codebase and deployed as a single unit.

The main advantage of a monolithic architecture is that it is relatively simple to develop and deploy. Because all of the different features and functions of the application are bundled together, it is easy for developers to make changes and updates. In addition, monolithic applications are usually easy to test, as all of the different parts of the application are contained within a single codebase.

What is Microservices Architecture?

On the other hand, microservices architecture involves building an application as a collection of small, independent services. Each service is responsible for a specific task or function, and the services communicate with each other through APIs.

A real-world example of a microservices architecture is a ride-sharing app like Uber or Lyft. The app is made up of a collection of services, each responsible for a different aspect of the overall system. For example, there might be a separate service for handling user accounts, another for managing ride requests, and another for handling payment processing.

According to the book "Microservice Patterns" by Chris Richardson, one of the key benefits of microservices architecture is that it allows for more flexibility in terms of technology choices. Each service can be built using the technology that is best suited for its specific task, rather than being limited to a technology stack that is chosen for the entire application.

In addition, microservices architecture allows for more scalability. Because each service is independent, it is easy to add new services or modify existing ones without affecting the entire application.

Microservices architecture is particularly well-suited for applications that are being built to be deployed in the cloud, as it allows developers to take advantage of the flexibility and scalability of the cloud.

Building an Endpoint Gateway:

One common challenge with microservices architecture is the need to manage multiple endpoints. To address this, it can be helpful to build an endpoint gateway using a technology like GraphQL Apollo. The endpoint gateway acts as a single point of entry for client applications, and it communicates with the various microservices to retrieve the necessary data.

⁠In this way, the endpoint gateway helps to abstract the complexity of dealing with multiple microservices from the client application.

Microservices and Databases:

In a microservices architecture, it is common for each service to have its own database. This allows each service to be developed and deployed independently, without the need to coordinate with other services.

However, it is important to carefully consider the trade-offs of using multiple databases. One potential drawback is the need to manage and maintain multiple databases, which can be time-consuming and complex.

Streaming Services:

In a microservices architecture, it is often necessary to enable real-time communication between services. To facilitate this, it can be helpful to use a streaming service like Kafka or NATS.

Kafka is a distributed streaming platform that allows microservices to communicate with each other in real time. It is particularly well-suited for applications that require high-throughput, low-latency processing. Kafka works by using a concept called "brokers" to manage the flow of data between producers (the microservices that generate data) and consumers (the microservices that process the data). Each broker is responsible for storing and forwarding messages to the appropriate consumers. In this way, Kafka enables real-time communication and data processing between microservices.

NATS is another popular streaming service that can be used in a microservices architecture. It is designed to be lightweight and easy to use, making it a good choice for applications that require fast, reliable messaging.

Deployment Solutions:

When deploying a microservices application, it is important to have a reliable and efficient solution for managing the deployment process. Some popular options for deploying microservices include:

Containerization: Using containers like Docker allows developers to package an application and its dependencies together, making it easier to deploy and manage.
Cloud-based deployment platforms: Services like Amazon Web Services (AWS) and Google Cloud Platform (GCP) provide a range of tools and services for deploying and scaling microservices applications in the cloud.
Continuous delivery and deployment: Automating the deployment process using tools like Jenkins or CircleCI can help to streamline the process and reduce the risk of errors.

Conclusion:

Monolithic architecture and microservices architecture are two different approaches to building software applications. Monolithic architecture is generally simpler and easier to develop, while microservices architecture is more scalable and flexible.
The choice between these two approaches will depend on the specific needs of the application being built. By using tools like Kafka or NATS streaming services, building an endpoint gateway with GraphQL Apollo, and choosing an appropriate deployment solution, developers can effectively implement a microservices architecture to meet the needs of their application.

Creating Interactive Charts with D3.js

ayka.code — Tue, 03 Jan 2023 16:25:25 +0000

Original post with codepen representation: Creating Interactive Charts with D3.js

D3 (short for Data-Driven Documents) is a JavaScript library that allows you to create interactive data visualizations for the web. With D3, you can create a wide range of visualizations, from simple charts and graphs to complex interactive graphics.

In this tutorial, we'll look at how to create a simple bar chart using D3. We'll start with a basic bar chart, and then add interactivity to it by updating the chart data and labels when the user hovers over a bar.

First, let's set up the HTML for our chart. We'll include a div element with an id of "chart", and a script tag to include the D3 library:

<html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
      body {
        overflow: scroll;
      }
      #chart {
        display: grid;
        grid-template-columns: 1fr;
        height: 100vh;
        width: 100vw;
        justify-items: center;
        align-items: center;
      }
    </style>
</head>
<body>
<div id="chart"></div>
<script>
 <!-- the chart logic goes here! -->
</script>
</body>
</html>

Next, let's define the data for our chart. We'll use an array of objects, with each object representing a bar in the chart. Each object should have a name and value property:

const data = [
  { name: 'Alice', value: 100 },
  { name: 'Bob', value: 75 },
  { name: 'Eve', value: 50 },
  { name: 'Mike', value: 0 }
];

Now, let's set up the SVG element that will contain our chart. We'll specify the width and height of the chart, as well as the padding between the bars. We'll also define a scale for the x-axis, which will determine the width of each bar:

const height = 300;
const barPadding = 10;
const barWidth = 30;

const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)]) //from 0 to the greatest value (100)
  .range([0, width]); // make the width of the svg fit the chart

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const svg = d3
  .select('#chart')
  .append('svg')
  .attr('width', width+35)// add 35 to fit the xAxis
  .attr('height', height+35) // add 35 to fit the yAxis

Now, let's create the bars for our chart. We'll use the rect element to create the bars, and bind our data to them using the data function. We'll also specify the x and y positions of the bars, as well as their width and height:

svg
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * (barWidth + barPadding))
  .attr('y', (d) => yScale(d.value))
  .attr('width', barWidth)
  .attr('height', (d) => height - yScale(d.value))
  .attr('fill', '#2196f3')

Next, let's add interactivity to our chart. We'll add a mouseover and mouseout event to the bars, and update the chart data and labels when the user hovers over a bar.

.on('mouseover', function(d, i) {  // Add a mouseover event to the bars
  d3.select(this).style('opacity', 0.5);// change opacity
  svg
    .selectAll('text')
    .filter((d, j) => d===i)// select the text related to the bar
    .text(i.name);  // Change the text from value to name
})
.on('mouseout', function(d, i) {  // Add a mouseout event to the bars
  // reverse everything
  d3.select(this).style('opacity', 1);
  svg
    .selectAll('text')
    .filter((d, j) => d===i)
    .text(i.value); 
})
.attr('transform', `translate(25, 10)`)

Now, let's add the labels for our chart. We'll use the text element to create the labels, and bind our data to them using the data function. We'll also specify the x and y positions of the labels:

svg
  .selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .text((d) => d.value)
  .attr('x', (d, i) => i * (barWidth + barPadding) + barWidth / 2)
  .attr('y', (d) => yScale(d.value) )
  .attr('text-anchor', 'middle')
  .attr('font-size', '14px')
  .attr('fill', 'black')
  .on('mouseover', function(d, i) {  // Add a mouseover event to the text

    // this: refers to the text. this.parentNode: refers to the whole SVG
    d3.select(this).text(i.name); // change text from value to name

  })
  .on('mouseout', function(d, i) {  // Add a mouseout event to the text
    d3.select(this).text(i.value);
  })
  .attr('transform', `translate(25, 10)`)

Finally, let's add the x and y axes to our chart. We'll use the g element to group the x and y axes, and the call function to render them:

svg
  .append('g')
  .attr('transform', `translate(25, ${height+10})`)
  .call(xAxis);

svg
  .append('g')
  .attr('transform', `translate(25, 10)`)
  .call(yAxis);

And that's it! You now have a fully interactive bar chart using D3.js.

It's worth noting that there are many libraries out there that can create charts and graphs for you, such as Chart.js, Highcharts, and Google Charts. However, D3.js offers a lot of flexibility and customization options, allowing you to create exactly the chart you need for your web application.

I hope this tutorial has helped you get started with creating interactive charts using D3.js. As always, if you have any questions or need further guidance, don't hesitate to ask. Happy coding!