EPIC APIS

collection of fun, odd, quirky application programming interfaces paired with complementary resources built with semantic html - all peppered in event listeners

VISIT EPIC APIS LIVE

epic apis summary

epic apis data flow

note: this is more accurately a process/data flow diagram

trello project management

frontend github repo

backend github repo

---

CODE CAVALRY

but first, my mentors rock.

max has been and remains primary re: project-based code/web dev while also helping initiate me into the code world of algorithms. max was among my first instructors as i began my coding journey in hack upstate 'careers in code'. max demos a rare blend of know-how and get-to in his role as a code master. and he doesn't shy from telling me i already know when he sees my confidence hiding, he doesn't shy from settling into his lecture mode when he sees me lacking self care, he doesn't shy from being someone to just listen when it's clear that's what's needed at that time.

adam has insane skills re: code refactoring, as routine outlines theory versus application/implementation, and enthusiastically encourages me to own my code.

danny has been a tremendous support re: debugging miscellaneous errors and warnings in the console - including introducing me to advanced concepts in chrome and react-specific dev tools. this is especially notable because it helps my growth mindset push beyond just getting my code to work. but instead pursuing a sense of elegant code integrity.

jess has inspiring code flow that impeccably reflects novice-coder mindset dressed in raw mastery, and is dogged re: producing optimized code output.

adam, danny, and jess have been exceptional supports re: expanding my knowledge and skillset to include algorithms and advanced project-work. they are part of the team assigned to pair program 1:1 with me through underdog devs 'project underdog'.

each of these mentors excel in part, in my experience-informed opinion, because they consistently share compassion, patience, and sincere interest in my code/web dev ambitions. they make me feel like i can, and they do what they can to ensure i do/will.

my mentors (and peers) include gems. thank you adam, danny, jess, max, and others for being you and doing what you do.

* MAX MATTHEWS, Tuzag Chief Technology Officer

* ADAM FLETCHER, Bit.io Chief Executive Officer / Founder

* DANNY JACOSHENK, Pilot Software Engineer

* JESS BONANNO, Slack Software Engineer

---

HOW EPIC APIS WORKS

per the api setup of each api. each api is built into an engaging user interface.

some apis simply output content:

• Chuck Norris (random joke)
• CockTails (random drink)
• Donald Trump (random quote)
• FOAAS (random eff-off)
• Owen Wilson (random wow)
• Ron Swanson (random quote)

other apis accept input to produce a result:

• Agify (accepts person name)
• Marvel (accepts creator name)
• Pokemon (accepts pokemon name)
• Star Wars (accepts starship name)

WHAT EPIC APIS DOES

epic apis provides a unique user experience through a medley of colorful apis

API

'An application programming interface is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software.'

| definition courtesy wikipedia

APIS OF EPICAPIS

AGIFY: age guess per provided name

CHUCK NORRIS: jokes re: legendary bad*ss

COCKTAILS: info re: mature drinks

FOAAS: f*** off statements

MARVEL: library of comics info

OWEN WILSON: spontaneous wow moments

POKEMON: extra-galactical world

RON SWANSON: 'because (he) is a hero'

STAR WARS: unparalleled universe

TRONALD DUMP: dummest things said

fun find: 21 Best FOAAS API Alternatives in 2022

fun find+: pink was once a masculine color

fun find++: x mark symbol | dec code v hex code v unicode

fun find+=: happy-sad toggle checkbox

bonus find: ... how many effs i have ...

helpful list: pokemon wiki

helpful list+: marvel creators

helpful list++: star wars spacecrafts

and because api options make the code world go round:

public apis for developers | another list of public apis

---

AXIOS VERSUS FETCH

axios and fetch are used in the epic apis project for practice with both libraries. async/await and .then are both used in the epic apis project for familiarity with both types of asynchronous code syntax. fetch and async/await are the more modern and preferred methods. a bit more detail regarding axios versus fetch:

• axios is generally considered the old way to setup an api call. still, axios is included in this project:
  

  • for illustration of how to implement axios when, for example, the need arises such as working with legacy code
    

axios and fetch | pros and cons: some brief comparisons include, axios requires installing while fetch is built in. axios automatically stringifies data while fetch requires manual stringification. performance for both is about the same.

axios versus fetch for beginners

BASIC STRUCTURE: AXIOS

function ChuckNorris({ openModal, onClose }) {
const [joke, setJoke] = useState({
joke: "",
});

useEffect(() => {
getData();
// disable rule
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const getData = async () => {
const data = await axios.get(`https://api.chucknorris.io/jokes/random`);

    setJoke({
      ...joke,
      joke: data.data.value,
    });

};

// more code here

}

BASIC STRUCTURE: FETCH

const getAgeByName = async (event) => { event.preventDefault(); const response = await fetch(`https://api.agify.io?name=${name}`);

const data = await response.json();
setAgeByName({
age: data.age,
name: data.name,
count: data.count,
});
};

---

MORE HELPFUL STRUCTURES

BASIC STRUCTURE: API KEY | HASH | TS

• create a file to store the api key (ie. apikey.js) . .. module.exports = apikeyhere or export default "apikeyhere";. while module.exports = works, it is the previous method and requires a require("filenamewithextensionhere") statement in the receiving file. more modern is export default that requires an import in the receiving file.

• add that file to the gitignore file. apikey.js

• in the file using the api key aka the receiving file, assign a variable to the api key as a require statement: const apikey = require("./apikey"); OR

• in the file using the api key aka the receiving file, import the file containing the apikey at/near the top of the file: import apikey.js

note: again, import/export is the more modern and recommended implemenation method. both are included here for posterity of demonstration - ie. if you see or work in legacy code

• use the variable assigned to the api key in every instance the actual api key would normally be used. http://gateway.marvel.com/v1/public/creators?ts=1&apikey=${apikey}

  
  

explanation of interplay between api key, hash, and ts per marvel documentation:

'Authentication for Server-Side Applications Server-side applications must pass two parameters in addition to the apikey parameter:

ts - a timestamp (or other long string which can change on a request-by-request basis)

hash - a md5 digest of the ts parameter, your private key and your public key (e.g. md5(ts+privateKey+publicKey))

For example, a user with a public key of "1234" and a private key of "abcd" could construct a valid call as follows: http://gateway.marvel.com/v1/public/creators?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150 (the hash value is the md5 digest of 1abcd1234)'

one way to create a hash

install command: npm install js-md5
import statement import md5 from "js-md5";

BASIC STRUCTURE: TRY CATCH

try {
// code here
} catch (error) {
console.log("error message in here" + error);
}

BASIC STRUCTURE: CONSOLE LOG ERROR

.catch((error) => {
  console.error(error);
  setError("No listing for that name, apologies!");
  });
.catch((error) =>
console.log(error));

---

EVENT LISTENERS 101

• basic single event syntax:
  element.addEventListener(event, function, useCapture);
• basic multi event syntax:
  element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction);
  
  

EXAMPLE: ONLICK EVENT

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello Code World!");
}

- w3schools outlines capabilities and options in solid detail

- mdn web docs has solid info re: eventTarget.addEventListener()

- event reference, event index, and more helpful information

Simply Stated
'You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object.'

| definition courtesy general online search

COMMON HTML / JS EVENTS (A FEW)
onblur: element blurs
onclick: element is clicked
onchange: specified change occurs
onfocus: specified focus is active
onkeydown: key is pressed down
onmouseover: mouse moves over element
onsubmit: submission is triggered

Simply Stated
'You can name custom events anything you want, but as a best practice, you should use all lowercase characters. Event names are case-sensitive, and the property names on elements are case-insensitive and converted to lowercase by the browser. This can create conflicts if uses on* listeners on elements.

| definition courtesy general online search

NEXT STEPS (TOP RANKED)

• reusable code: per import/export for functions and state used in multiple components

• email api: allow users to select parts of their activity/selections to email (versus default to all)

• accessibility optimization: regarding code and styles

• media queries: optimize for devices/screens of all standard sizes, including per mobile first approach

DOCKER IMAGE / EPIC APIS FRONTEND CONTAINER

1. visit latoniamertica on docker hub
2. click on latoniamertica/epicapis
3. look to the right for Docker Pull Command
4. copy the Docker Pull Command
5. in your termina/CLI, paste the Docker Pull Command
6. the Docker Pull Command will be formatted as docker pull followed by the image name. for example, docker pull latoniamertica/epicapis
   

note: you can skip steps 1 through 4 if you know the image name

7. run the command docker run -p 3000:3000 -it latoniamertica/epicapis. if successful, the terminal/CLI will note the port (in this example port 3000) where the site is running with a note that you can visit the site in the browser
   

more notes: regarding ports, typically the first 3000 in 3000:3000 specifies the port on your local device (aka your Mac) while the second 3000 in 3000:3000 must match what the author of the container listed for the container runtime port (in this example 3000). however, if no port is specified in the container then you can use any port. for example, the image/container for the epic apis frontend does not specify a set of ports, which means you can use any port(s) to run the image/container from your local device.

helpful article re: containerizing a react app front end

---

CREATE A REACT APP

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify