Building in Public: My React Journey in Image Layouts – The Drama-Version

EP ONE: react-image-rendering

Prologue:
Welcome to Building in Public The Drama version: This is where coding meets storytelling. This series is not just about coding and explanations. It's more than that, it's a story, A story about an addiction, betrayal and lots more. I hope you all would love it.

For the Abridged Version without the drama,
Codes and Expalantions only click this Link:

For the rest of us, Let's get the party started.

Word of Note:
This version, like its sister version the Abridged version, would be broken down into ACTS and PARTS. Links to updates would be attached for you all to follow.

ACT 1:PART ONE:
INTRO/SETUP:

{voke walks up to the stand and mic.[clears throat] He can see about 3 cctv cameras in the room, meaning people are watching the events taking place here from an unknown location}.

voke: Hello! {then stares at the audience in the group}

someoneFromTheAudience: {yelling...} Is this your first time?

lisaLippss: I think it's kinda hot, i need a fan;

jamesBurn: & What did you say?

lisaLippss: You heard me.

{after a long pause...}

voke: Hello everyone, my name's voke. And i am an addict.

everyone: Hello voke.

ACT 1:PART TWO:
CONFLICT ESTABLISHMENT:

voke: It's been a tough journey for me and being here today is a big step.
I got a problem, a serious problem. And no matter how hard I try I can't go sober. Coding keeps chasing me like Jason in a hockey mask. One second, I am building. The next minute, I am debugging. The next hour, I go sour in a shower, after breaking down things. I came here, and can't believe I brought the "code in" like "codeine". I am really addicted to "coding". And "men" it's "mern". And anytime I sleep I see codes. You would think i am halucinating, like i just p*pped a pill. When I am alone, these codes talk to me. I hear them telling me to display flex(dispaly:flex), console.log("this"). All day, i "c.s.s". I feel I am possessed. I can't sleep, i can't breathe, i can't eat.

mikeAngelow: Whaaaat!!! {looking in disbelief}

voke: Alright you dont believe me, let me show you something right here, right now. Let's build in public. Let me give you a demo, no playstation. And I swear Father Damien won't attempt to exorcise this demon this time around.

ACT 1:PART THREE:
SOME DEMONSTRATION OF SKILLS:

{voke picks up a laptop and plugs it to the 55 inches tv in the center of the room.}

clicks on visual studio code icon {goes to View in the top part in between Selection and Go, then clicks on terminal. Then in the terminal below he types}:

   cd visual_testing
``
To navigate inside the folder 
``bash
  cd building-in-public

That's to get inside the building-in-public folder

 dir

That's to check inside the building-in-public's directory.

 mkdir react-image-rendering-slack

That's to make a new folder

  cd react-image-rendering-slack

Then he proceeds to type this :

npm create vite@latest .

The response he gets is:

Need to install the following packages:
    create-vite@5.5.5
    Ok to proceed? (y) y

He click on the y option

Select a framework: » - Use arrow-keys. Return to submit.

He chooses React.

Select a variant: » - Use arrow-keys. Return to submit.

He chooses Typescript.

voke: We will be using Typescript.

mikeAngelow: Typewhat?

peterPants: This dude isn't normal

The response he gets from clicking Typescript is:

 Scaffolding project in C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\react-image-rendering-slack...

    Done. 
    Now run:
    npm install
    npm run dev

_VITE v5.4.10  ready in 488 ms_

  _➜  Local:   http://localhost:5173/ 
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

{voke runs this: (ctrl + click) on httpx://localhost:5173/ to open the page up in the browser locally}

ACT 1:PART FOUR:
STARTUP:

voke: Now we have successfully started this badboy up. you can see what's on the screen, a vite logo, react logo and a counter.

voke: Here, you can see the picture right there below is the image attached

lisaLippss: Cooooooool!!!

johnnyInglish: woooow!!!

peterPants: that's not possible.

sherlockHomez: hmmmm!!! {taking his pipe from his mouth}

{Meanwhile, there's a guy at the back in the dark, baseball cap obscuring his face. He remains silent and very calm}

voke: No addition, no subtraction. This is my life, and you are all welcome to My ADDICTION. I 'll catch you in ACT 2.

Outro
About the writer: Voke Bernard is a passionate {obsessive} and ambitious M.E.R.N developer. Building of Reactjs && Expressjs applications is all he does. He is currently open to work, Feel free to reach out.

updated this 13-11-24
Call to Action:
If you want me to continue with the ACT 2 let me know in the comments.