A full tutorial in how to build your first full-stack application using Typescript, Node, React and GraphQL

Image for post
Image for post

1. Introduction

This is the fourth and last part of the Animal Tribes: How to create your first full-stack Typescript GraphQL Application? tutorial. If you didn’t see part 1, part 2, and part 3, please, click on the links below.

In this part, we’re going to deploy our application to Heroku.

2. Create a GitHub account

To deploy our application, we need to host our code on GitHub. So I will not focus on how to create a GitHub account, but if you don't know how to do this. …


A full tutorial in how to build your first full-stack application using Typescript, Node, React and GraphQL

Image for post
Image for post

1. Introduction

This is the third part of the Animal Tribes: How to create your first full-stack Typescript GraphQL Application? tutorial. If you didn’t see part 1, and part 2, please, click on the links below.

In this part, we’re going to develop our client using React, Typescript, and Apollo GraphQL. Besides, for styling, we're going to use styled-components and react-materialize.

2. Setting up… our brain

Exactly, let's set up our brain to think about what we're going to do now. Let's think a little bit about engineering.

We're going to create a website, we need some pages, but witch pages are we going to use? …


A full tutorial in how to build your first full-stack application using Typescript, Node, React and GraphQL

Image for post
Image for post

1. Introduction

This is the second part of the Animal Tribes: How to create your first full-stack Typescript GraphQL Application? tutorial. If you didn’t see part 1, please, click on the link below.

In this part, we’re going to develop our server using Node JS, Typescript, Express, GraphQL, and MongoDB.

One thing that it's important to do is to add our code to GitHub. I'm going to mention more about this. …


A full tutorial in how to build your first full-stack application using Typescript, Node, React and GraphQL

Image for post
Image for post

Hello everyone,

It’s nice to come back to writing. I was really busy in the last months and I could not dedicate some time to write new posts. But knock it off, let’s go to what matters.

1. Introduction

In this tutorial, I’ll show you how to create an application from scratch. For this, I will use Typescript, Graphql, NodeJs, ReactJS, and MongoDB. Besides, two frameworks that will make our life easier: Express and ApolloGraphql. …


A TDD for NodeJS applications

Image for post
Image for post
Photo by René Pollock on Unsplash

Hi everyone,

In this article, I'll show you how we can make tests using two awesome tools: chai and mocha.

But first of all, I'd like to tell about the importance of testing. Why tests are so necessary? For this, I should explain what TDD is.

The Test-Driven Development (TDD) is a software engineering process that requires unit tests to be written before the code they are supposed to validate that relies on the repetition of a very short development cycle, where the requirements are transformed in test cases. …


A tutorial on how to use stage and production environments

Image for post
Image for post
Photo by Kaleidico on Unsplash

Hi everyone,

In this article, I'd like to share how I deploy my code to Heroku using GitLab CI/CD. For this, I'll create a simple NodeJS application. Here we'll learn the environments initial concepts: Development, Stage, and Production.

When I code, I use these three environments. The Development environment is where everything happens. It's the environment where I code all the new features and the tests. When you are in the development process this is the environment in your local machine. When I make sure that all the code is ready to deploy, I submit it to GitHub/GitLab, depending on the project that I am working on. One person or the team makes the code review. If everything is OK we merge and deploy it to Staging.


A guide for developers

Image for post
Image for post
Photo by Anastasia Dulgier on Unsplash

Hi guys,

Have you faced the question: What happens when we type http://google.com?

If you were interviewed for a web development role, maybe someone asked this to you.

In this article, I’ll show you how the HTTP works, not only the latest versions but also HTTP/0.9, HTTP/1.0, HTTP/1.1, and HTTP/2.0, how is the difference among them. We’ll see here:

  1. Some acronyms to help us
  2. What is this such HTTP?
  3. Components of HTTP
  4. HTTP Methods
  5. URI and URL
  6. HTTP Message Format
  7. HTTP status code
  8. Conclusion

Some acronyms to help us

I listed here some acronyms that I will use a lot, so that means if you see an acronym that I don’t explain it, you can see it here. …


Securing the APIs with JSON Web Tokens

Image for post
Image for post
Photo by MILKOVÍ on Unsplash

Hi everyone,

In this article, I'll show you how the fundamentals of JSON Web Token (JWT) and how to authenticate the NodeJS APIs with it.

First of all, we need to know what is the JSON Web Token.

Sam, I already know what JWT is, I don't want to waste my time reading this… 😕

OK, OK, so we can go directly to What will we do?.

JSON Web Token

A JSON Web Token (JWT), is a character string that permits only the server can read the content of the token based on a secret. it defines a secured protocol that transmits restricted information. …


A tutorial for beginners

Image for post
Image for post
Photo by Yancy Min on Unsplash

Hi guys,

In this article, I'll teach you how to use Git in your projects and how you can get improvement work with this amazing tool.

Hey Sam, first of all, what is this Git guy?

OK, from the beginning.

Image for post
Image for post

"Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git is easy to learn and has a tiny footprint with lightning fast performance. …


Image for post
Image for post

Hi guys,

Do you know how to create a MERN Stack? Do you know what a MERN Stack is? Do you know when you will need a MERN Stack?

In this tutorial, I’m going to teach you how to create a simple MERN Stack Application.

First of all, a MERN Stack is a combination of four technologies: Mongo DB, Express JS, React JS, and Node JS.

OK Sam, I’d like to learn how to create my first MERN, but… what does it means?

Don’t worry, I can explain. You’re facing one of the most relevant Stacks of the world growing fast every day, acquiring many developers around the globe in a huge community. The main thing you should know is that, with MERN Stack, you’ll work with Javascript. …

About

Sam Barros

A Software Engineer who has decided to share his experience.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store