Category Archives: Project Log

My collection of web development projects.

React Components: Bootstrap Card, Github API

I’m dabbling with React 18, displaying data in a separate component using hooks and fetch.

Introduction

Let’s build this. A simple React app which accesses Github’s REST API and prints a user’s profile into a Bootstrap 5 card interface.

What’s the Goal?

Create a separate component that displays a person’s Github profile.

What will we need?

  • Stackblitz – to quickly prototype a React project and its dependencies.
  • React Bootstrap 5 – to grab some ready-made user interfaces (e.g. cards).
  • useState – to handle the data.
  • useEffect – to make the call for external data.
  • Github REST API – the data source we’ll need to access and display a user’s profile.

Step By Step

Step 1: Create React App

From Stackblitz, click New project button and choose React JavaScript.

Step 2: Install Dependencies

From Stackblitz, open a new terminal and run: npm install react-bootstrap bootstrap

Step 3: Add Dependencies

From Stackblitz, add line 5 of main.jsx, import bootstrap.min.css.
From Stackblitz, add lines 5-8 of App.jsx, import React components Card, Container, Row, Col.

Step 4: Setup Hooks in Function, App()

From Stackblitz, App.jsx.
  • Line 1: import useState and useEffect.
  • Line 35: set a constant which de-structures an object called data and a method called setData which initially sets the data object’s value to null.
  • Line 36, 40: set up useEffect() method and pass in a callback function. Take note of line 40, where an empty array is assigned in order to make this request once when the application first renders.
  • Line 37: use built-in fetch method from the browser to make an HTTP request from Github’s API.
  • Line 38, 39: The first then takes the response and turns it into JSON and chaining in another then method will take the result of that JSON and pass it into the setData method defined on line 35.
  • List 41, 71: Set up an if statement to return the HTML if data exists.

Step 5: Create Function, GitHubUser()

From Stackblitz, App.jsx, lines 10 through 33.
  • Line 10: pass in the props of your choice for display. In my case, name, created at, avatar url, company, html url and blog keys have the values I want to display as HTML elements on the page.
  • Line 11, 26: Concatenate secure protocol since it was not included in the original API call and pass that into the Card Link component.
From Stackblitz, App.jsx, lines 59 through 66.
  • Line 59 – 65: Once the conditional (line 41, 72) evaluates to true, the data object will be available for props to be passed into the GitHubUser component.

Key Takeaways

Outside of a successful call, data can be coming in many different states such as loading and error. This is due to the dependency of calling in a third party API. Extend this example by leveraging additional useState hooks, conditional rendering and catch method to display HTML which reflects those different use cases.

Additional Resources

Review of The AI Exchange

How It All Began…

AI this…AI that…AI this…AI that. AI. AI. AI. All the things AI.

Photo by BoliviaInteligente on Unsplash

Ever since AI found itself into our hands back in November of 2022 by way of Chat-GPT, it’s been really hard to ignore the topic and its accelerated adoption from both a professional and personal perspective. In year ’22 my eyes had a laser-like focus on Web3 and the blockchain but the noise of AI quickly took over. Since then, it’s been hard for me to discern what resources I’d need to ramp up on this vast ecosystem. Obviously, I was inundated with too much information from endless Google searches leaving me with nowhere to start.

Analysis paralysis, 1. Mark, 0.

Thankfully, a little Meetup bird dropped a note in my inbox for a Seminar Series called Optimize Your Time With AI hosted by Rachel Woods of The AI Exchange and after digesting the ins and outs of that presentation, I was intrigued to learn more. Could I have possibly discovered the intel I needed to initially succeed with AI?

Maybe.

Thus Far…

In a nutshell, what compelled me to pursue further intel from The AI Exchange was based primarily on the insights I received from the original Meetup. In that alone, Rachel guided me on how to use Chat-GPT more effectively when paired with some consistent tactics. Still intrigued, I wanted to learn more and found myself on their website, eventually clicking the Enroll button on a course called, Prompting for AI Operations.

Interesting.

Current Thoughts…

I can’t quite put a pin on it yet, but yes, there’s something special about this domain! Once enrolled, my initial assumption was that it’d simply be a course powered by an LMS (Learning Management System). On the surface, it is still very much that but it doesn’t stop there. The AI Exchange turns out to be much more than that. It’s offering is paired with a very condense playbook on how to communicate with LLMs (Large Language Models), ancillary tools you can use to help you scale out tasks by way of prompting and there’s a worldwide community within this domain conversing on all aspects related to AI. I’ve barely scratched the surface on the content (at the time of this writing, I’ve reached the end of Part 2 of the course), however, The AI Exchange is definitely a path worth considering for both technical and non-technical audiences who are curious on how to possibly adopt AI into their everyday work.

Mighty Morphin Data Structures, Part 5

Introduction

The goal for this season of AllWebSD is to deconstruct lessons learned from going head first into data structures. It’s my hope that I can translate a complex topic into an easy-going format and I’ll do so by channeling my inner 10-year-old self. You see back in my day, I was a big fan of the original Mighty Morphin Power Rangers series. So I’m going to take snapshots from that show and brush it with some code.

Information on data structures are abundant. To be honest, you don’t have to invent this. And frankly, neither did I. Hence, the code is pre-baked and available on Github.

The additional and intentional challenge here is that this is in audio only. If you can follow along, awesome. But remember, the source code is on the repo. I’ll upload a video as well, just in case.

That said, are you ready? Alright then. It’s Morphin Time!

The Situation

We need DinoZord power now!

Recall from our last episode that we’ve reprioritized the emergencies based on our priority queue. Now it’s time to call on the power of MegaZord by assembling the DinoZords. We’ll do so with a stacked data structure.

This introduces us to the concept of LAST IN FIRST OUT.

The Data Structure

function createStack() {
	// Store our items in an array held in closure.
	const stack = [];

	// Return our stack as a plain JS object.
	return {
		// Place new items at the end of the array.
		push(x) {
			stack.push(x);
		},
		// Remove the final item in the array. This ensures order is maintained.
		pop() {
			if (stack.length === 0) {
				return undefined;
			}
			return stack.pop()
		},
		// Return the last item in the array.
		peek() {
			if (stack.length === 0) {
				return undefined;
			}
			if (stack.length === 5) {
				return 'MegaZord activated!';
			}
			return stack[stack.length - 1]
		},
		// Use a getter ensures we always get the current length.
		get length() {
			return stack.length;
		},
		isEmpty() {
			return stack.length === 0;
		}
	}
}

Conclusion

That’s it! I hope you enjoyed learning about data structures with a mighty morphin twist. Let me know your thoughts on this choice thus far and other paths that could’ve been considered.

Thanks again for listening in. Remember, I’m here to foster innovation through conversation. So if you’d like to continue this discussion or any topics previously discussed, join me at San Diego Tech Hub and go head first into the AllWebSD Group. It’s totally free. Just visit this link or click San Diego Tech Hub on the footer of AllWebSD.com. Thanks and Aloha!