tahsinocity / full-stack-nasa

Full-Stack Workshop

Code-Along Workshops

Introduction

Quickly work through all major areas of the full stack so you can see it all come together:

• Client-side a.k.a. Frontend (React)
• Server-side a.k.a Backend (Express, and Database (MySQL).

Goal

After working through this practice repo, you should be able to quickly build and work in any ExpressJS application.

Building a basic CRUD app should be mostly muscle memory.

Getting started

How to perform this activity:

In class, we will work through all parts (as much as we can)

NOTE: The code written in class has many different styles (ES5 functions, ES6 functions, async callbacks, promises, etc) to show a variety of ways to handle the same functionality.

Once we have finished, you should delete everything and start over for yourself!

On the second rebuild: Do not reference code you already wrote for this assignment! Instead, rely on DOCUMENTATION and your CHEATSHEET.

Part 1: ReactJS (Fetching Directly)

In your frontend folder:

Using the NASA Astronomy Picture of the Day API:

• Refactor the given React code to do the following:
  • On page load, fetch the Astronomy Picture of the Day from NASA API and render to the page
  • Include the date, explanation, title, and image

Part 2: Server API

Objectives (read this carefully):

• Create a server that responds to the specified RESTful routes
• Each route should respond back with dummy data for now

Technologies:

• Node
• Express
• NPM
• Git

ROUTES (PART 1)

METHOD	PATH	DESCRIPTION
GET	/api/picture	respond with string "the picture"

Technologies:

• MySQL
• MySQLJS
• Postman

ROUTES (PART 2)

METHOD	PATH	DESCRIPTION
GET	/api/picture	respond with the Astronomy Picture of the Day Information

Part 3: MySQL Queries

• Connect your server to your database using MySQLJS (mysql javascript)
• Complete the server routes outlined in the route table below (use the queries.js helper functions)

Technologies:

• MySQL
• MySQLJS
• Postman

ROUTES:

METHOD	PATH	DESCRIPTION
GET	/api/picture	respond with the Astronomy Picture of the Day from the database

-- If the picture does not exist in the database, add it

• Note, this is slightly awkward logic, but that's okay for now!

Part 4: ReactJS (Refactor using Data From Your Server API)

In your frontend folder:

Using the Astronomy Picture of the Day data from your server API routes:

• Update your React app to:
  • View the Astronomy Picture of the Day from the server (not directly accessing the NASA API)

HINT: You will need to use AJAX (Fetch, Axios, etc) to allow your client side code to talk to your server.

You've already created the endpoints below, now you need to use AJAX to communicate to them and get the info you need to the client-side code:

METHOD	PATH	DESCRIPTION
GET	/api/picture	respond with the Astronomy Picture of the day