Forem: Edielton Dantas

One-Day Builds: From Stagnation to Skill Mastery

Edielton Dantas — Sat, 06 Sep 2025 08:46:50 +0000

Introduction

I talked with my friend Faith, a senior engineer I admire, about feeling stagnant at work. We agreed we should take charge of our careers instead of waiting for the "perfect" project to learn something new.

That talk inspired me to focus on one-day builds: small MVPs to sharpen my skills for a flagship project. I picked an e-commerce site for its complexity and learning potential, and aimed to try new tech, especially AWS, for a coming certification exam.

Developing an e-commerce site from scratch is a major commitment; that's why I decided to focus on features commonly found in e-commerce websites for my one-day builds, such as payment checkout.

1. Architecture Overview

The solution uses a frontend built with Vite (a build tool), TypeScript (TS), and React, and a backend built with the Serverless Framework (a toolkit for deploying serverless applications).

The checkout flow starts after the user clicks “checkout” and is ready to pay.

2. Key Implementation Details

For this one-day build, I wanted to learn Stripe integration and testing. I chose a lean backend with AWS Lambda, a serverless compute service that runs code in response to events without server management.

With Lambda, you can develop in AWS Cloud9, an online cloud IDE, or upload zipped code to AWS.

I dislike these because the backend isn't in your repo and you can't run or debug locally.

To solve this, I used the Serverless Framework, a tool for defining backend functions and infrastructure as code (using configuration files rather than manual setup). It integrates with Lambda and other AWS resources, supports local testing and ensures your backend code lives in version control (such as Git) alongside your frontend.

3. Testing & Debugging

Stripe provides test cards to mimic full payment flows, including successes, failures, and edge cases like expired cards or insufficient funds. This helps validate your app before launch. You can also test declined payments to ensure your UI responds clearly and helpfully.

4. Lessons Learned

Integrating payments into an app using Stripe or similar tools is more straightforward than I had imagined. The main lesson is that handling payments yourself requires strict adherence to PCI DSS rules, which cover the secure storage, transmission, and processing of credit card data.
If you send raw card data to your backend, you must handle encryption, server security, and access monitoring, among other tasks. This shows the extra effort needed without Stripe.
Stripe's Custom Components or Hosted Checkout reduces your PCI burden and simplifies compliance.
For a seamless checkout, use Stripe Elements and customize them to fit your app’s look.

5. Conclusion

If you feel stagnant, try upskilling and building a portfolio. Sprint tasks won’t always be satisfying.

By challenging yourself, you may learn skills that help you transition to new jobs or projects within your company.

Environment variables and DevServer

Edielton Dantas — Mon, 13 Jan 2020 17:20:05 +0000

Environment variables

When developing an application, we must make a distinction between production and development environments. This is where environment variables come in handy. You probably encountered such variables before such as PATH or PORT.

In this part of the tutorial, we'll install and setup dotenv and create its environment file with a few variables.

Installing the dependencies

$ yarn add dotenv -D

dotenv: A module that loads environment variables from a .env file into process.env.

Configuration

$ open webpack.config.js

const  path  =  require('path')
const  HtmlWebPackPlugin  =  require('html-webpack-plugin')
const { CleanWebpackPlugin } =  require('clean-webpack-plugin')

require('dotenv').config()

// Content omitted for better readability
// ...

Create the environment file

$ touch .env
$ open .env

# Overrides the NODE_ENV and PORT number
NODE_ENV=development
PORT=9000

Warning: It's recommended that you do not add this .env file to your repo because of the sensitive information it might contain (e.g, connection strings, username, and password...).

Untrack .env (recommended)

$ open .gitignore

node_modules
dist
.env

Serving files from dev server

So far we've been testing our app by going to the dist folder and opening index.html file from our favorite browser.

There's a much easier and better way to do that: enter WebpackDevServer.

Installing the dependencies

$ yarn add webpack-dev-server -D

webpack-dev-server: Allows you to serve your app from a local server.

Add script to start up the server

{
  "scripts": {
    "build": "yarn lint && yarn test && webpack",
    "build:watch": "yarn build --watch",
    "test": "yarn lint && yarn jest",
    "test:watch": "jest --watchAll",
    "lint": "standard",
    "start": "webpack-dev-server"
  },
  ...
}

$ yarn start

Configuration

WebpackDevServer is highly configurable. If you want to override its default behavior, such as the port number or whether to serve your app in a new browser tab, you just need to provide it under devServer, like in the example below:

$ open webpack.config.js

// ...
// Content omitted for better readability

/*
    1. Destruct process.env object
    2. Rename PORT to port
    3. Rename NODE_ENV to mode
*/
const {
  PORT: port,
  NODE_ENV: mode
} = process.env

const devServer = {
  port,
  open: true
}

module.exports  = {
    mode,
    devServer,
    // ...
}

$ yarn start

Conclusion

In this tutorial, we learned how to work with environment variables and how to serve our app with Webpack's dev server.

Introduction to Webpack Plugins and code linting with Standardjs

Edielton Dantas — Mon, 13 Jan 2020 10:41:41 +0000

Plugins

A Plugin is an object that has access to Webpack's compiler. This means that in practice, developers can hook into Webpack's build process and have access to the build's life-cycle callbacks.

In this section, we will be using two useful plugins: HtmlWebPackPlugin and CleanWebpackPlugin.

Installing the dependencies

$ yarn add html-webpack-plugin clean-webpack-plugin -D

html-webpack-plugin: Useful whenever we need to create an HTML file to serve our bundles. You can either configure this object to create a brand new file for you or use an existing one;
cleaning-up-the-dist-folder: Cleans up the dist folder before each build, leaving only the newly generated files.

Moving index.html file from dist to src

$ mv dist/index.html src/index.html

Remove the script tag from the index.html file

HtmlWebpackPlugin will add a script tag with the generated bundle to the index.html file automatically, hence the need to remove the one we added previously.

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div id='app' />
</body>

</html>

Import the plugins and add them to our config file

$ open webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const APP_DIR = path.join(__dirname, 'src')

const plugins = [
  new HtmlWebPackPlugin({
    template: `${APP_DIR}/index.html`
  }),
  new CleanWebpackPlugin()
]

module.exports = {
  // Add plugins to the config file
  plugins,
  module: [
      // Content omitted for better readability
  ]
}

$ yarn build

Linting

A linting tool is a program that checks your code against a set of style rules. This is quite useful in enforcing code consistency across your team / organization.

I've used standarjs for quite some time and I grew fond of this tool. There are other linting tools out there for you to pick. In this tutorial, I'm sticking to my old buddy standarjs.

Installing the dependencies

$ yarn add standard babel-eslint -D

standard: Allows you to standardize your code with no required configuration (although you can customize its default preset);
babel-eslint: babel-eslint is a parser that allows ESLint to run on source code that is transformed by Babel.

Update package.json file

$ open package.json

Add lint script

{
  "scripts": {
    "build": "yarn lint && yarn test && webpack",
    "build:watch": "yarn build --watch",
    "test": "yarn lint && yarn jest",
    "test:watch": "jest --watchAll",
    "lint": "standard"
  },
  ...
}

Note: It's good practice to lint your code, run the tests and only then build the project. This approach ensures we build our project only when the tests are passing and the code is following the code convetions we adopted.

Configure standard to use babel-eslint

{
  ...
  "standard": {
    "parser": "babel-eslint",
    "env": [
      "jest"
    ],
    "ignore": [
      "dist/**"
    ]
  },
  ...
}

Note: To avoid linting errors in your test files such as, "describe is not defined" or similar warning errors, you need to add jest to the env variable under standard's configuration.

Conclusion

In this section, we learned a thing or two about Plugins and the importance of maintaining our code base consistent by adopting a linting tool, such as Standarjs.

Testing React components with Jest and Enzyme

Edielton Dantas — Fri, 10 Jan 2020 10:09:04 +0000

Our React application is missing a critical component: Tests. In this section, we will configure Jest and Enzyme step-by-step. At the end of the tutorial, we should be able to run tests against a simple component.

Setting up Jest

Jest is a testing framework that is commonly used for testing React apps.

Note: Actually, you can test pretty much all the major frameworks on the market today with Jest.

Dependencies

$ yarn add jest babel-jest @types/jest -D

Basic example

$ touch src/sample.test.js
$ open src/sample.test.js

describe('Sample test', () => {
  test('should be equal to 1', () => {
    expect(1).toBe(1)
  })
})

Now head on to your package.json file and add a new script for running tests:

$ open package.json

{
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  ...
}

$ yarn test

Adding support to React

The previous setup allows you to run tests against plain javascript objects only. In order to make Jest "understand" React, you need to use Babel.

You can add this configuration in an external file or inside package.json. For the sake of simplicity, I'm using package.json to configure Jest.

$ open package.json

{
  "scripts": {
    "build": "webpack",
    "build:watch": "webpack --watch",
    "test": "jest"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  },
  ...
}

Enzyme

Enzyme is a testing utility that allows you to manipulate and traverse React components. It really comes in handy when you need to test whether a callback was fired via user interaction or, for instance, whether a component has subcomponents.

Dependencies

$ yarn add enzyme jest-enzyme enzyme-adapter-react-16 -D

Configuration file

$ touch src/setupTests.js
$ open src/setupTests.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Note: In order to be fully compatible with React, Enzyme provides an adapter to each React version.

Package.json

Last but not least, we need to configure Jest to run Enzyme's configuration file after the test environment has been installed.

$ open package.json

{
  "scripts": {
    "build": "webpack",
    "build:watch": "webpack --watch",
    "test": "jest"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  },
  ...
}

Putting it all together

Remember that App component we created in the previous tutorial? We will move it to its own file and run a basic test to check whether or not it's rendering correctly.

Move App component to its own file

$ touch src/App.jsx
$ open src/App.jsx

import React from 'react'

const App = () => (
  <div>
     <h1>App component</h1>
     <p>Hello world!</p>   
  </div>
)

export default App

Update index.js

$ open src/index.js

import React from 'react'
import { render } from 'react-dom'

import './App.scss'
import App from './App.jsx'

render(
  <App />,
  document.getElementById('app')
)

Test drive

$ touch src/App.test.js
$ open src/App.test.js

import React from 'react'
import { shallow } from 'enzyme'

import App from './App'

describe('App', () => {
  test('should render', () => {
    const wrapper = shallow(
      <App />
    )

    expect(wrapper.exists()).toBeTruthy()
  })
})

And finally run the test:

$ yarn test

Module Mappings

Thanks to Loaders, we can import things like style sheets or images from a javascript file as if they were modules.

If you attempt to load such a module from your React component, you'll get an error like the one below:

SyntaxError: Invalid or unexpected token

The recommended approach is to create a folder with two files: one for styles and another for files.

# Create a directory at the root level
$ mkdir __mocks__

Mock module for dealing with files

$ touch __mocks__/fileMock.js
$ open __mocks__/fileMock.js

// __mocks__/fileMock.js

module.exports = {}

Mock module for dealing with styles

$ touch __mocks__/styleMock.js
$ open __mocks__/styleMock.js

// __mocks__/styleMock.js

module.exports = {}

Mapping the file types to their respective mock modules

$ open package.json

{
  "scripts": {
    "build": "webpack",
    "build:watch": "webpack --watch",
    "test": "jest",
    "test:watch": "jest --watchAll"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  },
  ...
}

Note: I added a new script called "test:watch" under "scripts". As you might have guessed, this allows us to edit our source code / tests and have Jest re-run them for us.

Conclusion

This tutorial was supposed to be a 3 parts series on how to set up a basic React app without CRA, but due to the lengthy explanations, I'm planning on expanding it to.

In the next section, we will add support to linting and use a few webpack plugins to improve our development experience.

Transpiling React with Babel

Edielton Dantas — Wed, 08 Jan 2020 13:08:23 +0000

In part one of this series, we learned the bare minimum configuration and setup to build our very first React component and have it rendered into the browser.

In part two we will discuss a concept very useful in webpack called Loaders and why they are so important.

Note: If you inspect the webpack.config.js file from the previous example, you'll see that we used a loader to transform .jsx source code into regular javascript code.

Loaders

According to the docs:

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.

As of now, we configured webpack to only transform .jsx files. Let's see what happens when we try to import a .css file from our index.js file.

$ touch src/App.css
$ open src/App.css

body {
    background: rgb(246, 174, 45);
    color: #1f2d3d;
}

Head on to our index.js file and import the newly created css file:

$ open src/index.js

import React from 'react'
import { render } from 'react-dom'

import './App.css'

const App = () => (
  <div>Hello world!</div>
)

render(
  <App />,
  document.getElementById('app')
)

This time, instead of executing webpack manually by running yarn webpack, let us create a more semantic command in our package.json file. We can also leverage webpack to automatically build our project whenever a file is changed, by adding the --watch flag:

$ open package.json

{
  ...
  "scripts": {
    "build": "webpack",
    "build:watch": "webpack --watch"
  },
  ...
 }

Now if you run $ yarn build you will get a pretty self-explanatory error:

ERROR: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

To fix this, we'll need first to install two packages: css-loader and style-loader.

$ yarn add css-loader style-loader -D

css-loader: Allows css files to be imported as regular javascript modules;
style-loader: Inserts the imported css into DOM's header tag;

$ open ./webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.jsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

test: A regular expression used to match the loader against the file you are interested in;
use: The name(s) of the loader(s) that will load/transform the target file.

Note: Your loaders will be evaluated from right to left. In the example above css-loader will be executed first, and style-loader after.

If you refresh the page there should be no errors this time. Also, when the page opens with our rendered React component, try inspecting the header tag. You should see that whatever styles we put on App.css will be injected into the <style /> tag.

Adding support to .scss files

To support .scss files you just need to install sass-loader along with node-sass and create a configuration similar to that of our .css loader.

$ yarn add sass-loader node-sass -D

sass-loader: Loads a Sass/SCSS file and compiles it to CSS;
node-sass: Allows .scss compilation to .css and is required by sass-loader

Note: Because we are installing new packages and webpack is watching the files, it may crash. It's better to always run yarn build whenever you install something new.

Add a new rule to allow webpack to load .scss files:

$ open webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.jsx', '.js']
  },
  module: {
    rules: [
      // Content ommited for better readability...
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

# Rename the .css extension to .scss
$ mv src/App.css src/App.scss

Fix the import from index.js:

$ open src/index.js

import React from 'react'
import { render } from 'react-dom'

import './App.scss'

const App = () => (
  <div>Hello world!</div>
)

render(
  <App />,
  document.getElementById('app')
)

Great job! Now your project supports .scss files!

Loading assets

Working with images, or any other kind of file extensions for that matter is fairly straightforward. We'll be using file-loader to emit the imported file into the output folder.

Note: You could also inline your assets as data uri or import them as string, but that requires other loaders such as url-loader or raw-loader.

$ yarn add file-loader -D
$ open webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.jsx', '.js']
  },
  module: {
    rules: [
      // Content omitted for better readability...
      {
        test: /\.(jpe?g|png|svg)$/,
        use: 'file-loader'
      }
    ]
  }
}

For testing purposes, let's add an image to our src folder and have it imported from our ./src/App.scss.

Note: There's a sample image named "let-there-be-sun.png" in the repo. I'm using it in this example.

$ open src/App.scss

body {
    background-image: url(./let-there-be-sun.png);
    color: #1f2d3d;
}

If you refresh the browser you will notice that the background image is loaded as expected.

Note: With this configuration you can even import images from .jsx files!

Loading Fonts

Depending on your needs, you might want to load fonts hosted on external servers (CDN) or those hosted on your own (i.e, woff2, woff, eot...).

CDN

Say you want to load the free version of LinearIcons font in your project. You could accomplish this task by simply importing it in your .css file without additional configuration.

$ open src/App.scss

@import url(https://cdn.linearicons.com/free/1.0.0/icon-font.min.css);

body {
    background-image: url(./let-there-be-sun.png);
    color: #1f2d3d;
}

Local assets

On the other hand, you might want to use the version you have installed on your project.

Note: You can find the fonts for this example in the repo.

1) We will start by defining the fonts we want file-loader to load for us:

module.exports = {
  resolve: {
    extensions: ['.jsx', '.js']
  },    
  module: {
    rules: [
       // Content omitted for better readability...
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: 'file-loader'
      }
    ]
  }
}

2) In your .scss file, configure which fonts you want to load from your local server:

$ open src/App.scss

@font-face {
    font-family: 'Linearicons-Free';    
        src:url('fonts/Linearicons-Free.woff2') format('woff2'),
        url('fonts/Linearicons-Free.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.lnr-clock:before {
    content: "\e864";
}

body {
    font-family: "Linearicons-Free";
    background-image: url(./let-there-be-sun.png);
    color: #1f2d3d;
}

3) Use the font in your component:

import React from 'react'
import { render } from 'react-dom'

import './App.scss'

const App = () => <span className='lnr lnr-clock' />

render(
  <App />,
  document.getElementById('app')
)

Conclusion

In this tutorial, we learned that thanks to Loaders, we can import and transform files by simply defining which extensions our loader has to load from.

Up to this point, our project supports compiling .jsx files to regular js, .scss into .css and also loading assets such as images and fonts.

Basic Webpack setup

Edielton Dantas — Wed, 08 Jan 2020 13:08:00 +0000

Creating React apps nowadays is fairly straightforward thanks to the amazing create-react-app CLI (CRA for short). If you are not familiar with CRA you can learn more about it here.

With CRA you can build and test React apps with ease without requiring any configuration at all. Still, you might find yourself having to deal with some configuration down the road because not every React project is created equal. Also, learning the basics of what happens under the hood allows you to fully customize your project to fit your needs.

The main goal of this tutorial is to help you understand basic webpack concepts as well as the required setup for producing a modern React application from scratch.

Installing Webpack

Let's start by creating a package.json file before we jump into installing webpack.

$ npm init -y

With a basic package.json in place, go ahead and run the command line below:

$ yarn add webpack webpack-cli -D

Note: The webpack-cli is necessary to run webpack in the terminal.

Bundling your first file

According to the official webpack v4 docs:

Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production.

From the docs, we understand that webpack expects that the entry file is named index.js and that this file resides in a folder named src.

Let's go ahead and create both this directory along with the entry file:

$ mkdir src
$ touch src/index.js

For demonstration purposes, let's console.log the ubiquitous "Hello world!" message.

$ open src/index.js

console.log('Hello world!')

On the terminal run $ yarn webpack and check your project folder. You will notice that after running this command line, webpack will create a dist folder along with a main.js file.

Note: If you want to check the unminified version of the bundle, go to your terminal and type in yarn webpack --mode=development

Setting up a minimal React app

We'll start by installing the absolute minimal dependencies to run and build React apps:

$ yarn add react react-dom
$ yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader -D

react: This package provides the necessary tools for us to build React apps, such as components and elements;
react-dom: Allows React to be rendered into the browser;
@babel/core, @babel/preset-env, babel-loader: These three packages are commonly installed together whenever you want to take advantage of the latest Javascript features without worrying about backward compatibility with older browsers;
@babel/preset-react: Allows Babel to transform .jsx files into regular javascript files;

At this point, we have installed all the necessary packages to create a basic React component. The only thing we need to do is tell webpack how this is going to happen.

Start by creating the configuration file:

$ touch webpack.config.js
$ open webpack.config.js

Copy and paste the code below into this file.

Note: Don't worry about the configuration file at this point. Suffice it to say that we are telling webpack that files ending with .jsx and .js should be loaded by babel-loader along with its presets.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  }
}

With the configuration file in place, we just need to write a very basic component and have it loaded on an html page:

$ open src/index.js

import React from 'react'
import { render } from 'react-dom'

const App = () => (
  <div>Hello world!</div>
)

render(
  <App />,
  document.getElementById('app')
)

Start by creating a basic html page and placing it into the dist folder for the moment.

$ touch dist/index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <!-- The container that will load React into the page -->
    <div id='app' />
    <!-- This is our bundled application -->
    <script src="main.js"></script>
</body>
</html>

Time to render our modest component into the browser:

$ yarn webpack
$ open dist/index.html

If everything went well, you should see that our React component was rendered correctly.

Conclusion

In this short tutorial, we had a gentle introduction to a basic webpack configuration and the minimal packages that we need to build a basic React component.