DEV Community: Sebastian Gbudje

How to connect your Node/express Backend with your react Front-End(POST)

Sebastian Gbudje — Thu, 06 May 2021 21:18:53 +0000

It's been a while since my last post. I was involved in a co-op/internship program and was working on an app with a team of four. Since then, I've been busy with my regular job so I haven't had the time to write. I'll be sharing a lot more in my upcoming posts on my experience.

Pre-requsite for this tutorial

You have some understanding of react and react hooks
You know how to set-up a basic express server
You Know about the fetch API
You Know about JSON

Let's Talk React

React is a JavaScript library for building user interfaces. It makes creating UI a breeze. There are of course other great Front-End frameworks like angular, Vue Svelte, etc. But for this post, we will be focusing on react.

Creating Our React Front-End.

We first need to set up our react front-end. We are going to be using the create-react app.
Run the command below in your terminal. It'll take some time to finish creating the necessary files.

npx create-react-app app-name

The command will create a directory with whatever name chose for your app and add in the necessary files needed for your application.
Open the directory in your favorite IDE and it should have its folder structure like this

We are going to open our src folder and change the contents of the App.js file to this

import  React from 'react'

function App() {
  return (
    <div>
      <form>
        <input placeholder="email" />
        <input placeholder="password" />
      </form>
    </div>
  );
}

export default App;

*Note - I could be wrong but I believe you can now make components without having to Import React from 'react' let me know in the comments if I'm wrong.

We now have a basic form that we can use to send data to our backend. Don't worry, we'll be making that soon.

Styling our Front End

Let's add some CSS styling to our form so it doesn't look plain. In the src directory, navigate to the App.css file and paste the code below inside.

body{
  background-color: rgb(63, 63, 63);
}
.App {
  text-align: center;
  width: 50%;
  margin-left: 25%;
}

.Heading{
  text-align: center;
  color: white;
}


.btn{
  padding: 9px 25px 9px 25px;
  background-color: blueviolet;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  color: white;
  margin-left: 45px;
  border: 1px solid transparent;
  border-radius: 25px;
}

 input{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
  border: none;
  border-bottom: 2px solid blueviolet;
  outline: none;
}

Your form should look like this

Using Hooks to setup our Form

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes. The source for this definition was gotten from javatpoint. That link has all you need to know about hooks if you don't know anything about them. Now we are going to update our code in the App.js file to introduce hooks. The first hook we'll be using is the useState hook.

import React, { useState } from "react";
import "./App.css";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleEmail = (e) => {
    setEmail(e.target.value);
  };

  const handlePassword = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    alert("User Added")
    const userData = {
      email: email,
      password: password,
    };

   try{
    const add = await fetch("http://localhost:5000/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userData),
    });
  console.log(add)
   }catch(err){
     console.error()
   }
  };

  return (
    <div className="Heading">
      <h1>Learning Client and Server Connection</h1>
      <div className="App">
        <form onSubmit={handleSubmit}>
          <input
            placeholder="Enter Email"
            type="email"
            onChange={handleEmail}
          />
          <input
            placeholder=" Enter Password"
            type="password"
            onChange={handlePassword}
          />
          <button type="submit" className="btn">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

export default App;

Code Explanation

I know it seems like there's a lot to follow but don't worry I'll explain. We use the useState hook to take care of the states of our email and password fields. When using the useState hook, you need to first set the initial state of whatever item you want to work with. For example, if I wanted to change the age of a cat, I would first need to specify the cat's current age then I can now set the new age of the cat to be cat = whatever age I want to change it to. In order to keep track of what's being typed into the email and password fields in react, the onChange event is added to the inputs and then given the value of a function that will set the typed in value to be the new (initial) value. What I mean is, say the cat's age is 1 but I wanted to make it 2 I would keep track of my entry (which in this case is 2) with the onChange keyword then assign that to a function that would then set 2 to be the new age of the cat.

Note- If you look at the code, you see this

 const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

in this case, we set the password and email to be empty strings that way the handlePassword and handleEmailFunction can now update them to whatever is typed.

The handleSubmit function is what sends our data to the backend server we will be setting up next. We first start by preventing the default behavior of the form (Which is reloading the page on submit) then we create an object to hold both the email and password. Why do we create an object? Well, the reason is simple. We need to send those two pieces of information at once to the backend so it's easy for us to add them for a specific user. Since We are using fetch to post/send data somewhere we need to tell it what it should do with our data. First, we want it to post our data then we want the data to be stringified. That is convert the data to JSON. We are wrapping the code inside a try-catch block to help handle errors. If you look at the fetch() keyword you'll notice a URL inside the curly braces. That URL is going to be our backend URL. That is where the data from the form is sent to. We'll be creating our backend now.

Setting up our express-server

The first thing we need to do is create a new directory called server (It could be named anything). Change directory to this new server directory. once inside, run this command npm init this will set up our package.json file. Inside this file, we'll be able to see all the dependencies we use/need. The next thing we need to do is install the dependencies we'll need. For this particular task, we'll only be needing three things. One is CORS and the other is Express and the last is Nodemon. CORS is going to allow us to send the data across servers and Express will help us create our server quickly.
By now your app structure should look like this.

We'll now run this command, npm install express cors nodemon.
Note- It's good practice to install Nodemon as a dev dependency.
Once we've installed all the needed dependencies We need to set our start script so we can use npm start to just start our server with Nodemon. Open your package.json file and add this

"start": "nodemon index.js"

just below the test line in the package.json file.

Server Code

We'll be adding the code below to our index.js file in our server directory.

const express = require("express");
const cors = require("cors")
const port = 5000
const app = express()

app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())


app.post("/", (req, res)=>{
   const {email, password} = req.body
   console.log(`Your Email is ${email} and your password is ${password}`)
})

app.listen(port, ()=>{
    console.log(`server is running on port ${port}`)
})

Code explanation

So this is a pretty simple server-side code base. We have a simple post-end point that console.log's the data sent from the front-end.

Let's run the application

So make sure you have your react front-end running and then simply type npm start in your server directory to boot up your server. Once your server is up and running, go to your front-end and enter the data you want to be sent to the backend like this (See gif below).

Conclusion

There you go. You now know how to post data from your client-side to your server-side. In my next post, we'll be setting up authentication and authorization with JWT, Cookies, and a SQL database. In that post, I'll be showing you how to fetch and use data from a custom-made API.

How to connect your Client side to your Server Side Using Node and Express.

Sebastian Gbudje — Thu, 25 Feb 2021 01:15:01 +0000

Ever wondered how data is passed from your front-end (HTML, CSS, and JavaScript) to your back-end? Well, wonder no more. I'll be showing you a simple setup on how this is done.

Pre-requisite

1) You know your HTML
2) You have a basic understanding of Node.js (it's okay if you don't. Click Here to learn the basics of Node.js and its basic setups.)
3) Have some understanding of asynchronous programming.
4) Have Node.js on your computer.
Note: Download Node.js from the official website Here. Make sure to download the one that has the LTS on it. The installation is pretty straightforward. Just click next till it’s done.
5) Have some understanding of Linux terminal commands. (I'm guessing you probably have some sort of Linux terminal like Git Bash Installed)

Front-End Setup

I like to separate my client from my server-side so it's easier to deploy my application. You can create an empty folder on your desktop (You can name it anything. I named mine testapp) and then open it on your IDE and create a folder named client. Inside the client folder, we are simply going to create 2 HTML files. One called Login and the other signup. You should have something like this Inside the login.html, we'll do this inside. In the signup.html, we'll do the same except we'll add an additional input with a name attribute of "fullname".

code explanation: Now looking at that picture, you'll notice a couple of things. The form element is wrapped around the input element and the form element is given the action attribute and method attribute. What do those attributes do? Think of the action attribute as a guide, that directs the user's inputs or requests to the proper server-side route. It just carries the information to the appropriate spot on the server. Now let's talk about the method, what is that? The method just describes what kind of action the user is performing. There's the POST, GET, DELETE, PUT, and PATCH methods. Say the user wanted to click a button to get some information that would be a GET method or if they wanted to delete an item from their list then that would be a Delete method. If they wanted to update everything in their list, they would use a PUT method but if they only wanted to update selected fields in their list, they would use a PATCH method. for this tutorial, The user is trying to login into their account and that means that they need to send their data across to our servers, and as such a POST method is used. If you also look at the input elements, you'll see that we have a name attribute attached to it. What does that do? It is used to reference the form-data after submitting the form.

Back-End Setup

For our server-side, we'll be using Node.js and Express a Node framework to spin up our server. So let's begin. We'll First create a folder called server in the root directory. change directory into the server folder by typing cd server. You should have something like this.

Note: yours will look a little different. The reason my file path looks like that is because my testapp folder is in a folder called Learning Materials. Don't worry this will not affect your code.

Setting up dependencies

Since we are inside our server folder, we'll be typing npm init inside the terminal. Just press enter on all the prompts presented. This will create a "packge.json" file. This file will hold the dependencies our server will need to function. Once that's done, we'll then run another set of commands. In your terminal, type npm install express cors body-parser nodemon. These commands will install node modules along with those dependencies into your server. Your package.json file should look like this

Setting up server file

Next thing we need to do is create the actual file that will get get our server up and running. Make sure you are still inside your server folder. Next create an index.js. Now we'll add the following code inside it.



const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000



// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

//You can use this to check if your server is working
app.get('/', (req, res)=>{
res.send("Welcome to your server")
})


//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

//Start your server on a specified port
app.listen(port, ()=>{
    console.log(`Server is runing on port ${port}`)
})

Code Explanation: Remember those dependencies we installed earlier well we need to use them inside our index.js file. We need to import them into the file. We do that by requiring them and assigning them to a variable for easy use. You can name the variables anything but it's widely accepted to name them as you see here.



const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const cors = require('cors')
const port = 3000

What do those dependencies do? Good question. The first dependency is express. Express makes it easy to create a server with node without typing many lines of code. We first need to import it and then assign it to a variable called app that way we can easily use it anywhere. The next one is body-Parser. it is responsible for parsing the incoming request bodies in a middleware before you handle it. CORS(Cross-Origin Resource Sharing) Since our front-end and back-end is going to be on different servers, we need something that allows them to share data since browsers do not allow this for security reasons. We have a variable called port with a value of 3000(You can give your port any number). This is where our backend server will be. The last dependency is nodemon. This simply helps us to detect changes made in our server script and updates our server. Think of it as the live server for backend development. The next couple lines are of us just using the various packages we installed.



// We are using our packages here
app.use( bodyParser.json() );       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true})); 
app.use(cors())

The lines below describe our routes. The routes are where the users will send their login and signup information to and it's here we will either save the information and then respond to the user by signing/logging them in.



//Route that handles login logic
app.post('/login', (req, res) =>{
    console.log(req.body.username) 
    console.log(req.body.password) 
})

//Route that handles signup logic
app.post('/signup', (req, res) =>{
console.log(req.body.fullname) 
console.log(req.body.username)
console.log(req.body.password) 
})

Here, we simply tell express to set up our server on the port we specified earlier.



app.listen(port, ()=>{
    console.log(`Server is running on port ${port}`)
})

Let's Visualize

So to check if our setup is working, we need to start both servers. first, let's run our client. Since all we have are 2 HTML files, you can just run it with “live server”. This should open the HTML file onto your browser. Next, we need to run our backend server. Make sure you are still in your server directory/folder and then type nodemon index.js. This should open up your server on port 3000 or whatever port you specified. You should get something like this in your terminal Remember we left this ```javascript

//You can use this to check if your server is working
app.get('/', (req, res)=>{
res.send("Welcome to your server")
})

``` in our codebase to test if the server is functioning. Simply open up your browser and type http://localhost:3000. You can replace the 3000 with whatever port number you used and you should see the "Welcome to your server" message inside the browser. You should see this

Testing time

Before we start sending requests from the front-end to the server/backend, we need to make sure we specify where we are sending the information. Open up your client folder and click open both signup.html and login.html. Remember the action attribute on the form element we described earlier, well, we are going to add http://localhost:3000/signup which leads to our server signup route. You should have this for signup.html
and this for login.html
Now that's done, you can go to either the signup.html page or the login.html page enter some information in the input like this,
press enter and whatever you entered on the frontend will show up in your terminal like this

As you can see, the data we entered into our front-end shows up in our backend. We only console. logged the data. You could store the data in some database, respond to the signup attempt with a dashboard page, etc. If you've got any questions, feel free to ask in the comments below.

Git and GitHub For Newbies.

Sebastian Gbudje — Sat, 13 Feb 2021 23:21:55 +0000

I'm sure you've come across the terms Git and GitHub and wondered what they are and how they tie into your budding programming journey. Fear not I am here to help. At the end of this post, I'll leave links to two great videos to help you learn how to use Git and GitHub

What is Git

Before we define what Git is, I need you to know something. Git and GitHub are not the same things.
Git is a version control system for tracking changes in any set of files. So what is this version control I'm talking about? Well, Version control, is the practice of tracking and managing changes to files, code, etc. There are other version control systems out there like for example, Apache Subversion and Mercurial. So why are we focusing on Git? Well, Git is the most popular and the most used system in the tech industry right now. Let's talk about some common terms you'll see associated with Git and what they mean in regular English.

1) Repository: Think of this as central storage where everyone goes to store their code. This central storage also helps maintain the file history.

2) Trunk: Think of this as the main folder in the repository where developers add all their code to.

3) commit: Think of this as a process of storing changes from working copy (code you worked on in your computer) to the repository.

4) Branches: Think of this as creating a clone of the Trunk or some other folder.

5) Checkout: This command lets you move between the various branches you created.

Though there are a lot of commands/terms these will give you a basic understanding when learning Git.

What is GitHub

GitHub is a provider of Internet hosting for software development and version control using Git.
Think of GitHub as a giant server that lets you keep and keep track of your repositories and branches. GitHub lets you do things like report issues you find concerning an application, it could even serve as a portfolio for you as a web developer. You can use it to host your portfolio online for free and without much of the hassles that usually come with deploying. GitHub has way too many features to go through in this one post. I just wanted to give you a basic idea of what it was and some of its features.

Learn the basics of Git/GitHub Here

The links provided below are from an amazing developer, Youtuber, and Teacher called Colt Steele.

P.S: These videos were made in 2019 so I would want you to know one simple change that has occurred. In the GitHub video, the term "master" is used. GitHub no longer uses "master" but instead uses the word "main". So anywhere you see "master" just type in "main". Learn Git before GitHub.

Learn Git
Learn GitHub

Consuming API's with JavaScript for Beginners.

Sebastian Gbudje — Sat, 06 Feb 2021 22:21:16 +0000

Credit: The background Images I use are gotten from Storyset
In my last post, I talked about the importance of knowing how your data is stored/presented. If you are new to web development or coding in general, understanding your data structure is key to creating applications. In this post, I will be showing you exactly how this knowledge helps you create apps by building a simple app that gives random information about different countries using the The Country API.

What we are building

Concepts you will encounter

If you are new to coding, there are some concepts you'll see in this post that might not make sense immediately but I'll be leaving links to resources to help you understand them. Feel free to go through them first or just read the post and check them out later. I'll try to give some basic explanations to them in this post but I urge you to read up on them.
1) promises
2) Destructuring
3) The DOM

Things you'll need

1) A text editor
2) Live Server (Don't worry I went around and found some good short videos about installing a Live server for those who don't know how to or who don't have it.) click on your IDE name and it should take you to a video on YouTube that'll teach you how to set up your live server for that IDE.
Sublime
Visual Studio Code
Atom
If you don't find your IDE on the list, try searching it up on YouTube. I selected those three as they are the three popular ones around.

What is an API

I'll leave a resource below that explains in depth what it is but simply put, an API (Application Programming Interface) is a set of rules that allow programs to communicate with each other.
Learn About API's

Let's Begin

I like to keep my projects organized so start by creating a folder on your desktop. You can name it anything. I've called mine "API for beginners" once that's done you can open the folder in your IDE (doesn't matter which one). Create an index.html and app.js file. You should have something similar below.

Setting up the UI (The HTML)

Our HTML page isn't going to have much since the majority of the work will be done in the DOM. We are simply going to have a button, internal CSS style, and an empty div with an id of "template" where our app info will appear. It should look something like this. Style it however you please

Calling and Using our API

Before we can call and use our API, we need to know what it looks like. API's differ in their design. Some take a REST, SOAP, GraphQL architecture meaning that we might need a different approach when trying to use the API. "Hey, Sebastian, what do you mean by REST, SOAP, etc" for this question, I'll leave this here Explanation on the various API architectures. We are going to be calling our API using the fetch API and then console logging the result to the terminal.

fetch('https://restcountries.eu/rest/v2/all')
  .then(response => response.json())
  .then(data => console.log(data));

code explanation: The fetch API sends a request to the URL/API we provided asking for the information contained in it. The URL/API responds to our fetch request by sending the information. The next line of the code chains a promise that first parses the information the URL/API sent us and we add one more promise that sends the information to the console.log. "HOLD UP Brother, Hold UP!!!!". Yes, I understand that's a lot to take in, so let me break it down. When we request for the data from the URL/API, the data is sent in a JSON format (there are other formats like BSON) we then use the response.json() to change it into a regular JavaScript data type and then chain a promise that console.logs it. The .then() is the promise here. Think of it as saying "After you do task A, then move to task B then to task C". You can chain as much as you want. Now that we know what's inside that URL/API, let's pick the things we need for our application. We’ll need the name of the countries, the currencies, the region, the languages, and the population

Setting up our app.js

We'll start by adding a click functionality to our button:

const myButton = document.getElementById('fetch');
myButton.addEventListener('click', fetchInfo);

next we'll call the API and parse it before moving it to the displayUi function that'll process and render it to the UI.

function fetchInfo () {
  fetch('https://restcountries.eu/rest/v2/all') 
    .then(response => response.json())
    .then(jsonObj => displayUi(jsonObj))
    .catch(() => alert('API Could not be reached at this time'))
}

"What's that .catch()? It is used to handle any errors that occur. say for example the API server is down our app will notify the user instead of just crashing. we are now done with parsing the data so let's move over to the displayUi function.

 function displayUi (country) {
  const { name, capital, languages, currencies, population, region } = country[Math.floor(Math.random() * 150)]
  const template = `
  <div>
  <h1 id="head">${name}</h1>
  <p id="content"> This is a country with its capital in ${capital}. 
  The language(s) spoken here are ${languages[0].name}. 
The nation of ${name} is 
  located in the ${region} region with a population of ${population} and uses ${currencies[0].name} 
as it's currency</P>
  </div>
  `
  // did this so I would avoid the process of having a refresh/update button
  document.getElementById('template').innerHTML = template
}

code explanation: We pass the parsed data into our displayUi function as a parameter. Which is then destructured to get the specific information like the name of the countries, their languages, currencies, etc. Destructuring helps us reduce the lines of code we have to write. If we did not destructure, we would have to dome something like

  const name = country.name;
  const capital = country.capital
  const languages = country.languages

we would have to list out each item we wanted to use for our app like that. "Where did you get the name, capital, region, currencies ?" Remember that before we started, we first checked to see what the API data was like. It was stored in an array of objects and if you expanded it, you would see some key pair values like this.

As you can see, some of those keys have values that are arrays and objects, that also have nested objects and arrays. We set the country parameter to random so that we get random countries. Math.floor rounds a number down to its nearest integer while Math.random returns a random number. We combine both Math.floor and random then multiply by 150 so that we avoid getting the same information twice in a row.
The final part of that function simply sets up our UI template. We create some hardcoded sentences and then add the destructured properties to the parts we want to be populated by the API data. So places where you see ${Some name, it could be currencies, capital region, etc}. "Why did you add [0] after the languages and currencies ?" Remember what I said about the way your data is stored will determine how you use it. If you take a look at languages and currencies keys, their values are stored in an array of objects. Since some countries have more than one spoken language and more than one currency, We specify that we want the language in the 0 index of the array which would be the first object, and then use .name to get the key that holds the name of the language. That way even if a country uses 100 languages, we'll just pick the first one and display it. The last line of the function simply attaches our template variable to the id and our application data is displayed wherever that id is located on our HTML. Now that we are done, open up your application using a live server and try it out. If you get an error saying "fetch is not defined", add window in front of the fetch something like this window. fetch() and that should fix it.

Conclusion

This is not the most optimal way to do this. The API could have been narrowed to specific points and used. You can improve on this application but creating a search bar that lets you search for the countries you want or even a drop-down menu to help filter out things you don't want to see. If you notice any errors in this post or anything that isn't quite correct please drop me a comment and I'll get right to fixing it.

How to make applications from scratch without tutorials for beginners.

Sebastian Gbudje — Thu, 04 Feb 2021 20:56:18 +0000

Who this is for

You've been learning to code for a couple of months now, you are not from a tech background, been teaching yourself by watching tutorial videos, you have tried to make an app from scratch without using a tutorial video but cannot not seem to think of how to do it yourself. Well if this sounds like you then stick around and learn how to overcome this. I'll be explaining how I go about creating applications and what thought processes I employ to help me.

Always Plan

Before embarking on any project or task, make sure to always plan. The difference between a scalable and unscalable application is planning. Let's say you want to build an app, it could be anything. How do you go about it? First do some research. You cannot build something that you do not know the workings of (how it works). Find out if there's a similar app out there (trust me, there's most likely going to be one or two out there) and how it was executed. Once you know how it should function Think about the tools you want to use, if there is going to be persistent storage, how you want the UI(user-interface) to look, feel and the features you want to have then start thinking about how to implement it.

Think CRUD

If you've been coding or learning to code for sometime, you've probably come across or heard the term CRUD. What is CRUD? We can get as intricate as we want explaining it but we'll keep it simple. CRUD is an acronym that refers to the four functions that are considered necessary to implement a persistent storage application. CRUD simply stands for create, read, update and delete. So I want you to think about apps you've used recently, facebook, instagram, tiktok etc. What things do they have in common? If you guessed CRUD you got it right. Each of those apps lets you C- Create posts, videos, comments, likes etc. R- Read posts, view pictures, see like counts, see followers of other users etc. U- Edit posts, pictures, comments, profiles and update them etc. and finally D- Delete posts, pictures, comments, videos etc.

How CRUD Helps

Any application you are thinking about making is going to involve you either creating something, deleting something, updating something or viewing/reading something. The first thing to do before starting your project is think which of these four operations is my app going to need? Do I want to create something on a click of a button, do I want to just view posts, images, do I want to be able to edit things and do I need to delete Items. If yes to all or just one or two start thinking of how to structure your app.

App Structure

Let's say you want an app that lets a user add cat pictures, the first thing you should think of is how do I add pictures using code? Do some google searching and you will most likely find something to help. Once you cover the creating/adding part, you need to think about how you want your cat data to be presented/stored? do you want it in an array,

 let catPictures = [ catpic1, catpic2, catpic3, .... ];

array of objects,

 let catPictures = [{ catpic1: 'red-Cat'}, {catpic2: 'blue-cat' }];

or in an object

let catPictures = { catpic1: 'red-cat', catPic2: 'blue-cat' };

Once you've decided how you want your created data presented/stored you can start thinking about editing and deleting. You're probably wondering "why should I worry about how my created data is presented?" Well the answer is simple. The way you present the cat pictures will determine how you Read the cat picture data and render it on your user-interface (Front-end built with either HTML or React), Update information or edit information about the pictures and Delete the cat pictures data. Let's assume you decided to store your cat pictures in an array, the next thing to do is google, "how do I render the data in my array?" Depending on what you are using, say you are using vanilla JavaScript and HTML you would simply do a google search on how to render/display array information into HTML. Once you've figured out how to display the data, the next thing would probably be how to edit the cat pictures. Again based on how your cat pictures are being presented/stored, you can simply google how to modify contents of an array (assuming you store/presented your data using that) and do the same for deleting/removing. With this, you would have created your first app without a tutorial.

Conclusion

This is a personal take on how I approach making projects. It is by no means a one all thing. There are many ways to go about making applications without using videos and depending on the application idea, you might need to know some more concepts but this is pretty much a general guide. The core thing here is deciding how you want your data to be stored or if you are consuming an API, figure out how the API data is stored. Once you know how the data is stored, you can easily modify it and utilize it however you want.

Journey of a self-taught Developer

Sebastian Gbudje — Tue, 02 Feb 2021 02:17:24 +0000

This here is going to be my first of many posts and I wanted to make it a short read. My next posts are going to focus more on things I have learned, tutorials, or just code projects I am working on.

Backstory

For as long as I can remember, I have always been in love with computers and I always thought I would end up going to college for a degree in Computer science but that was not the case. After concluding on my own that I would need an insane level of mathematical skill, I decided against computer science as a major and ended up in Psychology. While still in my third year of college, I got heavily into video games and felt the urge to make my own. One quick YouTube search and I started following tutorial videos centered on using the Godot game engine to make games.

Hello World

I began making platformers(platform type games) but still knew nothing about programming languages. One day while talking to a friend about my newfound hobby, he suggested I give web development a try and said it would help me gain great knowledge to make games. I decided to give it a try. I started learning JavaScript and from the moment I made my terminal output Hello World, I was hooked. I wanted to do more things, make my scripts. And so I got to learn about the three musketeers of front-end Web development (HTML, CSS, and JavaScript). Started reading "For Dummies" books on JavaScript and following the set-out tutorials.

Reality Set In

After several failed attempts to make a project or finish an assignment without following a tutorial, it kind of hit me that maybe this was too hard for someone with no computer degree and that maybe this was for geniuses only. One thing about me at the time was that I was stubborn. I had always thought that I was good at school-related work and that it was probably because I had no time between school and work, to learn properly. Armed with that excuse as my weapon of choice, I persevered and went back for round two.

Another crushing defeat

After about 3 months of constant learning, I was still unable to create things from scratch. At this point, I was devastated and felt like giving up but thank the heavens for Twitter and YouTube. After learning that this was pretty much the norm in the tech world and changing my study strategy, I was able to make things kind of work. I spent more time reading books, more time typing, and more time drilling the basics into my brain, I kind of got a grasp on how things worked. I created my first project, which was a simple to-do list all on my own and I was ecstatic. I went down a hole of making projects, learning new technologies, and started tweeting more about my code-related activities.

How it's going

I spent the entirety of my third and fourth year learning new web technologies like react, node, express, MongoDB, PHP and have since been building projects using those tools. I graduated about six months ago and since then, I have spent my time building projects in hopes of landing my first real role in tech. I have recently started contributing to open source and learning about the basics of ethical hacking. Just yesterday I spent some time working on some subnetting problems. There are still ways to go but I keep looking.

For others

In case you are learning and you feel like you are not good enough or are struggling, I just want you to know that as long as you keep practicing, you will get better at coding. Learning to code is difficult and I won't lie to you. But the joy you get from just seeing yourself solve problems you thought were impossible and just feeling like you to some extent, know what to do in a field you knew nothing about just a couple of months or years ago is just unreal.