| Summary |
|---|
| Who? |
| What? What will we build? |
| Why? What is our objective? |
| How? Are are the tools that we will use? |
| Let's start |
Hi there! My name is Vinícius Kammradt, I`ve been playing with technology since 2016. I really enjoy creating new stuff and also love to spread any knowledge that I have with others.
Now, with help from Gabriela de Almeida Riul, an Electrical Engineering student and also volunteear at PET EEL, who is also interested in development, we will try to beat a challenge proposed by Código Falado.
The main idea of this project is to create a complete website to this challenge.
O cliente (Leitura Orgânica) precisa de uma Landing Page para possibilitar que o usuário calcule sua velocidade de leitura.
Our technical structure:
Our Vue.js website will be bassically a landing page that will use our API to get some information and also be able to manipulate it. We also need the API to be able to send e-mails, so we will use Sendgrid to do it.
Our main objective is learn. After that, we want to be able to understand how a real website and API work, and after that, create our solution based on what we learned.
We will use Javascript as our main programming language.
So, to create our front-end we will use Vue.js. Primarily because it is an easy framework to start with and also really powerfull. To make stuff look better we will use Vuetify, a library that has styled components.
We will also need some server-side processing to access the Database and send emails, so we will use Express.js to do that. This is a really easy to use framework that allows us to create endpoints and also trigger all other stuff that we need to do in the server.
The tutorial was divided into some sections. You can verify everything in the table below:
| 💬 Introduction |
|---|
| What is a Database? |
| What is an API? |
| HTTP Verbs |
| Installing MongoDB on Ubuntu |
| Installing a client for Mongo |
| 🗃️ Creating the Project and interacting with Database |
| Creating a project |
| Learning how to perform CRUD with Mongoose |
| What is CRUD? |
| Creating the basic file |
| Adding rules to Text model |
| Reading data |
| Updating data |
| Delete data |
| ♻️ Creating the CRUD |
| Creating the basic API file |
| Creating routes |
| Creating a GET route |
| Organizing our files and project |
| Creating a real GET route |
| Refactoring the code |
| Route to CREATE a Text |
| Route to GET one Text |
| Route to UPDATE a Text |
| Route to DELETE a Text |
| Route to GET a random Text |
| 📬 Sending emails using SendGrid |
| Introduction about SendGrid |
| Adding SendGrid library to the project |
| Creating custom email templates |
| Sending custom email templates |
| 🎨 Refactoring and Best practices |
| Splitting routes |
| Using environment variables |
| 🔒 Security |
| Introduction about security |
| Authentication and Authorization |
| Securely encrypting data |