DEV Community: Christine Contreras

My Final Project: A Full Stack eComm Store

Christine Contreras — Sun, 06 Feb 2022 17:22:09 +0000

This is my capstone project for Flatiron – the project where I put everything I’ve learned in the past 10 months. I currently work in eCommerce digital marketing and want to transition towards eCommerce development for the next step in my career. That is why I decided to build an e-commerce store as my final project. My eCommerce store is called Free Spirit Designs and is a small boutique jewelry eCommerce site.

What I Used In My Project

React framework for my front-end
React Router for my front-end routes
Material UI for styling
Ruby on Rails for my backend
ActiveRecord to handle my models and communication with my database
AWS to host images
Stripe for checkout

Project Planning

I spent about two weeks planning out my project before writing any code. I built wireframes for the front-end and wrote out my backend models, attributes, routes, and schema. It was really important to me to do this so that I had a clear understanding of where my project was going before coding. In the long run, it helped me develop even faster since I knew what I wanted it to look like, when and where to reuse components in React, and had a clear understanding of my model relationships in RoR (ruby on rails).

Frontend Planning

Mockups

Here are some side-by-side mockups vs the end product

Homepage

PLP (Category Page)

PDP (Product Page)

Cart

Admin Dashboard

Website Flows

Here are the three main flows I thought were important to understand. You can click on the links and walk through them if you like.

Admin Flow

View Flow Here

shows what the admin dashboard looks like when logged in
shows a view of all categories and how to create a new one
shows a view of all products and how to create a new product, SKU, and slot the product
shows all site orders

Profile Flow

View Flow Here

shows how to create a new user account
shows what a user's profile would look like if they were logged in.
shows a users profile info, shipping info, and order history

User Shopping Flow

View Flow Here

shows what a PLP (product listing page/category page) would look like
shows what a PDP (product display page) looks like
shows how the cart looks like
shows the checkout process

Backend Planning

This part took a lot of thought on my end and was re-worked a couple of times. What attributes should lie with the product vs a SKU was a big one I went back and forth on. In the end, I decided to only give the product title and description to the product model and all other attributes to the SKU model.

I also struggled with how the relationship between the user, cart, orders, and selected items should be handled. At first, I had the cart belonging to a user. But when I thought about it more, it didn’t really belong to a user—it belonged to a browser. If a visitor isn’t logged in, they can still have an active cart.

Initially, I had SKUs going directly into a cart and orders but decided to have a joint table called selected items instead. SKUs really only belong to products—they can’t belong to only one user. If they did, my backend would think all quantities of the SKU belonged to a user instead of just one of them. It also meant if someone bought a SKU, my backend would think it’s no longer available.

Backend Relationships and Attributes

Cart        User ---------------> Orders
|           :first_name           :user_id
|           :last_name            :amount
|           :email                :address
|           :password_digest      :status
|           :address              :session_id
|            |                    :invoice
|            |                    :email
|            |                    :name
|            |                      |
|            V                      |
---------> SelectedItem <------------
           :sku_id
           :order_id
           :cart_id
           :quantity
           ^
           |
           |
         SKU <------------- Product ------ > ProductCategory <---- Category
         :product_id        :title           :product_id           :name
         :size              :description     :category_id          :description
         :color                                                    :isActive
         :price
         :quantity

My Routes

Rails.application.routes.draw do
 namespace :api do
   resources :users, only: [:destroy, :update]
   post "/signup", to: "users#create"
   get "/me", to: "users#show"

   post "/login", to: "sessions#create"
   delete "/logout", to: "sessions#destroy"


   get "/user-cart", to: "carts#show"
   resources :carts, only: [:update]
   patch "/carts/:id/delete-item", to: "carts#delete_item"
   patch "/carts/:id/update-item-qty/:quantity", to: "carts#update_item"

   resources :categories
   resources :products
   resources :skus, only: [:create, :update, :destroy]

   post "/update-product-categories", to: "product_categories#update_product_categories"

   resources :orders, only: [:index, :update]
   post "/checkout", to: "stripe#checkout"
   post "/order-success", to: "stripe#order_success"

   post "/presigned_url", to: "direct_upload#create"
  end

 get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }


end

Project Learnings

This is an overview of the parts of my capstone project I struggled with or made thoughtful decisions on. I don’t discuss users and sessions in this blog, but if you would like more information on how I did this part (create new users, persistent login, etc.) I cover it in my previous Ruby On Rails blog post here.

Cart

I spent a good amount of time contemplating the creation of a cart. I decided on a custom route that is called as soon as my app loads. It looks to see if the cart session already exists in my browser. If it does, my backend sends back the cart info. If not, it creates a whole new cart and session.

I also created custom routes in the cart controller to handle updating and deleting items from the cart. I chose to run these actions in the cart controller instead of the selected items controller so that I could send the entire cart back to the front-end once the change was done.

#cart_controller.rb
class Api::CartsController < ApplicationController
   rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response
   before_action :set_cart, only: [:update, :delete_item, :update_item ]
   skip_before_action :authorize


   def show
       if session.include? :cart_id
           set_cart
       else
           create_cart
       end

       render json: @cart, include: ['selected_items', 'selected_items.sku']
   end

   def update
       sku = Sku.find_by(product_id: params[:product_id], color: params[:color], size: params[:size])

       if sku
           cartItem = @cart.selected_items.find_by(sku_id: sku.id)
           if cartItem #cart item already exists update the quantity
                newQuantity = params[:quantity] + cartItem.quantity
                cartItem.update(quantity: newQuantity)
           else  #create cart item
                newItem = @cart.selected_items.create(quantity: params[:quantity], sku_id: sku.id)
           end
       else
           render json: { errors: ['Sku Not Found'] }, status: :not_found
       end

       render json: @cart, include: ['selected_items', 'selected_items.sku'], status: :accepted

   end

   def delete_item
       item = set_selected_item
       item.destroy
       render json: @cart, include: ['selected_items', 'selected_items.sku'], status: :accepted
   end

   def update_item
       item = set_selected_item
       item.update(quantity: params[:quantity])
       render json: @cart, include: ['selected_items', 'selected_items.sku'], status: :accepted
   end

   private

   def set_cart
       @cart = Cart.find_by(id: session[:cart_id])
   end

   def set_selected_item
       @cart.selected_items.find_by(id: params[:selected_item_id])
   end

   def create_cart
       @cart = Cart.create
       session[:cart_id] = @cart.id
       @cart
   end

   def render_not_found_response
       render json: { errors: ['No Cart Found'] }, status: :not_found
   end
end

Stripe Checkout

I thought Stripe checkout would be one of the hardest parts of my project but they have great documentation and an easy setup that made my checkout less work than I initially intended. I made two custom routes for the stripe checkout: one for creating a stripe order and another for fetching a stripe order to send back and create a new order in my database.

The only disadvantage I found using Stripe checkout is that you can’t pass user data in. So even though I had a user's address, name, and email address, I couldn’t pass it to Stripe’s pre-designed checkout. If I’d used Stripe elements, it would’ve been possible. But that depends on how much customization you would like in your checkout. It was more important to me that my checkout be secure and ADA compliant than passing in the user's info so I opted for Stripe’s pre-designed checkout.

Backend Implementation

#stripe_controller.rb

class Api::StripeController < ApplicationController
   before_action :set_stripe_key

   def checkout
       # change items to correct stripe format
       shipping_amount = params[:shipping].to_i * 100
       orderItems = params[:items].collect do |item|
           selected_item = SelectedItem.find_by(id: item)

           {
               price_data: {
                   currency: 'usd',
                   product_data: {
                       name: selected_item.sku.product.title,
                       images: [selected_item.sku.image_url]
                   },
                   unit_amount: selected_item.price.to_i * 100

               },
               quantity: selected_item.quantity,

            }

       end

       # create new stripe session
       session = Stripe::Checkout::Session.create({
       line_items: orderItems,
       payment_method_types: ['card'],
       shipping_address_collection: {
           allowed_countries: ['US', 'CA'],
           },
           shipping_options: [
           {
               shipping_rate_data: {
               type: 'fixed_amount',
               fixed_amount: {
                   amount: shipping_amount,
                   currency: 'usd',
               },
               display_name: 'Standard shipping',
               # Delivers between 5-7 business days
               delivery_estimate: {
                   minimum: {
                   unit: 'business_day',
                   value: 5,
                   },
                   maximum: {
                   unit: 'business_day',
                   value: 7,
                   },
               }
               }
           },
           {
               shipping_rate_data: {
               type: 'fixed_amount',
               fixed_amount: {
                   amount: 1500,
                   currency: 'usd',
               },
               display_name: 'Next day air',
               # Delivers in exactly 1 business day
               delivery_estimate: {
                   minimum: {
                   unit: 'business_day',
                   value: 1,
                   },
                   maximum: {
                   unit: 'business_day',
                   value: 1,
                   },
               }
               }
           },
           ],
       mode: 'payment',
       # append session id to success url so I can fetch the users order on frontend
       success_url:  ENV["WEBSITE_URL"] + 'order-confirmation?session_id={CHECKOUT_SESSION_ID}',
       cancel_url:    ENV["WEBSITE_URL"],
       })

       render json: {url: session.url}, status: :see_other
   end

   def order_success
       # see if order already exists
       order = Order.find_by(session_id: params[:session_id])
       if !order 
           create_order
           update_items   
       else
           @order = order
       end

       render json: @order, include: ['user', 'selected_items', 'selected_items.sku'], status: :accepted
   end


   private

   def set_stripe_key
       Stripe.api_key = ENV["STRIPE_API_KEY"]
   end

   def create_order
       # fetch order session and user from stripe
       session = Stripe::Checkout::Session.retrieve(params[:session_id])
       customer = Stripe::Customer.retrieve(session.customer)
       # add stripe id to user. create new order in database
       @current_user.update(stripe_id: customer.id)
       @order = @current_user.orders.create(
           session_id: params[:session_id],
           address: session.shipping.address,
           name: customer.name,
           email: customer.email,
           amount: session.amount_total / 100,
           status: 'Pending'
           )
       @order.invoice = "#{customer.invoice_prefix}-#{@order.id}"
       @order.save
   end

   def update_items
       # update sku quantity, remove cart association and add order association
       params[:items].each do |item|
           selected_item = SelectedItem.find_by(id: item)
           sku_qty = selected_item.sku.quantity - selected_item.quantity
           selected_item.sku.update(quantity: sku_qty)
           selected_item.update(order_id: @order.id, cart_id: nil)
       end
   end
end

Frontend Implementation

Cart checkout button

I made it mandatory for a user to login in order to checkout. Once they were logged in, they were re-directed to the stripe checkout page.

const CartBtn = ({ loading }) => {
 let navigate = useNavigate()
 const cartItems = useRecoilValue(cartItemsAtom)
 const user = useRecoilValue(userAtom)
 const setCheckout = useSetRecoilState(checkoutAtom)
 const setToggleCart = useSetRecoilState(toggleCartOpenAtom)
 const startCheckout = useSetRecoilState(stripeCheckoutAtom)

 const handleCheckoutClick = () => {
   setCheckout(true)

   if (user) {
     startCheckout()
   } else {
     setToggleCart()
     navigate('/login')
   }
 }

 return (
   <Grid item>
     {cartItems?.length !== 0 ? (
       <LoadingButton
         onClick={handleCheckoutClick}
         loading={loading}
         variant='contained'
         className='btn btn-lg btn-100'
         color='info'>
         Continue To Checkout
       </LoadingButton>
     ) : (
       <Button
         variant='contained'
         className='btn btn-lg btn-100'
         color='info'
         disabled>
         Add Items To Cart
       </Button>
     )}
   </Grid>
 )
}

export default CartBtn

StartCheckout Atom

I used Recoil to simplify my state management. So much easier and more intuitive, in my opinion, than using Redux with React.

export const stripeCheckoutAtom = selector({
 key: 'stripeCheckoutAtom',
 get: ({ get }) => get(cartOpenAtom),
 set: ({ get, set }) => {
   const cart = get(cartAtom)
   const items = get(cartItemsAtom)
   const cartItemsIds = items?.map((item) => item.id)
   const cartOpen = get(cartOpenAtom)
   fetch('/api/checkout', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       items: cartItemsIds,
       shipping: cart.shipping,
     }),
   })
     .then((res) => res.json())
     .then((data) => {
       window.location = data.url
     })
     .catch((err) => console.log(err))
   set(cartOpen, false)
 },
})

Order Confirmation Page

Once the user completes a successful Stripe checkout, they are redirected back to the order confirmation page. On this page, I retrieve the stripe session from the URL params. I struggled with this page and so I would like to spend a little more time streamlining this instead of having so many checks on load.

 const OrderConfirmation = () => {
 let navigate = useNavigate()
 const userOrders = useRecoilValue(userOrdersAtom)
 const cartItems = useRecoilValue(cartItemsAtom)
 const [user, setUser] = useRecoilState(userAtom)
 const [cart, setCart] = useRecoilState(cartAtom)

 const [loading, setLoading] = React.useState(true)
 const [error, setError] = React.useState(false)
 const [fetching, setFetching] = React.useState(false)
 const [order, setOrder] = React.useState(null)

 React.useEffect(() => {
   setLoading(true)
   setError(false)
   setFetching(false)
   //grab params from url
   const search = new URLSearchParams(window.location.search)

   if (search.has('session_id')) {
     //check if order already exists
     const session = search.get('session_id')
     const orderExists = userOrders.find(
       (order) => order.session_id === session
     )
     if (orderExists) { //display if it does
       setOrder(orderExists)
       setLoading(false)
       setFetching(false)
     } else {
       if (cartItems && cartItems?.length !== 0) {
         handleFetchStripeOrder(session) //if it doesn't or there are no orders fetch stripe order
         setFetching(true)
       } else {
         setLoading(false)
         setFetching(true)
       }
     }
   } else {
     setLoading(false)
     setError(true)
   }
 }, [cartItems, order, user])

 const handleFetchStripeOrder = (session_id) => {
   const items = handleCheckoutItems()
   fetch('/api/order-success', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       session_id,
       items,
     }),
   })
     .then((res) => res.json())
     .then((data) => {
       setOrder(data)
       const newUser = { ...user, orders: [...userOrders, data] }
       setUser(newUser)
       const newCart = {
         ...cart,
         total: '0',
         shipping: '0',
         item_count: 0,
         selected_items: [],
       }
       setCart(newCart)
       setLoading(false)
       setError(false)
       setFetching(false)
     })
     .catch((err) => {
       console.error(err)
       setLoading(false)
       setError(true)
       setFetching(false)
     })
 }

 const handleCheckoutItems = () => {
   return cartItems?.map((item) => {
     return item.id
   })
 }

 return (
     //jsx here

 )
}
export default OrderConfirmation

AWS Image Uploads

I found this to be the most frustrating part of my project. I cannot explain the highs and lows I felt throughout this portion. I first implemented image upload with ActiveStorage and AWS. Once I had it working in development, I felt great! Then, I pushed it live to Heroku and it stopped working.

I was sending the image to my backend to handle the AWS upload, and Heroku does not let you send more than 4MB to the backend. Once I researched this more, I realized it’s more efficient to upload directly to AWS. It is more efficient and saves on server CPU usage.

I am planning on writing another blog post solely dedicated to AWS and how to direct upload with ActiveStorage and React for anyone else struggling!

Final Thoughts

Our capstone project is supposed to push us farther than our other projects and I believe this project did that for me. Honestly, I am SO PROUD of this project. I incorporated everything Flatiron has taught me plus learned new skills for this project on my own (using Recoil, stripe, and AWS). I also loved this project so much because I got to incorporate my current working knowledge of eCommerce digital marketing into this online store.

Comparing this to my first project with Flatiron, it feels so rewarding to see my growth. Even though Flatiron is wrapping up, my goal in development is to constantly learn and grow my skill set. I am an innate learner and it’s one of the reasons I am so drawn to web development – there is always something new to learn and room for improvement.

If you would like to see my project in action you can view it here ❤️

Best Books: My Fullstack React & Ruby On Rails App

Christine Contreras — Mon, 13 Dec 2021 19:58:03 +0000

This is my second to last project for Flatiron and this phase was all about Ruby on Rails. From what I’ve read, Ruby on Rails isn’t as popular as it was 5 years ago, however it is still a good language to understand and helped me learn back-end web development.

What I Used In My Project

React framework for my front-end
React Router for my front-end routes
Mui for styling
Ruby on Rails for my backend
ActiveRecord to handle my models and communication with my database

Project Overview

I created a book club app called Best Books. It lets you create book clubs with your friends where you can track goals, create discussion questions, and comment on the discussion questions.

Best Book Models

User

Has many book club users
Has many comments

Book Club User

Belongs to a user
Belongs to a book club

Book Club

Belongs to a book
Belongs to a book club
Has many goals
Has many guide questions

Goal

Belongs to a book club book

Guide Question

Belongs to a book club book
Has many comments

Comment

Belongs to a user
Belongs to a guide question

                                                          :deadline
                                                          :pages
                                                          :priority
                                                          :complete
                                                          :notes
                                                          :meetingURL
                                                          :bookclub_book_id
                                                          Goal
                                                          V
                                                          |
User --------------< BookClubUser >---- BookClub ----< BookClubBook >-------- Book
:email               :user_id           :name          :bookclub_id           :imageURL
:password_digest     :bookclub_id                      :book_id               :title
:first_name          :isAdmin                          :archived              :series
:last_name                                             :status                :author
:location                                              :suggested_by          :description
:profile_color                                         :current               :pages
|                                                       |                     :publicationDate
|                                                       |                     :genres
|                                                       |
|                                                       |
|                                                       ^
  -------------------< Comment >----------------- GuideQuestion
                       :user_id                   :bookclub_book_id 
                       :guide_question_id         :chapter
                       :comment                   :question

Hurdles in Project

Handling User Creation and Persistent Login

This was my first project where I was able to create user functionality: ability to create an account, log in and out, and persistently stay logged in using cookies. I used bcrypt gem to create protective passwords and enabled cookies in RoR so I could track sessions to keep the user logged in.

User and Cookies Implementation

Enabling Cookies
Since I was using RoR as an API I had to re-enable the ability to use cookies.

#application.rb

require_relative "boot"
require "rails"

module BestBooksApi
 class Application < Rails::Application
   config.load_defaults 6.1
   config.api_only = true

   # Adding back cookies and session middleware
   config.middleware.use ActionDispatch::Cookies
   config.middleware.use ActionDispatch::Session::CookieStore

   # Use SameSite=Strict for all cookies to help protect against CSRF
   config.action_dispatch.cookies_same_site_protection = :strict
 end
end

Routes For Sessions and Users

#routes.rb

Rails.application.routes.draw do
  namespace :api do
    resources :users, only: [:index, :destroy, :update]
    post "/signup", to: "users#create"
    get "/me", to: "users#show"

    post "/login", to: "sessions#create"
    delete "/logout", to: "sessions#destroy"
  end

  get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }

end

Creating a User

When a new user is created it creates a session cookie to keep the user logged in. Once the user is entered into the database, the user information is set to the front-end.

Backend

#user_controller.rb
class Api::UsersController < ApplicationController

   skip_before_action :authorize, only: :create

   def create
    user = User.create(user_params)

    if user.valid?
        session[:user_id] = user.id
        render json: user, status: :created
    else
        render json: { errors: user.errors.full_messages }, status: :unprocessable_entity
    end
   end

   def show
    user = @current_user
    render json: user, include: ['bookclubs', 'bookclubs.users', 'bookclubs.bookclub_books', 'bookclubs.bookclub_books.book', 'bookclubs.bookclub_books.goals', 'bookclubs.bookclub_books.guide_questions', 'bookclubs.bookclub_books.guide_questions.comments']
    # render json: user
   end

   def update
    user = @current_user
    user.update(user_params)
    render json: user, status: :accepted
   end

   def destroy
    @current_user.destroy
    head :no_content
   end

   private

   def user_params
    params.permit(:email, :first_name, :last_name, :location, :profile_color, :password, :password_confirmation, :bookclubs)
   end
end

#user_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :email, :first_name, :last_name, :full_name, :location, :profile_color

  has_many :bookclubs

  def full_name
    "#{self.object.first_name} #{self.object.last_name}"
  end
end

Front-end

import * as React from 'react'
import { Button, TextField, Alert, Stack } from '@mui/material'
import { useNavigate } from 'react-router'

const FormSignup = ({ onLogin }) => {
  const [firstName, setFirstName] = React.useState('')
  const [lastName, setLastName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [passwordConfirmation, setPasswordConfirmation] = React.useState('')
  const [location, setLocation] = React.useState('')
  const [errors, setErrors] = React.useState([])

  let navigate = useNavigate()

  const handleSubmit = (e) => {
    e.preventDefault()
    setErrors([])
    fetch('/api/signup', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        first_name: firstName,
      last_name: lastName,
        password,
        password_confirmation: passwordConfirmation,
        email,
        location,
        profile_color: '#004d40',
    }),
    }).then((response) => {
    if (response.ok) {
        response
        .json()
        .then((user) => onLogin(user))
        .then(navigate('/'))
    } else {
        response.json().then((err) => setErrors(err.errors || [err.error]))
    }
    })
  }

  return (
    <form onSubmit={handleSubmit} className='form'> …
    </form>
  )
}

export default FormSignup

Keeping a User Logged In

When the app initially loads for a user, it makes a fetch request to /me to see if the session cookie already exists. If the cookie isn’t present, an unauthorized error is sent back to the front-end. The authorized method is set up in the application_controller.rb file.

Backend

class ApplicationController < ActionController::API
   include ActionController::Cookies
   rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity


   before_action :authorize
    private
    def authorize
    @current_user = User.find_by_id(session[:user_id])
    render json: { errors: ["Not Authorized"] }, status: :unauthorized unless @current_user
   end
    def render_unprocessable_entity(exception)
    render json: { errors: exception.record.errors.full_messages }, status: :unprocessable_entity
   end
 end

Front-end

 React.useEffect(() => {
    // auto-login
    handleCheckLogin()

    //fetch list recommendations
    handleFetchRecommendations()
  }, [])

  const handleCheckLogin = () => {
    fetch('/api/me').then((response) => {
    if (response.ok) {
        response.json().then((user) => {
        setUser(user)
        })
    } else {
        response.json().then((err) => console.log(err))
    }
    })
  }

Logging In and Out of Best Books

The /login and /logout routes are sent to the Sessions controller. If the user and password our found, a session is created and the user’s info is sent to the front-end. When a user logs out, the session cookie is destroyed.

Backend

#sessions_controller.rb

class Api::SessionsController < ApplicationController
   skip_before_action :authorize, only: :create

   def create
    user = User.find_by(email: params[:email])

    if user&.authenticate(params[:password])
        session[:user_id] = user.id
        render json: user, status: :created
    else
        render json: { errors: ["Invalid username or password"] }, status: :unauthorized
    end
   end

   def destroy
    session.delete :user_id
    head :no_content
   end
end

Front-end

 import * as React from 'react'
import { Button, TextField, Alert, Stack } from '@mui/material'
import { useNavigate } from 'react-router'

//login
const FormLogin = ({ onLogin }) => {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [errors, setErrors] = React.useState([])

  let navigate = useNavigate()

  const handleSubmit = (e) => {
    e.preventDefault()
    setErrors([])
    fetch('/api/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        password,
        email,
    }),
    }).then((response) => {
    if (response.ok) {
        response
        .json()
        .then((user) => onLogin(user))
         .then(navigate('/'))
    } else {
        response.json().then((err) => setErrors(err.errors || [err.error]))
    }
    })
  }

  return (
    <form onSubmit={handleSubmit} className='form'>
    </form>
  )
}

export default FormLogin

//logout
  const handleLogout = () => {
    fetch('/api/logout', {
    method: 'DELETE',
    }).then((response) => {
    if (response.ok) setUser(null)
    })
  }

Handling Book Clubs

A user can create new book clubs, update book club info, add books to a book club, and delete a book club if they are the admin. Whenever a book club page is visited, a fetch is made to the backend and the book club information is sent back.

Book Club Implementation

Backend
Most database information is sent whenever a GET request is made to retrieve a book club. When a book club is created an automatic book club user is created with the current logged in user and makes them the book club admin.

#bookclubs_controller.rb

class Api::BookclubsController < ApplicationController
    rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response
    before_action :set_bookclub, only: [:show, :destroy]
    skip_before_action :authorize, only: [:index, :show]

    def index
        bookclubs = Bookclub.all
        render json: bookclubs, status: :ok
    end

    def show
        bookclub = @bookclub
        render json: bookclub, include: ['users', 'bookclub_books', 'bookclub_books.book', 'bookclub_books.goals', 'bookclub_books.guide_questions', 'bookclub_books.guide_questions.comments'], status: :ok
    end

    def create
        user = @current_user
        bookclub = user.bookclubs.create(bookclub_params)
        bookclub_user = user.bookclub_users.find_by(bookclub_id: bookclub.id)
        bookclub_user.isAdmin = true
        bookclub_user.save


        render json: bookclub, include:  ['users', 'bookclub_books', 'bookclub_books.book', 'bookclub_books.goals', 'bookclub_books.guide_questions', 'bookclub_books.guide_questions.comments'], status: :created

    end

    def destroy
        @bookclub.destroy
        head :no_content
    end

    private

    def bookclub_params
        params.permit(:name)
    end

    def set_bookclub
        @bookclub = Bookclub.find(params[:id])
    end

    def render_not_found_response
        render json: { error: 'Book Club Not Found' }, status: :not_found
    end

end

Front-End
routes with React Router

<Route path='bookclub' element={<BookClubPage />}>
                <Route
                path=':id'
                element={
                    <BookClub
                    user={user}
                    loading={loading}
                    bookclub={currentBookclub}
                    handleFetchBookClub={handleFetchBookClub}
                    />
                }>
                <Route
                    path='admin-dashboard'
                    element={
                    <BookClubDashboard
                        bookclub={currentBookclub}
                        setCurrentBookclub={setCurrentBookclub}
                        fetchUser={handleCheckLogin}
                        user={user}
                    />
                    }
                />
                <Route
                    path='current-book'
                    element={
                    <BookClubCurrenBook
                        bookclub={currentBookclub}
                        user={user}
                        loading={loading}
                        handleFetchBookClub={handleFetchBookClub}
                    />
                   }
                />
                <Route
                    path='wishlist'
                    element={
                    <BookClubWishlist
                        bookclub={currentBookclub}
                        user={user}
                     setCurrentBookclub={setCurrentBookclub}
                        setCurrentBook={setCurrentBook}
                        handleFetchBookClub={handleFetchBookClub}
                    />
                    }
                />
                  <Route
                    path='history'
                    element={
                    <BookClubHistory
                        bookclub={currentBookclub}
                        user={user}
                        setCurrentBookclub={setCurrentBookclub}
                        handleFetchBookClub={handleFetchBookClub}
                    />
                    }
                />
                </Route>
</Route>

fetching a book club with the id param

 const handleFetchBookClub = (bookClubId) => {
    setCurrentBookclub(null)
    setLoading(true)
    fetch(`/api/bookclubs/${bookClubId}`)
    .then((response) => response.json())
    .then((data) => {
        setLoading(false)
        setCurrentBookclub(data)
    })
    .catch((err) => {
        console.error(err)
    })
  }

import * as React from 'react'
import { Grid, Typography } from '@mui/material'
import BookClubMenu from '../../components/nav/BookClubMenu'
import Loading from '../../components/Loading'
import { useParams, Outlet } from 'react-router'

const Bookclub = ({ user, handleFetchBookClub, loading, bookclub }) => {
  let params = useParams()

  React.useEffect(() => {
    handleFetchBookClub(params.id)
  }, [])

  return loading ? (
    <Grid container alignItems='center' justifyContent='center'>
    <Loading />
    </Grid>
  ) : (
    <>
    {bookclub &&
        (bookclub.error || bookclub.errors ? (
        <Grid
            item
            container
            flexDirection='column'
            wrap='nowrap'
            alignItems='center'>
            <Typography component='h1' variant='h4' align='center'>
            {bookclub.error ? bookclub.error : bookclub.errors}
            </Typography>
        </Grid>
        ) : (
        <>
            <Grid item xs={12} md={4} lg={3}>
            <BookClubMenu user={user} bookclub={bookclub} />
            </Grid>

            <Grid
            item
            container
            flexDirection='column'
            spacing={3}
            xs={12}
            md={8}
            lg={9}
            sx={{ pl: 4 }}>
            <Outlet />
            </Grid>
        </>
        ))}
    </>
  )
}

export default Bookclub

Difficulty Updating Book Club Users

One of my biggest struggles with this app was updating the book club users. I nearly wanted to give up on this app a few times during this process. The ability to add other users to a book club is essential to my app being functional. After all, what is a book club if only one person is in it?

As you could see from my project overview, I had to create 3 joint tables with many-to-many relationships. It was my first time tackling joint tables, and I had difficulty on where to make updates and calls.

Routes
I decided to handle all book club user-related calls in the book club controller rather than creating a controller for book club users. I’m still not sure if this was the best way to implement calls for changes but it felt like the most efficient way to get the information I needed on the front-end once a request was made.

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  # Routing logic: fallback requests for React Router.
  # Leave this here to help deploy your app later!
  namespace :api do
    patch "/bookclubs/:id/current-book", to: "bookclubs#current_book"
    resources :bookclubs

    resources :books, only: [:show, :create, :destroy]

    resources :bookclub_books, only: [:index, :destroy, :update]

    resources :goals, only: [:show, :create, :update, :destroy]

    resources :guide_questions, only: [:show, :create, :update, :destroy]

    resources :comments, only: [:create, :destroy]

  end

  get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }

end

Front-End
If a user is the admin for a book club, they will be able to access the admin dashboard. Here, the user can update the book club name; view, add, and delete users; and change the admin of the book club.

When the admin dashboard form is loaded, it makes a fetch to the backend to receive all users. This gives the admin the ability to add anyone that already has an account with Best Books. An admin has the ability to set a new admin, but is not able to delete the admin. (If they have access to the admin dashboard, they are the admin.)

import * as React from 'react'
import '../../css/Form.css'
import { useNavigate } from 'react-router-dom'

const FormBookClub = ({ bookclub, setCurrentBookclub, fetchUser }) => {
  let navigate = useNavigate()
  const [name, setName] = React.useState(bookclub ? bookclub.name : '')
  const [adminId, setAdminId] = React.useState(
    bookclub ? bookclub.admin.id : null
  )
  const [currentUsers, setCurrentUsers] = React.useState(
    bookclub ? bookclub.users : []
  )
  const [deleteUsers, setDeleteUsers] = React.useState([])
  const [allUsers, setAllUsers] = React.useState([])

  const [newUsers, setNewUsers] = React.useState([])
  const [errors, setErrors] = React.useState([])
  const [updated, setUpdated] = React.useState(false)
  const [loading, setLoading] = React.useState(false)

  React.useEffect(() => {
    setName(bookclub ? bookclub.name : '')
    setAdminId(bookclub ? bookclub.admin.id : null)
    setCurrentUsers(bookclub ? bookclub.users : [])

    fetch('/api/users')
    .then((response) => response.json())
    .then((data) => setAllUsers(data))
    .catch((err) => {
        console.error(err)
    })
  }, [bookclub])

  const handleSubmit = (e) => {
    e.preventDefault()
    setErrors([])
    setLoading(true)
    setUpdated(false)

    const deleteUserIds = deleteUsers ? deleteUsers.map((user) => user.id) : []
    const addUserIds = newUsers ? newUsers.map((user) => user.id) : []

    fetch(`/api/bookclubs/${bookclub.id}`, {
    method: 'PATCH',
    headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
    },
    body: JSON.stringify({
        name,
        admin_id: adminId,
        delete_users: deleteUserIds,
        add_users: addUserIds,
    }),
    }).then((response) => {
    setLoading(false)
    setDeleteUsers([])
    setNewUsers([])
    if (response.ok) {
        setUpdated(true)
        response.json().then((data) => {
        setCurrentBookclub(data)
        fetchUser()
        })
    } else {
        response.json().then((err) => {
        if (err.exception) {
            fetchUser()
           navigate('/profile/my-bookclubs')
        } else {
            setErrors(err.errors || [err.error])
        }
        })
    }
    })
  }

  const handleDeleteCurrentMemberClick = (user) => {
    setDeleteUsers((prevUsers) => [...prevUsers, user])
  }

  const handleAddCurrentMemberClick = (user) => {
    const newDeltedUsers = deleteUsers.filter((u) => u.id !== user.id)
    setDeleteUsers(newDeltedUsers)
  }

  let filteredOptions = () => {
    const currentUserIds = currentUsers
    ? currentUsers.map((user) => user.id)
    : []

    const allUserIds = allUsers ? allUsers.map((user) => user.id) : []

    const filteredIds = allUserIds.filter((id) => currentUserIds.includes(id))

    const filteredUsers =
    filteredIds.length === 0
        ? []
        : allUsers.filter((user) => !filteredIds.includes(user.id))
    return filteredUsers
  }

  return (
    <form onSubmit={handleSubmit} className='form'>
    </form>
  )
}

export default FormBookClub

Backend

#bookclub_controller.rb

class Api::BookclubsController < ApplicationController
    rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response
    before_action :set_bookclub, only: [:show, :destroy]
    skip_before_action :authorize, only: [:index, :show]

    def update
        bookclub = Bookclub.find(params[:id])
        bookclub.update(bookclub_params)

        #check if admin is changed
        admin_bookclub_user = bookclub.bookclub_users.find {|user| user.isAdmin == true }
        admin_id = admin_bookclub_user.user_id

        if params[:admin_id] != admin_id
            admin_bookclub_user.update(isAdmin: false)
            new_admin_bookclub_user = bookclub.bookclub_users.find_by(user_id: params[:admin_id])
            new_admin_bookclub_user.update(isAdmin: true)
        end


        # delete users if needed
        if !params[:delete_users].empty?
            users = params[:delete_users].each do |user_id|
                bookclub_user = bookclub.bookclub_users.find_by(user_id: user_id)
                bookclub_user.destroy
            end
        end

        # add users if needed
        if !params[:add_users].empty?
           params[:add_users].each do |user_id|
                bookclub.bookclub_users.create(user_id: user_id, isAdmin: false)
            end
        end

        render json: bookclub, include: ['users', 'bookclub_books', 'bookclub_books.book', 'bookclub_books.goals', 'bookclub_books.guide_questions', 'bookclub_books.guide_questions.comments'], status: :accepted
    end

    private

    def bookclub_params
        params.permit(:name)
    end

    def set_bookclub
        @bookclub = Bookclub.find(params[:id])
    end

    def render_not_found_response
        render json: { error: 'Book Club Not Found' }, status: :not_found
    end

end

Other Best Book Capabilities

Adding a Book To a Book Club

I used the Good Reads API to be able to search and get book information so a user can add it to their book club.

Move Books in Book Club

A user is able to add a book to a book club wishlist, make it the book club’s current book, and archive a book if they are finished with it.

Add Goals, Questions, and Comments to a Book Club

A user has the ability to add goals for the current books, add questions, and comment on the guide questions for book clubs they belong to.
Adding A Goal

Adding Questions and Comments

Final Thoughts

I am proud of this app’s capabilities. I didn’t get to cover all of the app’s abilities (including updating and deleting your profile) in this post, but I did try to use all CRUD actions for each model where it made sense.

I do still want to add a feature to this app that lets users search all book clubs and request to join them. When the admin logs in they would then be able to approve or reject the request. Right now, you can only join a book club after receiving an invitation from a book club admin.

As always, thank you for going through this post. I hope it helped you understand my process a little more. I am on to my final phase and project for Flatiron.

Mercury: My First Full Stack Project

Christine Contreras — Thu, 07 Oct 2021 18:03:51 +0000

Last week marked the end of the third phase of Flatiron: Ruby. I was very excited about this phase because it transitioned our learning to backend development. I have experience in front-end development, but back-end development seemed so complex to learn on my own. I was also interested in “putting it all together”. In other words, understanding how a front-end communicates with the back-end, in order to give a user a full web experience.

Architectures I Used For My Back-End

MVC (Model-View-Controller)

Since my back-end is built with Ruby and ActiveRecord, I used MVC (Model View Controller) to build my server. This means a website sends a request to my server, the controller interprets the request and then requests the corresponding information from the models. The models then process and gather the information and send it back to the controller, where it’s then returned to the front-end (view).

RESTful API

I also used RESTful architecture for my API. A Rest API (Representational State Transfer Application Programming Interface) follows a set of rules that help a server and client communicate with each other. It breaks down requests (URLs) and responses (data, in our case JSON) into small actions that can be executed separately from one another. The actions consist of CRUD (Read/Get, Create/Post, Delete, Update) requests.

What I Used In My Project

React framework for my front-end
Ruby for my back-end
ActiveRecord to handle my models and communication with my database
Rack to create my server

Project Overview

I created a project task management app named Mercury (the god of commerce who was the mediator between gods and mortals. The middleman between people, goods, and messages). This app allows you to organize projects into boards and arrange tasks within each board. .

Mercury Models

Project

Has many boards
Has many tasks through boards

Boards

Belongs to a project
Has many tasks

Tasks

Belongs to a board
Has one project through a board

Project -------- < Board -------- < Task
:title             :name            :name  
:color             :project_id      :due_date
:favorite                           :description
                                    :status
                                    :priority
                                    :completed
                                    :board_id

Project Abilities

You can make all CRUD calls for Projects

CREATE a project
GET/READ all projects
GET/READ an individual project
DELETE a project
UPDATE a project

The Problem I Ran Into With Projects

When loading the Project Overview page, I only ended up needing the Project information and the tasks for each project to show the project progress bar. I didn’t need to show all boards associated with the project, so I didn’t. However, when you click on a project you do need the boards associated with the project to show all information. So I have to make another request to the server to get all the information needed. In hindsight, I could have sent board information on the first call to my server and then passed that individual project information down into a prop, saving me a call to the back-end.

Rack Implementation

class Application

 def call(env)
   resp = Rack::Response.new
   req = Rack::Request.new(env)

# projects get/read
 if req.path.match(/projects/) && req.get? #controller interprets the request given from the front-end

   #check if requesting all projects or an individual project
   if req.path.split("/projects/").length === 1
     # retrieve information from model and send back information to the front-end
     return [200, { 'Content-Type' => 'application/json' }, [ {:message => "projects successfully requested", :projects => Project.all}.to_json(:include => :tasks) ]]
   else
     project = Project.find_by_path(req.path, "/projects/")
     return [200, { 'Content-Type' => 'application/json' }, [ {:message => "project successfully requested", :project => project}.to_json(:include => { :boards => {:include => :tasks}}) ]]
   end #check if all projects or specific project

 end #end projects get request

   resp.finish
 end

end

Find_by_path was a custom method I added to my models. I wanted to move unnecessary code from my controller and into my models to keep the separation of MVC. The models are supposed to handle and parse the request. All of my models ended up needing this method so I moved it into a module and imported it into each model to DRY up my code.

module InheritMethods
   module ClassMethods
       def find_by_path(path, URL)
           id = path.split(URL).last.to_i
           find_by_id(id) #implicit self
       end
   end
end

require_relative './models_module'

class Project < ActiveRecord::Base
   extend InheritMethods::ClassMethods #extend is for class methods
   has_many :boards, dependent: :destroy
   has_many :tasks, through: :boards
end

Projects On The Front-End

When calling all projects I only wanted all tasks to show since I don’t need board information on my overview page. Task information is used to show project completion percentage.

When you click on an individual task I then make another call to the backend for the specific project to get all of the projects boards and tasks.

Board Abilities

You can make all CRUD calls for Boards

CREATE a board
GET/READ all boards
DELETE a board
UPDATE a board

The Problem I Ran Into With Boards

At first, when I was creating a new board, I was making a second call to fetch projects after the board was successfully added to my back-end. I wasn’t sending the new instance back to my front-end—just a successful message. I realized I could spare an unnecessary call if I just sent back the new instance after it was successfully posted.

Back-End Implementation

class Application

 def call(env)
   resp = Rack::Response.new
   req = Rack::Request.new(env)

# boards post/create
   elsif req.path.match(/boards/) && req.post?
     # parse JSON into a readable format for my back-end
     hash = JSON.parse(req.body.read)
     # check if the project ID passed in exists
     project = Project.find_by_id(hash["project_id"])

     # if project id was valid move on to creating the new board
     if project
       board = Board.new(name: hash["name"], project_id: hash["project_id"])
       if board.save
         return [200, { 'Content-Type' => 'application/json' }, [ {:message => "board successfully created", :board => board}.to_json ]] # send board back to front-end
       else
         return [422, { 'Content-Type' => 'application/json' }, [ {:error => "board not added. Invalid Data"}.to_json ]]
       end #end validation of post
     else
       return [422, { 'Content-Type' => 'application/json' }, [ {:error => "board not added. Invalid Project Id."}.to_json ]]
     end #if: check if project exists

end #end boards post request

   resp.finish
 end

end

Front-End Implementation

const handleCreateBoard = (newBoard) => {
   fetch('http://localhost:9393/boards/', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       accept: 'application/json',
     },
     body: JSON.stringify({
       name: newBoard.name,
       project_id: projectId,
     }),
   })
     .then((res) => res.json())
     .then((data) => {
       if (boards.length === 0) {
         setBoards([data.board])
       } else {
         setBoards((prevBoards) => {
           return [...prevBoards, data.board]
         })
       }
     })
 }

Creating a Board On The Front-End

Task Abilities

You can make all CRUD calls for Tasks

CREATE a task
GET/READ all tasks
DELETE a task
UPDATE a task

The Problem I Ran Into With Tasks

Tasks had the most information stored in them (name, due date, description, status, priority, completed, board id) and I wanted to make sure that all the information was easily implemented when creating a new task.

I could use a lot of validation on the front-end to make sure the user was inputting in the required information, but it seemed less efficient. Instead, I decided it should be the responsibility of the back-end.

Back-End Implementation

require_relative './models_module'

class Task < ActiveRecord::Base
   extend InheritMethods::ClassMethods #extend is for class methods

   belongs_to :board
   has_one :project, through: :board

   def self.create_new_task_with_defaults(hash)
       name = hash["name"] ? hash["name"] : "New Task"
       status = hash["status"] ? hash["status"] : "Not Started"
       priority = hash["priority"] ? hash["priority"] : "Low"
       completed = hash["completed"] ? hash["completed"] : false
       self.new(
           name: name,
           due_date: hash["due_date"],
           description: hash["description"],
           status: status,
           priority: priority,
           completed: completed,
           board_id: hash["board_id"]
       )
   end
end

class Application

 def call(env)
   resp = Rack::Response.new
   req = Rack::Request.new(env)

   # tasks post/create
   elsif req.path.match(/tasks/) && req.post?
     hash = JSON.parse(req.body.read)
     board = Board.find_by_id(hash["board_id"])

     if board
       task = Task.create_new_task_with_defaults(hash) #custom method

       if task.save
         return [200, { 'Content-Type' => 'application/json' }, [ {:message => "task successfully created", :task => task}.to_json ]]
       else
         return [422, { 'Content-Type' => 'application/json' }, [ {:error => "task not added. Invalid Data"}.to_json ]]
       end #end validation of post
     else
       return [422, { 'Content-Type' => 'application/json' }, [ {:error => "task not added. Invalid Board Id."}.to_json ]]
     end #if: check if board  exists

end #end task post request

   resp.finish
 end

end

Creating a Task On The Front-End

Final Thoughts

This has been my favorite project so far because it helped me understand how the front-end and back-end communicate with each other. It was also my first ever back-end project and it wasn’t as scary as I thought it would be. It was the unknown that seemed to be the problem rather than the material itself.

I would like to add a sign-in/register form to create users. This would allow users to be added to projects and a project to have my users. I would need to create a joiner table that belongs to a project and belongs to a user, making my models a little more complicated but users are a very real part of websites so I would like to incorporate it into Mercury.

Thank you for going with me on this journey! The next stop is phase 4: Ruby on Rails so stay tuned.

State Adventures: My First React Project

Christine Contreras — Tue, 10 Aug 2021 15:38:36 +0000

I am finally finished with my second phase of Flatiron. Like at the end of every phase, we had to create a project that encompasses all of our learnings so far. Last phase, I created a project that incorporated Javascript and APIs (you can view it here). This phase, I learned how to use the React framework.

What I Used In My Project

React framework
The National Park Service API is used to pull in national park information
Weatherstack API is used to pull in current weather for each national park
Google Maps API is used to show campgrounds for each national park
JSON Server was used in this project to save each national park
React Router DOM used to create navigation in the single-page app
Material UI to style my app

Project Overview

During the pandemic, when everything started closing down, I got interested in spending more time in nature. I have always wanted to go to more national parks but didn’t know where to start. To solve that, I created the State Adventures app, which lets you search national parks by state, see park overviews, and view campsites.

See National Parks by State

-When the app loads, an automatic call to the National Parks API is requested and four random national parks are generated for the user. This allows content to populate before the form is used.

//snippet of home component
 export class Home extends Component {
   state = {
       selectedParks: [],
       selectedState: null,
       defaultParks: [],
   }

   componentDidMount() {
       //fetch default parks
       fetch(`https://developer.nps.gov/api/v1/parks?api_key=${apiKey}&limit=50`)
       .then(response => response.json())
       .then(json => {
           const newArray = []
           for(let i = 0; i < 4; i++) {
               newArray.push(json.data[Math.floor(Math.random()*json.data.length)])
           }
           this.setState({
           defaultParks: newArray,
           })

       })
   }

-The hero of the app contains a controlled form that lets you choose a state to view. Once the form is submitted, the state is sent back to the parent component in a callback function to make another request to the National Parks API. The national parks are each populated on their own card and the state chosen is added to the page title.

//controlled form component
export class Form extends Component {
   state = {
       stateAbbreviations: [
           'AL','AK','AS','AZ','AR','CA','CO','CT','DE','DC','FM','FL','GA',
           'GU','HI','ID','IL','IN','IA','KS','KY','LA','ME','MH','MD','MA',
           'MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND',
           'MP','OH','OK','OR','PW','PA','PR','RI','SC','SD','TN','TX','UT',
           'VT','VI','VA','WA','WV','WI','WY'
          ],
          selectedState: ""
   }

   handleChange = (event) => {
       this.setState({
           [event.target.name]: event.target.value
       })
   }

   handleSubmit = (event) => {
       event.preventDefault()
       this.props.fetchingParks(this.state.selectedState)
   }


   render() {
       return (
           <form className="hero-form" onSubmit={this.handleSubmit}>
               <ButtonGroup>
                   <FormControl variant="outlined" color="secondary">
                       <InputLabel id="select-state">Select State</InputLabel>
                       <Select
                       labelId="select-state"
                       name="selectedState"
                       value={this.state.selectedState}
                       onChange={this.handleChange}
                       >
                           {
                           this.state.stateAbbreviations.map(state => (
                               <MenuItem value={state} key={state}>{state}</MenuItem>
                           ))
                           }
                       </Select>
                   </FormControl>

                   <Button
                   type="submit"
                   variant="contained"
                   color="primary"
                   size="large"
                   >
                       Find Parks
                   </Button>
               </ButtonGroup>
           </form>
       )
   }
}

//snippet of fetching Parks API from home component
fetchParksApi = (stateAbbr = null) => {
       //fetch parks by state
       fetch(`https://developer.nps.gov/api/v1/parks?stateCode=${stateAbbr}=&api_key=${apiKey}`)
       .then(response => response.json())
       .then(json => {
         this.setState({
           selectedParks: json.data,
           selectedState: stateAbbr
         })

       })
     }

See Details of a National Park

-If you click “view park,” you will be taken to an overview page about the national park. You’ll see information about the park, park hours, park directions, entrance fees, activities, and current park weather.

-When the overview component is rendered, an API call is made to the Weatherstack API to pull in current weather based on the park's address. The rest of the information on the page comes from the National Parks Service API.

//API call for Weather
export class ParkWeather extends Component {
   state = {
       temp: null,
       tempDetails: null
   }

   componentDidMount(){
       const validAddress = this.props.address.find(a => a.type === "Physical")

       fetch(`http://api.weatherstack.com/current?access_key=${apiKey}&units=f&query=${validAddress.postalCode}`)
       .then(res => res.json())
       .then(json => {
            this.setState({
               temp: json.current.temperature,
               tempDetails: json.current.weather_descriptions[0]
           })
       })
   }

-You can view the park's campsites by clicking on the page's sub-navigation “camping” link. When the camping component is rendered it makes a separate call to the National Parks Service API to pull in campsites for the national park and add them to the components state. If there aren’t any campgrounds, a muted screen will show to the user.

-If there are campsites, the Google Maps API will plot them onto the map. When a campsite is clicked, the campsite information will display. This includes campsite description, hours, cost, reservation policy, and directions.

//camping component snippet
export class ParkCamping extends Component {
   state = {
       campgrounds: [],
       selectedCampground: null
   }

   componentDidMount() {

       fetch(`https://developer.nps.gov/api/v1/campgrounds?parkCode=${this.props.parkcode}=&api_key=${apiKey}&limit=500`)
       .then(res => res.json())
       .then(json => {
           this.setState({
               campgrounds: json.data
           })
       })
   }

   handleCampgroundClick = (campground) => {
       this.setState({
           selectedCampground: campground
       })
   }

   handleCampgroundWindowClick = () => {
       this.setState({
           selectedCampground: null
       })
   }
   render() {
       const height = document.getElementById('park-details').offsetHeight

       return (
           <>
           <Grid item
           xs={12} sm={12} md={this.state.selectedCampground ? 6 : 9}
           className="details-map">
        //Google API map
               <CampingMap
               longitude={parseInt(this.props.longitude)}
               latitude={parseInt(this.props.latitude)}
               campgrounds={this.state.campgrounds}
               selectedCampground={this.state.selectedCampground}
               handleCampgroundClick={this.handleCampgroundClick}
               handleCampgroundWindowClick={this.handleCampgroundWindowClick}
                />
           </Grid>

           {this.state.selectedCampground && (
               <CampingInfo
               height={height}
               campground={this.state.selectedCampground}/>
           )}
           </>
       )
   }
}

Saving a National Park

-You can “like” a national park directly from the national park card or within the overview page. When you “like” a park, it is added to state and posted to the JSON server so that the liked park persists throughout app changes and/or refreshes. It will then show up under your “liked parks”.

-If the heart is clicked again it will remove the park from state, remove it from the JSON server, and no longer show up in your “liked parks”

//app component
  state = {
   savedParks: []
 }

handleSaveParks = (newPark) => {
   const configData = {
     method: 'POST',
     headers: {
       'accept': 'application/json',
       'content-type': 'application/json'
     },
     body: JSON.stringify(newPark)
   }

   fetch('http://localhost:3000/parks', configData)

   this.setState(previousState => ({
     savedParks: [...previousState.savedParks, newPark]
   })
 )
 }

 handleUnsavePark = (removePark) => {
   const newSavedParks = this.state.savedParks.filter(park => park !== removePark)

   this.setState({
     savedParks: newSavedParks
   })

   fetch(`http://localhost:3000/parks/${removePark.id}`, {
     method: 'DELETE'
   })
 }

//snippet of park card with like button
<CardActions className="card-actions">
                   { parkIsSaved === undefined ?
                   <Tooltip title="Save Park" arrow>
                       <IconButton color="primary"
                       onClick={() => handleSaveParks(parkInfo)}
                       >
                           <FavoriteBorderIcon />
                       </IconButton>
                   </Tooltip>
                   :
                   <Tooltip title="Remove Park" arrow>
                   <IconButton color="primary"
                   onClick={() => handleUnsavePark(parkInfo)}
                   >
                       <FavoriteIcon />
                   </IconButton>
                   </Tooltip>
                   }

                   <Button
                   variant="text"
                   size="large"
                   color="primary"
                   endIcon={<TrendingFlatIcon />}
                   onClick={viewParkButtonClick}
                   >
                       View Park
                   </Button>
               </CardActions>

Creating Navigation with a Single Page App

With a single page app the beauty of it is there is only one page that all elements populate on. However, it doesn’t allow for a user to navigate the site with URLs. This is where I used React Router to help build navigation within my React App.

-I utilized The React Router’s built-in history method of push() to direct the user to the URL path they intended to visit. I used it in the primary navigation and the overview sub-navigation.

-I used the built-in location pathname property to show which page the user is on. If it matched the current path I added a class to the element to change the link’s styling.

-I also used the built-in history method of goBack() on the park-details pages to allow the user to go back to the homepage or overview page easily if needed.

Final Thoughts

React helped me better understand object oriented programming (OOP) by the way it is structured. Class components can be used as many times as needed and have properties they can pass down to their children components or carry individual attributes known as state. It is becoming more debatable if React is more OOP or functional now with hooks. Nevertheless, it helped me understand OOP better than I did before learning the framework.

I had a fun time learning React and Material UI to efficiently build out a single-page app. It gave me more time to build out features rather than focusing on styling and function interactions like I did for my first project. I focused a lot on React class components in this build but want to spend more time understanding React functional components and hooks in the future.

Perfect Date: A Javascript and API Project

Christine Contreras — Sat, 29 May 2021 23:17:00 +0000

I am currently a Flatiron student. Our first phase focused on the fundamentals of Javascript and understanding APIs. At the end of this phase, we have to synthesize our learnings into a one-page app that interests us and showcases our understanding. I want to share an overview of my project as well as the two parts of the project that I struggled with but ultimately learned the most from.

What is an API and Why They Are Amazing

Before I get into my project, let’s break down what an API is. API stands for “Application Programming Interface” and is an intermediary between two applications so that they can communicate with each other.

Companies (like Google) or organizations (like Governments) use API’s to share information or functionality with us so we can use the data to build projects. There are free API’s out there open to anybody who wants to use them.

For this project, I used the Weatherstack API. They have a free version where you can view current weather but I paid to use their historical weather database. API’s make it easy for you to use by providing documentation on how to access the data and what data is available for use.

Perfect Date Overview

I am currently in the beginning stages of planning a wedding and one of the main parts of a wedding you can’t control is the weather. But I can tilt the odds in my favor by picking a wedding date that has had historically good weather. That is where the concept for the Perfect Date app came from. It lets you plan big events, whether that’s a wedding or an awesome vacation, around historical weather data.

See Average Weather Data By Location and Month

The first part of my app is the form. You input your location, month, and timeframe you want to see weather data for. For the time frame, you can pick from last year through the past 5 years of weather data.

Once the API request is made a calendar view of the averages is created. The example below shows the average data for Miami from 2021-2020. For the icons and weather description, it is showing the mode for the aggregated data. If there is no mode then it shows the most recent icon and weather description.

See Breakdown Of Weather Date For A Specific Day

If you click “see details” on an individual day you can see the breakdown of weather data by year.

Save Your Dates and Compare

If you click “save this date” it will save the data into a JSON server (a local one that I set up). Click “see all saved dates” and it will break down your saved dates by location. If you save multiple dates and locations it will break down the dates by location.

App Problems and Solutions

I thought about this app 24/7 for a week straight and how to make it work when I ran into a problem. This included jolting up in the middle of the night with solutions and writing them down so I can try them first thing in the morning. Two problems came up with this application that made me want to cry at times because I hadn’t learned about the solution in Flatiron yet.

Problem #1: Grouping Data Together From API

The first challenge I ran into was that the Weatherstack API only lets you fetch historical weather data 60 days at a time. That meant that depending on how many years of data you want to compare I had to make a separate fetch to the API for each year. So instead of averaging the data once it’s called from the API I needed to store and group the data accurately from each API call before I could average the data.

The second part of this problem was grouping the dates accurately. I didn’t want to group each 1st of March together but each first Friday of the month together. They are not one in the same since dates move each year by one day or more depending on whether it’s a leap year.

My Solution

I decided to create an array for each combination of week and day of the week in a month. Depending on the month you are looking at and in what year, the max amount of weeks to show on a calendar are 6 weeks. With 7 days in a week, it came out to 42 combinations. (Although I try to avoid declaring variables with var, in this case, it was the only way I could declare the variables and they still work for my solution).

//create arrays to push API data. array push corresponds with week and day of week the object falls on
Var [week1Day0,week1Day1,week1Day2,week1Day3,week1Day4,week1Day5,week1Day6,week2Day0,week2Day1,week2Day2,week2Day3,week2Day4,week2Day5,week2Day6,week3Day0,week3Day1,week3Day2,week3Day3,week3Day4,week3Day5,week3Day6,week4Day0,week4Day1,week4Day2,week4Day3,week4Day4,week4Day5,week4Day6,week5Day0,week5Day1,week5Day2,week5Day3,week5Day4,week5Day5,week5Day6,week6Day0,week6Day1,week6Day2,week6Day3,week6Day4,week6Day5,week6Day6] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];

I then created two functions to help me figure out the week and day of the week a day falls on with the parameters of the month, year, day.

//day of week
function dayOfWeek (month, year, day) {
   let dayOfWeek = new Date(year, month, day).getDay();
   return dayOfWeek;
}

// week of month
function weekOfMonth (day, start) {
   return Math.ceil((day + start) / 7);
}

When I fetch from the API the date pulled in is formatted as a string in the format below.

{
"historical": {
        "2021-03-01": {
            "date": "2021-03-01",
            "date_epoch": 1614556800,
            "astro": {
                "sunrise": "07:57 AM",
                "sunset": "07:30 PM",
                "moonrise": "10:18 PM",
                "moonset": "09:41 AM",
                "moon_phase": "Waning Gibbous",
                "moon_illumination": 79
            },
            "mintemp": 50,
            "maxtemp": 55,
            "avgtemp": 54,
            "totalsnow": 0,
            "sunhour": 7.3,
            "uv_index": 3,
            "hourly": [...]
}
}

I needed to break up the date so I could then add it into my functions. Once the string was split, I was able to find the week and day of the week the date fell on. Then, I had to push the date into the accurate array. It was difficult for me to find online how to create and push data into a dynamic variable name. As stated above, the only method that worked was to set the initial arrays to vars instead of const and then push the date objects into each array using window.

Ideally, I would have liked to not declare the empty arrays and just create each new empty array with a dynamic variable name as they came up. I could not figure out how to do that so this was my solution.

//push each date into the right array
for(const date in datesObject) {
   const data = datesObject[date];

    let dateArray = data.date.split('-');
    let dateDay = parseInt(dateArray[2]);

    let dateMonth = parseInt(dateArray[1]) - 1;
    let dateDayOfWeek = dayOfWeek(dateMonth, dateArray[0], dateArray[2]);
    let dateWeekOfMonth = weekOfMonth(dateDay, startDay);

               window[`week${dateWeekOfMonth}Day${dateDayOfWeek}`].push(data);

}

Problem #2: Waiting For API data to Push to Arrays Before Creating Averages

Typically Javascript runs synchronously and in a single thread. That means that it waits for the code above it to finish before moving onto the next line of code. However fetch is asynchronous. This means that Javascript doesn’t wait for an API fetch to be done before it runs the next line of code. This is typically a good thing for a website since you don’t know how long and if a fetch will come back and you don’t want a user waiting forever for the page to load. However, this project is solely about fetching API data and relies 100% on the API data.

At first, the fetch request to the API would be sent but then my calendar would be created with blank li’s because it would continue running my code without the API data in the corresponding arrays. Essentially I needed to stop the rest of my code from running and only continue once I fetched the API data.

My Solution

The solution I found online was async functions. I will not try to claim all knowledge about async functions but found this video helpful in explaining async functions and how to create them. Essentially async functions let you use the keyword await. This lets the function “wait” for a promise to be given back before it runs the next line of code. This means I had to wrap my fetchSubmit and createDatesInCalendar functions each in a promise and pass them back into my async function. Once I created the async function it worked as intended!

//example of my createDatesInCalendar function wrapped in a promise
function createDatesInCalendar() {
   return new Promise(resolve => {
       var dayOfMonthArrays = [week1Day0,week1Day1,week1Day2,week1Day3,week1Day4,week1Day5,week1Day6,week2Day0,week2Day1,week2Day2,week2Day3,week2Day4,week2Day5,week2Day6,week3Day0,week3Day1,week3Day2,week3Day3,week3Day4,week3Day5,week3Day6,week4Day0,week4Day1,week4Day2,week4Day3,week4Day4,week4Day5,week4Day6,week5Day0,week5Day1,week5Day2,week5Day3,week5Day4,week5Day5,week5Day6,week6Day0,week6Day1,week6Day2,week6Day3,week6Day4,week6Day5,week6Day6]

       dayOfMonthArrays.forEach(day => {
           let id;

           //if array is empty create empty list item else create list item with array info
           if (day.length === 0){
               id = dayOfMonthArrays.indexOf(day);
               emptyLi(id);
           } else {
               let newObject = {};
               id = dayOfMonthArrays.indexOf(day);
               createAverageObjects(day, newObject, id);
           }

           //save arrays with API objects into new array so we can access data later
           return dateArrayObject.push(day);
       });

       resolve('day averages function finished');

   });

}

//how many times to fetch API data (fetch for each year of data). wait for fetches to be done before calculating averages
   if(timeframeIndex === 0){
       async function getData(){
           await fetchSubmit(locationInput, monthNum, monthIndex, year1, numDays);
           await createDatesInCalendar();
       }
       getData();

   } else if(timeframeIndex === 1){
       async function getData(){
           await fetchSubmit(locationInput, monthNum, monthIndex, year1, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year2, numDays);
           await createDatesInCalendar();
       }

       getData();

   } else if(timeframeIndex === 2) {
       async function getData(){
           await fetchSubmit(locationInput, monthNum, monthIndex, year1, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year2, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year3, numDays);
           await createDatesInCalendar();
       }

       getData();

   } else if(timeframeIndex === 3){
       async function getData(){
           await fetchSubmit(locationInput, monthNum, monthIndex, year1, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year2, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year3, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year4, numDays);
           await createDatesInCalendar();
       }

       getData();

   } else {
       async function getData(){
           await fetchSubmit(locationInput, monthNum, monthIndex, year1, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year2, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year3, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year4, numDays);
           await fetchSubmit(locationInput, monthNum, monthIndex, year5, numDays);
           await createDatesInCalendar();
       }

       getData();
   }

Final Thoughts

Building this app was a great challenge and I loved doing it. I would like to make improvements to the app, such as organizing the saved dates page more and being able to select saved dates to compare them side by side.

I am new to Javascript and API’s so if you know a better solution to my struggles please share them in the comments! I feel like the code above could be more DRY and/or shorter and am always looking to improve my coding.

7 Ways to Iterate Over Arrays and When to Use Each

Christine Contreras — Sat, 17 Apr 2021 21:52:12 +0000

Accessing data within arrays and objects is an important part of Javascript that every beginner should know. There are a few common methods to iterate over arrays and objects as well as best practices of when to use each.

Iteration: the process of executing a set of statements once for each element in a collection.

A common scenario you will find yourself in while coding is needing to execute the same code over each element in an array. Instead of having to run the code for each element in a collection manually, you can iterate through the collection with built-in array methods.

The `forEach()` Method

The forEach method was created in ES5 to iterate over a collection of items without having to build out a for loop. It takes a callback function as its argument and executes the function once for each element in an array. One of the benefits of using forEach to iterate over arrays is that it's a non-destructive method, meaning it doesn't change the original array.

const menuItems = ['cobb salad', 'hummus dip', 'tomato soup', 'chicken sandwich', 'veggie wrap']

menuItems.forEach(item => console.log(`you ordered a ${item} today.`))
// you ordered a cobb salad today.
// you ordered a hummus dip today.
// you ordered a chicken soup today.
// you ordered a chicken sandwich today.
// you ordered a veggie wrap today.

console.log(menuItems)
//['cobb salad', 'hummus dip', 'tomato soup', 'chicken sandwich', 'veggie wrap']

This method doesn't have a return value. If you are looking to create a new array with an output you will need to create an empty array and push the new outputs to the array. However, this isn't the most efficient way to create a new array. If you want to return a new array there are other methods in this post you can use instead.

const menuItems = ['cobb salad', 'hummus dip', 'tomato soup', 'chicken sandwich', 'veggie wrap']
const menuStatements = []

menuItems.forEach(item => menuStatements.push(`you ordered a ${item} today.`))

menuStatements
//["you ordered a cobb salad today., "you ordered a hummus dip today.", "you ordered a tomato soup today.", "you ordered a chicken sandwich today.", "you ordered a veggie wrap today."]

When to use

The forEach method should be used sparingly. Use cases for this method are to log errors in a code, or when you want to mutate the original array or object.

The `for...of` & `for...in` Statements

These statements were created specifically to loop over arrays and objects. They are very similar to forEach with one major benefit. In a forEach method it will run the callback function over every element in a collection no matter what. With for...in and for...of you can add in control flows(continue, break, return, await).

`for...in`

for...in can loop over both arrays and objects but is most commonly used with objects.

const menu = {
  appetizer: 'hummus dip',
  entree: 'chicken sandwich',
  dessert: 'cake'
}

for (const key in menu) {
  console.log(`For your ${key}, we will be serving you a ${menu[key]}.`)
}
//For your appetizer, we will be serving you a hummus dip.
//For your entree, we will be serving you a chicken sandwich.
//For your dessert, we will be serving you a cake.

Although for...in can loop through arrays, it's discouraged because it doesn't keep elements in a collection in index order. That's where the for...of loops come in handy.

`for...of`

The for...of statement takes into account the order of elements in a collection. This is great for arrays because it keeps the outputs in index order.

const menuItems = ['cobb salad', 'hummus dip', '', 'tomato soup', 'chicken sandwich', 'veggie wrap']

for (const item of menuItems) {
  if (item.length === 0) break
  console.log(`you ordered a ${item} today.`)
}
//you ordered a cobb salad today.
//you ordered a hummus dip today.
//breaks after empty element

These statements still don't create a new array with the outcomes, just like forEach. Both of these methods are also not expressive, meaning they take coders longer to read through your code in order to understand your intent.

When to use

Use the for...in loop to quickly pull properties from an object and a for...of to quickly run through elements in an array without needing to create a new array with the results.

The `find()` Method

find() passes in a callback function as an argument. The method then loops through each element in an array and passes it through the function. The callback runs until an element meets the criteria.

const orders = [
  {appetizer: 'hummus dip', entree: 'avocado wrap', dessert: 'cake'},
  {appetizer: 'salad', entree: 'chicken sandwich', dessert: 'ice cream'},
  {appetizer: 'chips', entree: 'chicken sandwich', dessert: 'cake'}
]

orders.find(order => order.dessert === 'cake')
//{appetizer: "hummus dip", entree: "avocado wrap", dessert: "cake"}

As you can see two objects in the array meet the criteria but only one was returned. That is because the find method returns as soon as one element meets the criteria.

When to use

Use find when you want to loop through an array using a complex callback function. This method is expressive and lets other coders understand that you are trying to loop through an array looking for only one element that meets the criteria.

The `filter()` Method

The filter method is similar to find but returns all elements in an array that meet the criteria. This method also returns a new array of all elements that meet the criteria.

const orders = [
  {appetizer: 'hummus dip', entree: 'avocado wrap', dessert: 'cake'},
  {appetizer: 'salad', entree: 'chicken sandwich', dessert: 'ice cream'},
  {appetizer: 'chips', entree: 'chicken sandwich', dessert: 'cake'}
]

const cake = orders.filter(order => order.dessert === 'cake')

cake
//[{appetizer: "hummus dip", entree: "avocado wrap", dessert: "cake"}, {appetizer: 'chips', entree: 'chicken sandwich', dessert: 'cake'}]

When to use

Use filter when you want to loop through an array using a complex callback function and return all elements that meet the criteria. You can use this method to filter duplicates out of an array or find all similar objects in an array. This method is also expressive and lets other coders know to look for a new array of all the elements that meet the criteria.

The `map()` Method

So far the filter and find methods just pass back elements from an array. map transforms elements within an array and creates a new array for the values.

const orders = [
  {appetizer: 'hummus dip', entree: 'avocado wrap', dessert: 'cake'},
  {appetizer: 'salad', entree: 'chicken sandwich', dessert: 'ice cream'},
  {appetizer: 'chips', entree: 'chicken sandwich', dessert: 'cake'}
]

const drinks = orders.map( order => {
  return Object.assign({}, order, {
    drink: 'water'
  });
});

drinks
//[
//{appetizer: 'hummus dip', entree: 'avocado wrap', dessert: 'cake', drink: 'water'},
//{appetizer: 'salad', entree: 'chicken sandwich', dessert: 'ice cream', drink: 'water'},
//{appetizer: 'chips', entree: 'chicken sandwich', dessert: 'cake', drink: 'water'}
//]

When to use

Use map when you want to non-destructively update objects with new key pair values, reformat objects, and change the values of the array such as multiplying all values by a number. This method is expressive and lets other coders know to look for a new array with transformed values.

The `reduce()` Method

The reduce method also transforms an array but reduces it into a singular value.

const orders = [
  {appetizer: 'hummus dip', entree: ['avocado wrap','chicken soup'], dessert: 'cake'},
  {appetizer: 'salad', entree: ['chicken sandwich', 'veggie wrap'], dessert: 'ice cream'},
  {appetizer: 'chips', entree: ['chicken sandwich', 'burger'], dessert: 'cake'}
]

let allEntrees = orders.reduce(
  (accumulator, currentValue) => [...accumulator, ...currentValue.entree],
[]
)

allEntrees
//["avocado wrap", "chicken soup", "chicken sandwich", "veggie wrap", "chicken sandwich", "burger"]

In this case, we were able to combine all entrees into a singular array. The callback has two mandatory arguments. The first is the accumulator argument. This is the accumulated value for the previously returned value in the loop. Above, in the first iteration, the accumulator is an empty array.

The second iteration accumulator value is the array of the first object's entrees (['avocado wrap','chicken soup']), and so on. The second argument is the currentValue. This is the current element in the array that is being run through the callback function.

When to use

Use reduce when you want to transform an array into a singular value. This method is great to concatenate arrays, sum up values in an array, flatten arrays, and count instances of values in objects.