DEV Community: Thiago Mota dos Santos

Why does every product need testing?

Thiago Mota dos Santos — Thu, 01 Aug 2024 11:57:38 +0000

Tests are a vital part of the software development process. If your goal is to create a successful product, you need to ensure your product is working as expected.

At Woovi, we have different types of tests you can see how we use them in:

Testing a REST API
Integration tests with relay
What to test in the frontend
What to test in the backend

Like design system, can seem boring and time-consuming to build, but software is about the time-long term and tests will help you to create your code faster

How?

Imagine that you are building a form with many fields and an unexpected error occurs. You need to fill form every time and submit it, to debug the error. Fill the form every time, can be a very time-consuming task.

With tests, you can create a test case for each field and run it to check if the field is working as expected. This allows iterate faster, and in most cases, you will find the error in less time.

As your product grows, the cost of creating new tests will be almost zero. Just copy paste from another test!

Manual testing do not scale

Manual testing takes longer than expected and this time can significantly increase as your codebase grows. Additionally, it is more difficult to catch regressive behaviors. In short, automated tests decrease time over time, while manual tests increase.

It is very easy to break functionality without realizing it, as it can be a second-layer side effect (not easily visible). Tests will also help you in these scenarios.

At Woovi, we have over 12,000 tests in the backend and frontend, which helps us capture any issues easily, both locally and in CI/CD, thanks to a test-all that alerts us whenever something doesn't work as expected.

In Conclusion

Test is an excellent form to guarantee that your product is work as expected. And it will allow you to ship to production quickly. With each test created, the cost of create a new test decreases, which allows your code to become faster

Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!

Photo by Scott Graham on Unsplash

Building an MVP

Thiago Mota dos Santos — Tue, 06 Feb 2024 12:38:55 +0000

Building an MVP is a challenge that every developer should undertake, as it is a great way to learn various concepts, not only about technology but also about the product and, most importantly, people. In this article, I will share my strategies, challenges, and lessons learned.

The MVP I am building is Crypto Use Pay, a gateway where it is possible to receive payments via cryptocurrency.

Starting

The first thing you need to do is to put everything you plan to do on paper or as notes on your computer screen. Conduct an analysis of each feature you intend to create, make a prioritized list, and strive to include only the essential functionalities in the product, as an MVP = Minimum Viable Product.

Sketches can be a great way to do this as well. It's essential to visualize precisely what you are going to build.

A first version should have only a few functionalities. After noting all the features your product will have, you should be able to state its purpose in a brief sentence. In the case of our gateway, we can say that:

"Crypto Use Pay is a platform for creating orders for merchants, with the primary form of payment being cryptocurrencies."

Stack

Here we can have two approaches:

The stack you are proficient in
The best stack for your product

If you are proficient in a few technologies, it would be ideal to use them to create your product.

If you have extensive knowledge, you can conduct a more in-depth analysis to determine what would be the best fit for your product.

Trade-off

When building your product, it is inevitable that you will have to make some sacrifices. Consider the following example:

"I want to scale my application significantly, so GraphQL makes sense for me."

In this situation, if you have limited knowledge of GraphQL, you may face a steeper learning curve to implement this technology satisfactorily. Another example:

"I'll use Firebase because I won't have to build authentication from scratch, and many features are readily available."

While this may work well initially, what happens when the application scales? You may still need to create some components manually.

You should be aware of everything that involves your product and carefully consider the trade-offs associated with the technologies you choose.

Be simple

Overengineering is a significant problem; your first version certainly doesn't need thousands of incredible features. You need to find out if someone will use your product first.

Reduce the number of clicks; it should be possible to reach the purpose of your application in just a few clicks. Therefore, a good Developer Experience (DX) is crucial.

Don't be afraid to discard an unused feature.

Try to keep it as simple as possible.

Talk with your customers

If you have a specific niche to target, don't hesitate to talk to as many people as you can. Send DMs on Twitter and Linkedin, ask in the comments, inquire if they would use your product, create posts to gather ideas, and provide incentives for your customers. At Crypto Use, we are considering offering a real benefit to those who promote our product!

Code fearless

Creating an MVP often involves fear and insecurity, as it naturally would. However, these negative feelings are often just noise from the mind and do not reflect reality. When embarking on a journey, it's impossible not to hit or fall somewhere.

That's precisely why you should write the code, no matter if it's bad. If something goes wrong, you are forced to learn how to solve the problem anyway. Iteration, that's the keyword of this article. Just code it.

Community

On Twitter itself, there are many people who have already built incredible products. My recommendation is Sibelius

If you encounter any obstacles on your journey, don't hesitate to ask for help. Surely, someone will be able to assist you.

Wrapping up

Building an MVP is a significant challenge that goes beyond technical development, involving a deep understanding of the product and user needs.

There's still much to learn, but I believe that's enough for now.

Twitter: @Thzinhdev
Linkedin: Thiago Mota
Photo by Scott Graham at Unsplash

How to use Chatgpt better

Thiago Mota dos Santos — Thu, 01 Feb 2024 22:00:08 +0000

I use ChatGPT quite a bit, and I believe it's a great way to obtain information on various concepts. I can ask it to generate lists, perform operations based on input, or tasks that might take some time to do manually.

Using chatgpt to programming

The same concept applies here, Let's say you have a JSON that comes from an API with many fields.

{ 
   "name": "John Doe",   
   "age": 30,   
   "birth_date": "1992-05-15",   
   "height": 1.75,   
   "married": false 
}

For example, we want to create a type this api response

Input to the GPT: Create a type in typescript with this json.

Response:

type Person = {
  name: string;
  age: number;
  birth_date: Date;
  height: number;
  married: boolean;
};

If this json was a field with many values, the gpt, or some tool that this work would be very useful

The real problem

What has been addressed are quite simple cases, GPT would hardly make mistakes, but when the code we send as input is more "complex," the chance of it generating a strange response is very high. This happens because AI, in general, is very good at following specific instructions and bad at understanding the "context" of our code. If your code is extensive, this problem becomes as clear as daylight – how will GPT have context for your business rule? And even if you input the complete specifications of your code each time, it would take a long time.

Our goal is to do this:

Consider this random code:

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch(`/api/payout_details?payout_reference=${payoutWithdraw.payout_reference}`, {
      method: 'GET',
    });

    const item = payersData[0];

    if (!item) return null;

    if (res.ok) {
      const data = await res.json();

      if (data.data.errors || data.data.code === 'MethodNotAllowed') return;

      const filteredDataDone = data.data.filter((order) =>
        order.order_id === item.order_id && order.status === 'done'
      );

      const payersCollection = collection(db, 'payers');

      const payersQuery = query(
        payersCollection,
        where('id', '==', user!.uid),
        orderBy('timestamp', 'desc'),
        where('successful_payment', '==', true),
        where('payout_successful', '==', false),
      );

      const payerSnapshot = await getDocs(payersQuery);

      let totalAmount = 0;

      payersData.forEach((payer) => {
        if (!payer.payout_successful) {
          totalAmount += parseFloat(payer.amount);
        }
      });

      const roundedTotal = Number(totalAmount.toFixed(2));

      newBalanceLiquid(totalAmount);

      setTotalBalance(roundedTotal);

      if (!filteredDataDone || filteredDataDone.length === 0) return;

      .........
      ........
    }
  };
  fetchData();
}, []);

This strange code does many things at once for action x to be performed. The likelihood of the AI being able to understand your code is very low.

Small batch

I recommend against pasting your code and expecting some magical solution from the AI – you'd want to avoid unexpected outcomes, right? So, what should you do when you encounter a genuinely challenging problem?

what to do?

Small batch.

In other words, you abstract the behavior of your code, remove everything that is not important, and request a reconstruction from GPT. Then you should:

-Analyze the response and truly understand the problem
-Ask for improvements or add only a small part of your real context

example input:

Given an array of objects containing information about people, including name (name), age (idade), status (status: "new" or "done"), identification (id), balance (balance), and whether they were successful (successful: true or false), develop a React code. This code should perform the following:

Compare the provided ID with the IDs of the objects in the array.
If an object has a corresponding ID and its status is "done", store that object in a variable.
Maintain a state that calculates the sum of balances (balance) only for objects that have successful as true.

Response:


const DataComponent = ({ data, idToCompare }) => {
  // State to store objects that match the ID and have a status of 'done'
  const [filteredData, setFilteredData] = useState([]);

  // State to store the sum of balances where 'successful' is true
  const [sumSuccessfulBalances, setSumSuccessfulBalances] = useState(0);

  // Effect to filter the data when the 'data' or 'idToCompare' property changes
  useEffect(() => {
    // Filter objects based on the comparison of ID and status 'done'
    const filtered = data.filter(obj => obj.id === idToCompare && obj.status === 'done');
    setFilteredData(filtered);
  }, [data, idToCompare]);

  // Effect to calculate the sum of balances where 'successful' is true in the filtered data
  useEffect(() => {
    // Calculate the sum of balances where 'successful' is true
    const sum = filteredData.reduce((total, obj) => (obj.successful ? total + obj.balance : total), 0);
    setSumSuccessfulBalances(sum);
  }, [filteredData]);

Note that even in this small example, the response is not so good, so you should just analyze and try to understand your problem.

Perplexity

Perplexity It's an interesting tool to use, it's like a GPT but with internet access, and with each input you send, it provides an article or video for you to delve deeper into your problem

Wrapping up

Use small batches when working with artificial intelligence; treat them as a learning tool, not as a magical being that will solve all your problems miraculously.

X (Twitter): https://twitter.com/Thzinhdev
Photo Possessed Photography at Unsplash

Quick config for Eslint and Prettier

Thiago Mota dos Santos — Wed, 08 Nov 2023 16:51:21 +0000

It can be a bit annoying to configure eslint to work together with prettier, because of some unwanted conflicts and because we need 2 configuration files and 2 extensions: .eslint and .prettier. There is a simpler way to do this, avoiding having 2 different files and reducing the chance of conflicts. Let's go:

Choose the settings that best suit your style

yarn eslint --init

we'll use prettier as an eslint plugin.

yarn add eslint-plugin-prettier prettier -D

add prettier in array of plugins

"plugins": [
    "react",
    "prettier"
 ],

add the prettier configs into 'rules' following this format, You are free to choose the styles that suit you best.

"rules": {
      "prettier/prettier": [
        "error",
        {
          "printWidth": 80,
          "tabWidth": 2,
          "singleQuote": true,
          "trailingComma": "all",
          "arrowParens": "always",
          "semi": false
        }
      ]
  }

the eslint file should look like this:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "printWidth": 80,
          "tabWidth": 2,
          "singleQuote": true,
          "trailingComma": "all",
          "arrowParens": "always",
          "semi": false
        }
      ]
    }
}

Conclusion

From this simple configuration, you can specify more eslint rules to suit your project.

Twitter: https://twitter.com/Thzinhdev
Eslint config: https://gist.github.com/Thiago-Mota-Santos/60ec2ba0c88d2ef00b9d8b9e590b1cf7#file-gistfile1-txt

Thumb by Ryan Quintal at Unsplash

Why have a design system?

Thiago Mota dos Santos — Tue, 26 Sep 2023 14:20:31 +0000

A very common thought when we talk about technology "This takes a long time so I shouldn't do it" if you read this article, You know that many "laborious" things become valuable in the long run.

A design system ends up becoming essential as your code base grows, imagine your entire system interface as a big puzzle. If all of this isn't "organized" with each piece you add, it makes maintaining your system more difficult. Think that you took a long time without needing to add some CSS property to a component and after some time you need to do it, the chance of you taking a long time to find your component and even your interface starts to "balance" because of the additional CSS is very high.

CSS is powerful, but we have to be very careful when using it, we don't want to spend minutes or hours giving "1px solid red" to find out where our problem is. Below is an example of the noise that additional CSS can cause in the interface.

If we have a component A and we add an extra property to it, it can change the composition of the layout and several components can be harmed. Which would take longer for everything to return to normal.

If each component is like a domino ready to knock the others down, just organize the table where they are.

Monorepo

Use a Monorepo It's a way to have our code shared across multiple projects. We'll use this example to explain how a design system works. Generally the shared code for UI is in package/ui. You can change it if you prefer.

Standardizing your code prevents it from being too difficult to maintain your system, so we'll take all the smallest components and start our design system.

Forms, Inputs, Buttons, Tables and any other component that is repeated a lot during the application can become part of the design system.

const Button = ({ text = '', isSubmitting }) => {
   return (
     <Button disabled={isSubmitting}>
       {isSubmitting ? <Spinner /> : text}
     </Button>
   ) 
}
export default Button;

Radix UI

Using a library with components is very useful for building a design system, as its components have accessibility and a small defined pattern that can be easily extended.

And there are also primitives that are components without styling with some behavior, e.g. Drawer, Dialog components, etc. There are several options, choose the ones that make sense for your application.

Design pattern

If we put all our components together and they were all without a defined pattern, it would be a disaster. A design system should solve this problem.

The idea is to have a practically immutable base and just extend it (if necessary), this avoids the noise of adding more css.

Docs

Storybook is a great tool for us to see all of our components, such as their variations and descriptions. This can be extremely useful for your team.

Conclusion

I'm seeing a lot of things about design patterns and I'm migrating a design system to Radix UI, it's challenging, but it helps a lot to understand the process behind it and the importance of having a design system.

Thumb by Ryoji Iwata on Unsplash

Spend time to gain time

Thiago Mota dos Santos — Mon, 28 Aug 2023 21:36:20 +0000

The great magic of software development is that there's always the possibility to improve a process or automate it – in other words, to reduce active involvement in it. This frees up time to do other things, accelerating your development. However, to reach the stage of "time gain," you need to invest time in the first place.

Why automate?

Imagine that every day you need to spend 10 minutes updating your project's dependencies to ensure it's on the latest version. Doing some simple math: in 5 days, you've spent 50 minutes; 20 days -> 200 minutes; 1 year (20 * 12) -> 12 x 200 -> 2400 minutes, or putting it in hours: you've spent 40 hours on a task that could be automated.

Now, let's discuss the title, "Spend time to gain time." If creating a script to automate this task, so you don't spend 10 minutes daily, takes 4 hours to develop, it might seem like a significant time investment initially. However, in the long run, you'll save 36 hours using this small example.

Other Forms of Automation

Eslint:

The combination of Eslint + Prettier is an excellent form of automation; these technologies help us automatically format code simply by saving the project. Let's consider an example: imagine that you spend 1 to 2 seconds manually indenting each line of code. It might seem minor, but in the long run, this accumulates to a significant amount of "wasted" time.

Testing:

I used to be averse to testing myself, thinking, "I can test properly during development." This is a wrong notion. While it may seem expensive to spend a fair amount of time writing tests for your application, believe me, in the long run it makes a big difference. Again, let's use an example:

test('adds 2 + 2 to equal 4', () => {
  const result = sum(2, 2);
  expect(result).toBe(4);
});

function sum(a, b) {
  return a + b;
}

This is another simple example, but consider a hypothetical situation. Imagine you've created a codebase, and much later, you need to revisit it because something went wrong, as indicated by the tests. In a very straightforward manner, you're directed to the problem if something is amiss. The amount of time needed tends to increase with the size of your codebase.

Moreover, tests ensure that managing your codebase becomes increasingly manageable as it grows.

When Should You Automate?

During development, many processes are often automatically automated by the tools themselves, so the cost might only be the configuration (in some cases), which is undoubtedly worthwhile.

A good time to create scripts to automate tasks is when you notice that you spend a reasonable amount of time on repetitive tasks that don't yield benefits when considering the long term.

In Conclusion

I believe the automation process goes hand in hand with optimization, being able to accomplish more and more in less time, and automating as many things as possible to achieve excellent results. Sometimes we think, "I've spent an hour setting this up, is it worth it?" We often don't look at things holistically, so I can say that, as time passes, it becomes more and more worthwhile.

Thumb by Lenny Kuhne on Unsplash

A different way to deploy a server

Thiago Mota dos Santos — Fri, 04 Aug 2023 14:21:26 +0000

When we do a project, we usually like to deploy it, so if someone sees our profile, they can quickly see the project live. Without having to run on the machine, the point is that it is not always possible to find services that do this in a not so expensive way. After all, leaving an app active is expensive, and before long your app would be unavailable for viewing.

It was then that I thought of vercel.

Vercel is a hosting and deployment platform for web applications, mainly focused on the frontend.

Motivation

Manage to send a fullstack project for development. And manage to send the entire application in just one service, in this case vercel. In this article we will focus on how to deploy the backend.

In a frontend application using next js, there is a node. who is responsible for server-side rendering (SSR) and that allows implementations such as: routing, static and dynamic pre-render. We'll use this concept to accomplish our goal.

For example in Nextjs API directory:

pages
- api
  - hello.ts

export default function handler(res) {
   res.status(200).json({ name: 'John Doe' })
}

Accessing localhost/pages/api/hello will have "John doe" returned, so what if we could just send the server without any interface to vercel? This is possible thanks to the concept of serveless functions.

As expected, there are some limitations, including: The server is not always active (only when accessed, which can be a little slower), Native dependencies,reading from or writing to the filesystem

Starting

Create a vercel.json file and leave it in the root of the project. When you build your application vercel will detect this file and treat it as serveless.

{
  "version": 2,
  "builds": [
 {
  "src": "src/index.ts",
  "use": "@vercel/node"
 }
  ],
 "routes": [
{
 "src": "/(.*)",
 "dest": "src/index.ts"
}
 ],
}

"src": "src/index.ts" - It's where your main file that connects to the server is.
"src": "/(.*)" - Will make all routes available (example: localhost:4000/users?name='john doe')

To exemplify we have a simple application that registers and lists users using graphql:

modules/
- Users/

index.ts:

const uri = process.env.MONGODB_URI
const main = async () => {
await mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
};

const app = new Koa();
const router = new Router();

main()
.then(() => console.log('🎉 connected to database successfully'))
.catch(error => console.error(error));

const graphQLSettingsPerReq = async (_req, _res) => {

return{
graphiql: true,
schema,
pretty: true
}
}
const graphQlServer = graphqlHTTP(graphQLSettingsPerReq);
router.all('/graphql', graphQlServer);

app.use(cors({ credentials: true }));
app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());

const server = http.createServer(app.callback());
server.listen(3000, () => {
console.log("server is running");
});

Initial setup should be enough, you can also use vercel cli

Common Mistakes

If you use an ORM as a Prisma. Don't forget to put a 'migrate' command when deploying, as this process is not automatic.
If you get an error like "Serverless function crashed". Add /_logs to your URL and track errors. As said, there are some limitations in this kind of approach, this link might be useful

In Conclusion

Deploying a simple application this way can be a great way to make it live for a long time. Someone who enters your under construction profile will be able to quickly get what you are up to. If your application scales, it's time to venture into the cloud world.

Deploy link: https://deploy-server-topaz.vercel.app/graphql
Repository: https://github.com/Thiago-Mota-Santos/deploy-server