Forem: DAVID IKUKOYI

React Notes app with firebase authentication and storage

DAVID IKUKOYI — Thu, 17 Nov 2022 21:04:33 +0000

Introduction

This tutorial is going to be a guide on how to create a simple notes application also provided with firebase authentication. This topic covers basic essential concepts like prop drilling, state hooks and javascript higher order functions like the map and filter. Though a simple and basic app, I particularly picked this project because it tends to cover many basic features for beginners and experts and also treats the firebase authentication with google sign up. Understanding this tutorial will help you solve any mundane task that could come your way. I advise that you practise this course which you can also add to your portfolio. I will be discussing more of functionality than styling. You can fork or copy the app in my github repo.

Creating react notes application

To start this project, run npx create-react-app appname. I talked about how to install react on your pc here. Another essential tool for this development is tailwind for our styling, to install it, run these commands simultaneously

npm install -D tailwindcss
npx tailwindcss init

Tailwind provides an intuitive documentation on how to set it up here. The last tool for this project is the firebase, to install it, run npm i firebase and we are set to build a notes application. I am very excited for the next phase.

Configuring firebase

After installing firebase, we have little configurations to create on the website. To start, firebase requires that we create a project on the website, I will call this react-todoapp, after registering the app, you are immediately provided with a config file, this is the basis file for building our firebase auth, in the src folder, I will be creating a services folder and firebase.js file where I will copy the configuration file, this config file can also be added directly to your app.js, it all depends on preference. I will also import some packages to this file and initialize my auth before exporting it.

import { initializeApp } from "firebase/app";

import {getAuth} from 'firebase/auth'

These are firebase packages for initializing auth, the full file looks like this,

import { initializeApp } from "firebase/app";

import {getAuth} from 'firebase/auth'

const firebaseConfig = {

    apiKey: process.env.APIKEY,
    authDomain: process.env.AUTHDOMAIN,
    projectId: process.env.PROJECTID,
    storageBucket: process.env.STORAGEBUCKET,
    messagingSenderId: process.env.MESSAGINGSENDERIS,
    appId: process.env.APPID,
    measurementId: process.env.MEASUREMENTID,

  };



  const firebaseApp = initializeApp(firebaseConfig);

  export const auth = getAuth(firebaseApp);

With the package I imported, I initialized my config and exported it, this will be useful in authentication going forward.

Creating application logic

A notes application is basically a list of notes displayed in a stack of items and arranged accordingly, to create this, I will be using an array, array in javascript has powerful functions to help create this application.
With the use of the useState hook, I will create a listItems state where each notes will be added to display to user
To use the useState hook, we start with importing the useState hook

import {useState} from 'react'

let [listItems,setListItems]=useState([])

The useState hook uses a destructuring method to access and set items, the listItems is the array and the setListItems is the setter, I mentioned in my post here that react treats data as immutable. we will explore more on this as we move on.
Since this is a note app, it will be nice for us to be able to see our recorded notes on a later date logging in to the platform, to persist data on this app, we will be using the localStorage API to keep our data local to that particular browser so that we can access it when going back to the website.

Note

Firebase provides a store function called firestore but we will not be exploring it here

localStorage API

The localstorage is a browser API that allows you to use browser storage to store files with get and set methods

localStorage.setItem(itemName,item)- // for adding a string to the API, it requires a name for setting and retrieving item;
localStorage.getItem(itemName)- // for getting stored items;
localStorage.removeItem(itemName)- // for deleting an initial stored item

However, the API stores only strings which leads us to using Json methods, JSON.stringify() to convert our arrays to strings and JSON.parse() to retrieve them from string methods.
The useState hook basically accepts a function as long as it returns a value

import {useEffect,useState} from 'react'

function App(){
let store=localStorage.getItem('Todo')
let [listItems,setListItems]=useState(()=>{
if(store){
return store;
} else {
return [];
}
});

useEffect(()=>{
localStorage.setItem('Todo',JSON.stringify(listItems))
})

return (
<div></div>
)
};

This method is basically means that on initialization get the Todo property from localStorage then on the useState hook, if the store from the todo property is available, initialize it as the array else set an empty array.

With these methods set in place, we basically have a basic front end CRUD app, we can return a list item with the use of map. The map function is a higher order function that helps transform an array and returns another array. I will write more on this in the future.
A major challenge I noticed is that newbie devs don't know how to return values, I also faced this challenge, when using map, to return an item is something like this

listItems.map((val)=><li>{val}<li>)
or
listItems.map((val)=>(
<li>{val}<li>
))

This will work because arrow functions has an implicit return and the second method also works. Another majorly used method is this

listItems.map(val=>{
return (<div>{val}</div>)
})

Because of the bracket, I have to return a value hence this one. Moving on to the project ;

return (
<div>
{
listItems.map((val,i)=>{
return (
    <div className="items flex justify-evenly p-4 border-slate-300 border w-fit rounded-md mt-2 shadow-md dark:shadow-sm dark:shadow-white" key={i}>
    <div className="w-11/12 mr-4 dark:text-white leading-6">
                    {val}
                  </div>
                  <button className=" p-1 rounded-md"
                    onClick={() => {
                      setListItems(listItems.filter((val, id) => i !== id));
                    }}>
                    <MdDelete className="dark:text-white" />
                  </button>
                </div>
)
})
}
</div>
)

That is all there is to the note app, the classes there are tailwind classes. I added a method to the button. This method is meant to delete unwanted notes from our note app however this method may seem unconventional, to carry out an operation like this, we are supposed to have an array of objects with an incrementing or unique ID for tracking our items

listItems.filter((val,id)=>i!==id)

This method filters id crosschecking id from our mapped array thereby giving us a new array so we set this new array to the listItems

setListItems(listItems.filter((val, id) => i !== id));

We need to create a modal for an input element to add notes to this app. This part can be a bit confusing as it involves prop drilling, to create the modal, we are creating a new component called the Modal.jsx. Prop drilling is basically passing data from a component to another component.

I will drop the component for the modal here

import React, { useState } from "react";

import { VscChromeClose } from "react-icons/vsc";





const Modal = ({ show, onChange,onClose }) => {
  let [inputValue, setInputValue] = useState("");
  let handleData = (e) => setInputValue(e.currentTarget.value);
  return (
    <div
      className={`p-10 shadow-sm dark:shadow-white dark:shadow-sm rounded-lg z-30 dark:bg-slate-600 shadow-black md:overflow-y-auto h-80 max-h-96 blur-none bg-white  flex m-auto fixed  md:left-72 top-28 left-16 w-3/4 md:w-2/4 ${

        show ? "block" : "hidden"

      }`}

    >

      <div className="w-full">

        <div className="header flex justify-center relative">

          <h2 className="font-bold dark:text-white">Add an Item</h2>

          <button className="absolute right-0 hover:bg-red-300 rounded-full p-2 hover:text-white" onClick={onClose}><VscChromeClose className="dark:text-white" /></button>

        </div>
        <main className=" p-6 mt-6 flex flex-col relative h-3/4">
          <div className="h-3/4 w-11/12 m-auto ">
          <input
            type="text"
            name=""
            id=""
            placeholder="What's happening?"
            onChange={(e) => handleData(e)}
            value={inputValue}
            className="outline-none pl-4 text-start dark:bg-slate-500 dark:text-white rounded-md w-full h-3/4"
          />
          </div>
          <div className="absolute md:bottom-0 top-40 md:left-96">
            <button
            className="p-4 text-white font-bold bg-blue-400 rounded-3xl dark:text-gray-200"
              onClick={() => {
              if (inputValue.length!==0) {
                  onChange(inputValue);
                  setInputValue("");
                }
              }}
            >
              Post Item
            </button>
          </div>
        </main>
      </div>
    </div>
  );
};

export default Modal;

With the use of state, we set our input value to state then pass a method to the button that passes this data to the parent component.

 let [inputValue, setInputValue] = useState("");
  let handleData = (e) => setInputValue(e.currentTarget.value);

The handleData is added to the onChange method of the input value then we create a method for the submit button

 onClick={() => {
              if (inputValue.length!==0) {
                  onChange(inputValue);
                  setInputValue("");
                }
              }}

This means that if our inputvalue state's length is not 0, execute this method, we then invoke the onChange and setInputValue to string , this is different from the onchange event listener, this is a prop passed from the App parent component like this

<Modal show={show} onChange={handleChange} onClose={closeToggle} />

The method handleChange was passed as a prop to the modal component. The handleChange method passes the data from the inputValue state to the listItems state with the rest method

 let handleChange = (e) => {
    setListItems([...listItems, e]);
    setShow(!show);
  };

The setShow method is responsible for toggling the modal with the closeToggle method

 let closeToggle = () => setShow(!show);

Authentication

To authenticate this app, we will be using firebase which will setup earlier, firebase provides a rich amount of authentication methods to draw from, we will be using google auth for this project, firebase as different methods for this, we will be using signInWithPopup method.

We import some methods first and also import our auth config file we set up initially

import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { auth } from "./services/firebase";

Then we create a signIn button that stands as a wall to accessing our notes application

let signInWithGoogle = () => {
    signInWithPopup(auth, provider)
      .then((result) => {
        const user = result.user;
        setVerifiedUser(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        console.log(error, errorCode);
      });
  };

The signInWithPopup returns a promise which we can attach then and catch methods, we set the result gotten to a state hook, setVerifiedUser(result) . To create the wall, we use an if statement which checks if the verifieduser user is available

 if (!verifiedUser) {
    return (
      <div className="w-screen p-4 justify-center content-center flex h-screen">
        <div className="w-11/12 flex flex-col justify-center content-center">
          <div className="w-full p-4 h-2/3 flex content-center justify-center">
            <div className="max-w-[80%] m-auto h-full">
            <img src={Man} alt="" className="w-full" />
            </div>
          </div>
          <div className="flex flex-col justify-center content-center">
            <h1 className="font-bold text-center text-xl mb-4">The Notepad</h1>
            <button
              className="p-4 text-white w-32 rounded-lg capitalize self-center text-center bg-blue-500 font-bold"
              onClick={() => signInWithGoogle()}>
              get started
            </button>
          </div>
        </div>
      </div>
    );
  }

This whole process works in localhost but when deployed, firebase requires that you add your website address to the accessibility settings in your console for firebase.

Firebase returns some methods like the photoURL, displayName, emailId among other methods which you can plug to your app. I used the photoURL and displayName in this app. You can explore it how you like

Firebase also provides a hook to do all the background work for you

First we install firebase-hooks

npm i firebase-hooks

Then we import this and add some methods, the hooks provide a loading state, error,signIn method and user state


 import { useSignInWithGoogle } from "react-firebase-hooks/auth";
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);

Conclusion

This is also all we need to deploy firebase to our app.

This is all to creating a note authenticated app. The full repo is here and also the hosted project is here.
I will be glad to get your feedback and difficulties from this course in the comments. Also, do one better, make a note app and show it off here.

Recently, there has been a trend of bad news in the tech industry which is leaving many people in doubt. I have cause to tell you not to fear, the only thing to consider is continous self improvement which I am here to help you with, the market always adjust itself and this is one of those days, people are still getting good jobs now.

Life as a junior developer

DAVID IKUKOYI — Mon, 04 Jul 2022 09:17:19 +0000

Tech is the new money. Tech changed my life. Tech can be learnt with a guaranteed job under three months. Tech gives you freedom of time.

Those are the various half baked truth sold to new comers (muggles) to convince them to go into tech. As a junior developer, many people continue to go in circles in their first month trying to decrypt different concepts and patterns completely strange to them.

A major issue with many people now is that they got convinced through the media so there is no personal guide to hold their hands. As a new developer, you need a personal guide to direct you on the correct steps in other to do anything meaningful otherwise you will be stuck in tutorial land.

I remember when I first started with Javascript, I was otherwise a bit familiar with HTML and CSS but coming to JS, I read a book of about 900 pages studying different concepts. In fact, I could tell you what I learnt if woken from a deep sleep but it came time to implement and I became blank. Why? Funny thing, I was scared of writing code just so I don't get an error but for goodness' sake, how do you get a result without putting input? I started playing with console.log() then I was able to inject text with innerHTML(). It worked like magic because gradually, I started working on different things including the almighty function and return statement.

Before I continue, here is a schema, "for you to understand anything, you have to work everything you have learned to make it stick."

Another issue is how to get money.

First of all, I feel that before you transition a person into tech, direct such person on how to get passive source of income while learning in other to maintain body, spirit and soul. I got into tech after quitting my job calculating my risks with the hope that I could land a job within three months. Oops! I just fell into brokeland, and slowly, I blew out my savings on data subscriptions and other bills which just made me frustrated at this point. When you can no longer foot your bills, you get frustrated at this point because NOBODY will understand what you do except staring at a computer screen for hours on end wasting away time. Your family members start nagging and comparing you to friends working and how they are going to be able to purchase their first cars before you. You may act bold and all but don't lie, this gets to you and hurt you deeply. I have faced this a lot and remember how I sometimes cold email companies to grant job offers even without compensations as long as I can foot transportation bills and leave home everyday.

Market is hostile to newcomers

I don't know if this is as a result of overcrowding but the barrier to entry is just ridiculous. I was first directed to take freelance gigs which I did but on signing up and setting my price, I put my price to $20 to at least get a first client, could have set it lower on upwork but I guess their terms were not allowing it at that point, bidded for entry level, intermediate and what not, but couldn't find anything. I guess people want to see testimonies first and I get it. No one wants to waste their money but even after posting projects, could not get anything. Then coming to the jobs, phew! you don't just get any and when you get, they require you to know things that even full stacks just learnt. I get it, you are looking for value but these things just take time to learn, I cannot create an algorithm that creates youtube websites on clicking a button that says 'create youtube template websites'. I need time and mentoring but it is what it is. As the saying goes, 'grow or die' so I keep growing till I can get that job and say 'I made it, time not wasted'. Till then, 'e go be'.

I created this post for everyone out there especially the new developers to tell them that they are not alone'. Kindly subscribe to my blog, I will be posting new contents for learning and if possible, job opportunities to help people. Feel free to get across to me anytime.

Mydigicard: Personal project

DAVID IKUKOYI — Fri, 01 Jul 2022 20:36:27 +0000

It was a fine evening relaxing with friends chilling in the silhouette and making merry for Friday when a friend complained about a meeting he went for and on rounding up discussions he discovered that he forgot his business card at his office. There and then, I realized that things can be made simpler and easier. Why not just have your details on a QR that stores your information that can be easily scanned. I bet no one forgets their phone these days.
Empowered by this thought, I got my hands dirty and started working on code and I developed this project called mydigicard with ReactJS which features your basic card information.
This idea can still be improved upon with other integrations like location API and other important day to day information.

Kindly show off your works in the comment section too. This is a form of self appreciation.

DATA TYPES

DAVID IKUKOYI — Fri, 01 Jul 2022 20:01:05 +0000

A major leap stone to understanding javascript and eventually other frameworks is by understanding the basics which is the data types. Data types in javascript are classifed into two groups which are

PRIMITIVE TYPES
REFERENCE TYPES

Primitive types are data types that have no methods or properties. They are data types that cannot be changed. They are largely classified as immutable types which means they cannot be changed. Primitive types include

Strings
Numbers
Null
Undefined
Boolean
Symbols

The symbol being the latest addition to the pack. The string can be dicey because we perform some manipulation on them like split method which converts it to an array for further manipulation but these methods are not actually performed on the string but the reference to the string. I will show you.

let a='mango'; a.split().slice(); //['m','a','n','g','o'] --expected output console.log(a) //'mango' --expected output

Those methods were not actually performed on the string but a reference to the string. Strings are immutable properties. For you to change them, you have to reassign them. This feature makes them comparable which means string a is always equal to string a. All primitive types are comparable.

let foo=false; let boo=false; console.log(foo===boo) //true

REFERENCE TYPES

These are data types that can be muted, operated upon, manipulated and they also serve as storage containers too.
The three types are

Object
Arrays
Functions

These types are defined as reference types and they are mutable properties which means that they can be operated upon. No two objects are the same except if they are directly referenced to each other

let c={name:'cat'} let d={name:'cat'} console.log(c===d) //false

However, if we reference an object to a variable, it equates to true

let m=c console.log(m===c) //true

Understanding these concepts are vital in understanding javascript and frameworks too especially react. For instance, react expects you to treat objects and arrays as immutable properties. I would be talking about different types in subsequent posts.