DEV Community: Nico Montiel

Stop Over-Engineering: Just deploy your project 🛸

Nico Montiel — Mon, 23 Feb 2026 14:00:00 +0000

We’ve all been there. You are building a new project, and you want to do everything "the right way." You follow the tutorials, you look at the enterprise-grade architectures, and you end up building a monster before you even have your first 20 users.

I made that mistake...

The "Golden" Architecture (The Mistake)

When I first launched my Laravel e-commerce app, I went all-in on AWS. I wanted reliability, low latency for LATAM, and scalability. My stack looked like this:

Compute: EC2 (t3.large)
Database: AWS RDS (Managed MySQL)
Cache: Redis via Upstash
Storage: S3 for images
Region: São Paulo (sa-east-1) to keep it close to home.

On paper, this was the "correct" way to deploy a professional web app. In reality? It was a financial drain. I was paying for an infrastructure that could handle thousands of concurrent users while I was barely seeing 10 visits a day.

The AWS "best practices" are great for companies with VC funding or massive traffic. For an indie dev or a startup in its early stages, over-engineering is a silent killer.

The Switch: Back to Basics

I decided to stop following the hype and start following my wallet. I moved everything—the App, MySQL, and Redis—to a single server on Hetzner.

Cost: 3x cheaper than the AWS setup.
Performance: Virtually the same for the end-user.
Maintenance: Significantly easier. One server, one config.

Before:

After:

"But it won't scale!"

I can already hear the comments: "What about the single point of failure?" "What about the bottleneck?" "That won't scale to a million users!"

You are right. It won't. And that’s perfectly fine.

Getting from 10 users to 5,000 daily active users is a monumental task. Most projects never reach that point. If you are lucky enough to hit those numbers, that is when you worry about scaling. Until then, your only priority should be staying alive and keeping your costs low.

The Takeaway: Just Ship It (Simply)

Don't let infrastructure be the reason you quit.
Keep it simple.
Deploy on a cheap VPS.
Focus on your code and your users.
Upgrade only when the demand forces you to.

Scaling is a "good" problem to have. Don't try to solve "good" problems before you even have customers.

I’m from a country you’ve probably never heard of: How I got a remote job in the US 🙌🏻

Nico Montiel — Sun, 22 Feb 2026 13:01:00 +0000

Hello! My name is Nico. I'm a software engineer from Paraguay, and since 2021, I've been working fully remote for companies in LATAM, Europe, and the US.

Why am I writing this? If you are from a country like mine and want to start working globally, I want to share some quick advice on how to make it happen!

⚠️ Disclaimer: This is based on my personal experience.
There is no magic formula; read this and draw your own conclusions.

Learn English

First things first: this is your number one priority. If you're a developer and don't know English, stop focusing on React or Rust for a moment. Learn English first. While AI can help you write emails or documentation, real-time communication in meetings is what gets you (and keeps you) the job.

A bit of experience

I recommend having at least a few years of experience before applying to international companies. Why? There is a massive market for junior developers, but companies often prefer local talent for entry-level roles to simplify onboarding and legalities.

Prepare an AI-friendly resume

Keep it simple. Avoid fancy colors or complex layouts. Most companies use ATS (Applicant Tracking Systems) —often powered by AI— to screen resumes. If an algorithm can’t parse your data, a human will never see it. Make it readable for both machines and tired recruiters who have already seen 100 resumes before yours.

Logic over "LeetCode"

Is learning algorithms still necessary? Yes, but with a twist. In the AI era, writing the code is the easy part. However, you need to understand complexity (O(n) notation) and logic to verify if the code the AI generated is efficient or even correct. Practice basic algorithms to sharpen your mental models, not just to memorize solutions.

Master the basics

AI frequently "hallucinates" or provides outdated patterns. To debug effectively, you must know the fundamentals. If you use React, master JavaScript (scopes, event loops, closures). If you use Laravel, master PHP.
Scientific evidence in software engineering suggests that strong foundational knowledge is the best predictor of a developer's ability to adapt to new tools, including AI.

The numbers game

Applying for jobs is a marathon. You might send 100 resumes and get 99 rejections. That’s normal. You only need one "yes" to change your career. It can be frustrating, but the reward of a remote international career is worth the effort.

Thanks for reading! Working remotely changed my life, and I hope it does the same for you 💪🏻

💬 Integrating Twilio into your project: Part 3 - Handling Webhooks and Sending Messages with Laravel and Express

Nico Montiel — Wed, 28 May 2025 17:00:00 +0000

In this part, we'll:

Create a simple service to send WhatsApp messages.
Handle incoming WhatsApp messages by replying automatically.

🐘 1. Twilio Service and Webhook in Laravel

Install Twilio SDK

composer require twilio/sdk

Create a simple Twilio service

Create a file at app/Services/TwilioService.php:

namespace App\Services;

use Twilio\Rest\Client;

class TwilioService
{
    protected $twilio;

    public function __construct()
    {
        $this->twilio = new Client(env('TWILIO_ACCOUNT_SID'), env('TWILIO_AUTH_TOKEN'));
    }

    public function sendMessage($to, $message)
    {
        return $this->twilio->messages->create(
            "whatsapp:" . $to,
            [
                'from' => "whatsapp:" . env('TWILIO_WHATSAPP_FROM'),
                'body' => $message
            ]
        );
    }
}

Set up the webhook route and use the service

Add this to your routes/web.php:

use Illuminate\Http\Request;
use App\Services\TwilioService;

Route::post('/webhook', function (Request $request) {
    $phone = $request->input('From');
    $incomingMessage = $request->input('Body');

    $twilio = new TwilioService();
    $twilio->sendMessage($phone, "Hey 👋, thanks for your message: \"$incomingMessage\"");

    return response()->json(['status' => 'message sent'], 200);
});

✅ Now when Twilio sends a message, your webhook will automatically reply using the service!

🟰 2. Twilio Service and Webhook in Express

Install Twilio SDK

npm install twilio express

Create a simple Twilio service

Create a file twilioService.js:

const { Twilio } = require('twilio');

const client = new Twilio(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);

async function sendMessage(to, message) {
  return client.messages.create({
    from: 'whatsapp:' + process.env.TWILIO_WHATSAPP_FROM,
    to: 'whatsapp:' + to,
    body: message
  });
}

module.exports = { sendMessage };

Set up the webhook route and use the service

In your server.js:

const express = require('express');
const { sendMessage } = require('./twilioService');
const app = express();

app.use(express.urlencoded({ extended: true }));

app.post('/webhook', async (req, res) => {
  const phone = req.body.From;
  const incomingMessage = req.body.Body;

  await sendMessage(phone, `Hey 👋, thanks for your message: "${incomingMessage}"`);

  res.status(200).json({ status: 'message sent' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

✅ Now your Express app will automatically reply when a message is received!

🌎 3. Exposing your Local Server with ngrok

Since Twilio needs a public URL, you'll need to expose your localhost using ngrok.

Install ngrok

npm install -g ngrok

Start ngrok

For Laravel (port 8000):

ngrok http 8000

For Express (port 3000):

ngrok http 3000

ngrok will give you a public URL like:

https://random-ngrok-url.ngrok.io

Set this URL in your Twilio Sandbox Settings under "WHEN A MESSAGE COMES IN", adding /webhook at the end.

Example:

https://random-ngrok-url.ngrok.io/webhook

If you need more details using ngrok, you can check this post

🛠️ What's Next?

Customize replies based on user input.
Validate incoming requests from Twilio.
Move from Sandbox to Production environment.

Good luck! 🚀

📲 Integrating Twilio into your project: Part 2 - Setting up the Sandbox and Handling Webhooks

Nico Montiel — Tue, 27 May 2025 17:00:00 +0000

1. Joining the Twilio Sandbox

Before you can start receiving messages via Webhook, you need to join the WhatsApp Sandbox.

Here's how:

In your Twilio Console, navigate to Messaging > Try it Out > Send a WhatsApp message.
You’ll see a Sandbox section.
Send the provided code (something like "join magic-pizza") to the given WhatsApp number. In my case, it was "join control-type".

✅ Done! Your phone is now linked to the Sandbox.

Important:
Only registered numbers can send and receive messages in the Sandbox. If you change phones or SIMs, you’ll need to register again.

2. Setting up your Webhook URL

Next, you’ll tell Twilio where to send incoming messages.

In the Sandbox settings, set your Webhook URL for incoming messages (e.g., https://yourdomain.com/webhook).

You can do this on the same page, under the "Sandbox Settings" tab.

Make sure your server can accept POST requests from Twilio.

Now, every time that phone number receives a WhatsApp message, Twilio will send the message to your webhook so you can handle the incoming message.

Twilio will send a payload like this:

{
    "SmsMessageSid": "SMc8df133659ef2ca4251da5b1ac5453cdg",
    "NumMedia": "0",
    "ProfileName": "John Smith",
    "MessageType": "text",
    "SmsSid": "SMc8df133659ef2ca4251da5b1ac5453cdg",
    "WaId": "+157822787582693",
    "SmsStatus": "received",
    "Body": "The body of the message that you are receiving",
    "To": "whatsapp:+157822787584443",
    "NumSegments": "1",
    "ReferralNumMedia": "0",
    "MessageSid": "SMc8df133659ef2ca4251da5b1ac5453cdg",
    "AccountSid": "youraccountId",
    "From": "whatsapp:+157822787582693",
    "ApiVersion": "2010-04-01"
}

We'll code a real webhook handler in the next part 😉

📞 Integrating Twilio into your project: Part 1 - Creating your account

Nico Montiel — Mon, 26 May 2025 17:00:00 +0000

1. Creating a Twilio account

First things first: let's create an account at Twilio.
It's super quick:

Go to the website.
Sign up (you can use GitHub, Google, or just a regular email).
Once you're in, verify your real phone number (this is mandatory to test stuff).

Important:
Twilio gives you free trial credits. 🙌 You'll be able to send a few messages for free.

2. Getting your credentials

Inside your Twilio Console, grab your:

Account SID
Auth Token

👉 You’ll find them right on your main dashboard.

First part it's done, super easy!

Add typing to your Javascript code (without Typescript, kinda) ✍🏼

Nico Montiel — Tue, 20 Feb 2024 23:59:21 +0000

Hey there.

I recently started working on a full Javascript project. And after years of working with Typescript, it was strange to work in an environment where no one is telling me "Hey, that property is not there, man".

So I start researching about the better way to do this, without implementing Typescript, because migrating to Typescript is a big job that most of the company doesn't find worthwhile in older projects.

The best way to do this, of course, is with JSDoc. But something I always found awkward about jsdoc is defining the object types in the same file.
So, after a lot of reading, I found a way to combine JSDoc with declaration type files from Typescript. Let me give you an example:

This is your type declaration file, something like types.d.ts



export interface Product {
    sku: string
    name: string
    available: boolean
    price: double
}

This is your javascript file, maybe your index.js



function main() {
    /** @type {import('./types.d.ts').Product} */
    const product = {
        sku: '123',
        name: 'My product',
        available: true,
        price: 12.00
    }
}

So here, if you put a wrong value in the object product, you editor is going to let you know:

That's all, I hope it can be helpful for you 🥳

A good code snippet for your posts 💻

Nico Montiel — Sun, 18 Feb 2024 20:06:50 +0000

I just want to share with you a cool tool that I have been using a lot lately called "Carbon". It allows you to create and share beautiful images of your source code.

This is pretty useful if you want to share some code in Slack, LinkedIn, or even in a post here.
It is super easy to use and super easy to customize.

Of course, you can write your code here and it looks good, right?

// taking kilometers input from the user
const kilometers = prompt("Enter value in kilometers: ")

// conversion factor
const factor = 0.621371

// calculate miles
const miles = kilometers * factor

console.log(`${kilometers} kilometers is equal to ${miles} miles.`);

But c'mon, this looks clean

That's all, I hope it can be helpful for you 🥳

Write better PR's with this template 📄

Nico Montiel — Sun, 18 Feb 2024 03:19:16 +0000

Hey there!

So, recently I started in a new company where the process of reviewing code is not a critical part of the workflow, so I am developing a template for our pull request, in an atempt to improve our codebase and the process of reviewing a new change.

Why did I do this? Was it really necessary?

YES. I think a pull request should be a kind of documentation where you explain the context of your changes to your colleagues, not explaining the code, but explaining the business logic behind this change, why are you doing this work?

So I created a template for this, and set it as the default template every time you want to create a new PR.

Here is the template:

Add the template as default in Github

And if you use Github, putting this as a PR template is super easy, you just need to create a file called pull_request_template.md and put it in the root of your project, or inside the .github folder.

You can see this with more details here: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository

That's all, I hope it can be helpful for you 🥳

Add role and permission on your Laravel project 🔐

Nico Montiel — Tue, 04 Apr 2023 18:39:10 +0000

Introduction

Authorization is a critical aspect of any application, as it ensures that users only have access to the resources they are allowed to see or modify. Laravel provides built-in features to make it easier to implement authorization in your application. In this post, we will learn how to implement authorization in Laravel without using any external libraries.

Why is Authorization important and how Laravel helps with that

Authorization is important for security reasons, as it ensures that users only have access to the parts of the application they are authorized to use. Laravel makes it easy to implement authorization through its built-in middleware, which can be used to protect routes and actions.

Creating the models

To keep this post from being too long, let's assume we've already created the migrations. If not, you can see the fillable property on the models and assume the table shape.
To implement authorization in Laravel without using external libraries, we need to create our own models for permissions, roles, and users. We can create the following models:

Permissions model

This model only contains the relationship with the roles. Here is a small description of the fields:

name: The permission name -> post.create
display_name: A formated name to show on your UI if is required -> Create Posts.
description: A brief description of the permission -> An User can create blog posts.

class Permission extends Model {
    protected $fillable = [
        'name',
        'display_name',
        'description',
    ];

    // Relationship with roles.
    public function roles()
    {
        return $this->belongsToMany(Role::class);
    }
}

Role model

To create the relationship between the permissions and the roles, we need to create a pivot table called permission_role that has the permission_id and role_id fields.
Here we can see the relationship between the permissions and the users too.
The fields has the same meaning of the permissions table.

name: The role name -> reviewer
display_name: The formated name -> Post Reviewer
description: A brief description -> An User that can review a post and approve it.

class Role extends Model {
    protected $fillable = [
        'name',
        'display_name',
        'description',
    ];

    // Relationship with permissions
    public function permissions()
    {
        return $this->belongsToMany(Permission::class);
    }

    // Relationship with users
    public function users()
    {
        return $this->hasMany(User::class);
    }
}

User Model

Here we have the two escentials methods for our permissions system.

role(): Is our relationship with the Role model.
hasPermissionTo(): Here we receive as a parameter the permission name, and will return true if the user have the permissions, and false if don't have it.

class User extends Authenticatable {
    protected $fillable = [
        'first_name',
        'last_name',
        'role_id',
        'password',
    ];

    // Relationship with role
    public function role()
    {
        return $this->belongsTo(Role::class);
    }

    // Check if the user have the permission
    public function hasPermissionTo($permissionName)
    {
        return $this->role->permissions->contains('name', $permissionName);
    }
}

Where implement this?

Great, so we have our authorization logic, but now what?
There are a few different ways you can implement this authorization logic in your Laravel application. Most you can use two different approaches for this:

Using Policies

class PostPolicy
{
    /**
     * Determine if an user can create a post.
     */
    public function update(User $user): bool
    {
        return $user->hasPermissionTo('post.create')
    }
}

Using a Middleware

class CreatePostMiddleware {
    public function handle(Request $request, Closure $next, $permission)
    {
        if (!auth()->user()->hasPermissionTo($permission)) {
            abort(403, 'Unauthorized action.');
        }

        return $next($request);
    }
}

Summary

Implementing authorization without using external libraries is not difficult, and it gives you more control over how your application handles authorization. By creating your own models and relationships, and implementing the hasPermissionTo method, you can easily implement authorization in your Laravel application.

That's all, I hope it can be helpful for you 🥳

Migrating components from Option API to Composition API on Vue 🛠️

Nico Montiel — Sun, 19 Feb 2023 20:45:08 +0000

Today I will show you how to migrate your components from the "old" Option API to the new Composition API on Vue 3.

First of all, what is the composition api?

Good question! The official documentation says

Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options.
Composition API is a built-in feature of Vue 3 and Vue 2.7. For older Vue 2 versions, use the officially maintained @vue/composition-api plugin. In Vue 3, it is also primarily used together with the <script setup> syntax in Single-File Components.

Okay, great, but why should I use the Composition API?

The primary benefit of the Composition API is that it enables clean, efficient logic reuse in the form of composable functions. It solves all the drawbacks of mixins, the primary logic reuse mechanism for the Options API.
Also, it has more adeventajes like:

More Flexible Code Organization.
Better Type Inference.
Smaller Production Bundle and Less Overhead.
Better use with Typescript.

Okay, so how are we going to do this?

I prepared this Vuejs component and we will migrate it piece by piece.

1. Components.
With the Composition API, you don't need to declare the components you want to use, just import them and they will be available in your template.

2. Props.
You can define the props in much the same way as before. You need to declare a variable (usually called props) and use the defineProps method. This method is automatically available inside the script setup tag.

const props = defineProps({
    userId: {
        type: String,
        required: true,
    },
    cartId: {
        type: String,
        required: true       
    },
})

3. Event emitters.
As with props, you need to define a constant and use a method available within the script setup tag. This is called defineEmits.

const emit = defineEmits(['checkout'])

4. Data
With the data, we can now see much cleaner and more readable javascript. For the data on your component, you have two cases: data with reactivity, or a simple constant.

For the data with reactivity, you need to import ref and put the initial value of the variable inside the method.

import { ref } from 'vue'

const items = ref([]) // This is the initial value, we are going to fill it later.

And for the constant variable, as easy as javascript.

const maybeAConstantObject = {
    someKey: 'someValue',
    anotherKey: 'anotherValue'
}

5. Methods.
Methods, like variables, are now just simple javascript functions, lets show some examples:

 function addItem(item) {
    items.value.push(item);
}

function proceedToCheckout() {
    // Here you can also see how emit an event.
    emit('checkout', items.value);
}

6. Computed properties
Okay, this is a bit more tricky, but still not complicated. To do this, we need to import the computed method and inside it, we put a callback that returns the value of the property.

import { computed } from 'vue'

// So now this variable will return the sum of all the items in the cart, and it will be executed everytime the `items` change.
const total = computed(() => {
    return items.value.reduce((total, item) => {
        return total + (item.price * item.quantity)
    }, 0)
})

7. Watchers
As in some previous cases, you need to import the watch method from Vue, and this takes two arguments; the first is the data you are watching (this should be reactive data, like items in this case), and the second argument is a callback that is invoked when the data changes.

import { watch } from 'vue'

// The console.log will be executed every time items changes.
watch(items, () => {
    console.log('Cart items changed')
})

8. Created
So we don't have a specific onCreated here, we just need to create the function and initialise it inside the script setup. Also, I leave here the list of Lifecycles of a Vue component as a reference. Remember, here the DOM doesn't exist yet.

<script setup>
    // This will be executed when the component is created.
    console.log('Cart created')
</script>

9. On Mount
This is a lifecycle that exists in the API, so we need to import it from vue. Inside it takes a callback that is executed after the component is mounted. Here you already have access to the DOM.

// This call to the endpoint will run when the component is mounted.
onMounted(() => {
    fetch('/api/cart/' + props.cartId)
        .then(response => response.json())
        .then(items => items.value = items)
        .catch(error => console.error(error));
})

This is the final result:

To summarize

Migrating from the Option API to the Composition API is not something complicated, from my own experience, after a few components, it will be an easy task for you.
Now the question, should you do it? It's up to you, it's not necessary and if you prefer the Option API, you won't have any problem with it in the near future.

If you have any recommendation or some case is missing, let me know and I can add it :)

That's all, I hope it can be helpful for you 🥳

How use FirebaseUI for user authentication on your React project 🔥

Nico Montiel — Wed, 08 Feb 2023 23:24:21 +0000

Hey! :D

I will help you to configurate this tool from Firebase. Is super useful if you don't want to manage all the authentication of your users.
If you want to read more about this and when to use it, please read the documentation about authentication
Also, you can use this same exact logic if you are writing your project in other framework like Svelte or Vue.

To be able to use the Authentication of Firebase, you need to have a Firebase account and the firebase package in your project. I already make a tutorial about that, please read this before.

So now you are ready, so let's do this.

Create the Authentication service

First, I recommend you to create a file called auth.ts, here we can initialize the authentication layer.



import firebaseApp from './firebase' // This is the Firebase object from the previous tutorial
import { getAuth } from "firebase/auth";

const auth = getAuth(firebaseApp);

export default auth;

Create the Login page on your project.

So, let's create a login page. I didn't use any styles here, just the logic.

With just that, you already have a login form with all the security from Firebase.
This is how is showed on the screen:

I even put a random email there, and you can see how firebase already validate this for me.

In this example, you can see how flexible and customizable the library is.
For full documentation, you can see the github repository page here.

Also, all the options for configuration are also on their github repository.
The documentation is super clear and robust about this library, but you can use this post as a starting point.

That's all, I hope it can be helpful for you 🥳

How setup Firebase on your Frontend project 🔥

Nico Montiel — Thu, 12 Jan 2023 04:07:39 +0000

Hey! :D

Here, I will help you to make the initial configuration of Firebase on your Frontend proyect. This also will be useful if you use vanilla Javascript or a framework like Vue or React.

Configure the Firebase Account

First, we need to create an account on Firebase and add a New Project.

After that, you will have access to the Console of your project. On the Project Settings you can get your credentials for the SDK that we going to install.

Let's write some code!

First, you need to install the SDK.

npm i firebase or yarn add firebase

After, I recommend to create a file called firebase.ts or something like that, where you can initialize Firebase and just imported when is needed, instead of using it globally.

Also, please avoid store your credentials directly on your code, there are packages like dotenv to this type of stuffs.

It's pretty simple, but let's explain some lines:

Line 5: Here we create our configuration object. This is exactly the same that you saw on your Firebase Console.
Line 6: If you never saw the import.meta.env.KEY_NAME, it's just the name convention that Vite uses for the enviroment variables. So, if you don't use Vite, don't worry about this.
Line 17, 19: Initialize and export your Firebase object.

Yeah, just like that.

With this Firebase object, you can start using the different services that Firebase offers (Like databases, authentication, etc).
Here is an example in their own documentation. This Firebase Object always is a parameter when you want to initialize other service.

That's all, I hope it can be helpful for you 🥳