cayeborreo/2020-budget

Saan aabot ang 8.2 billion pesos mo? 🇵🇭

Hi there! I'm Caye. Nice to meet you 👋

• I'm based in Manila, Philippines, and I've been building things on the web since 2018.
• I primarily use Javascript (React, Node, GraphQL), occasionally Python (Django) for my projects. Sometimes I write what I learn on Medium (mcborreo).
• I'm not currently looking for opportunities, but feel free to be in touch at [email protected].

2020-budget's Issues

fix social media links

edit SEO

move wallet banner to top and add margin-top to Layout

• Obstructive on mobile

build error on sourcing data from google sheets

• Installed gatsby-source-google-sheets
• See spreadsheet here for master list of shop items
• Reach me for .env variables
• Works on localhost and data is sourced properly, but fails on deployment

3:29:52 PM: Build ready to start
3:29:54 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
3:29:54 PM: build-image tag: v3.3.2
3:29:54 PM: buildbot version: 16db6527b4cafa2553c3f3f11aa8d1b46a72ff40
3:29:54 PM: Fetching cached dependencies
3:29:54 PM: Starting to download cache of 190.6MB
3:29:55 PM: Finished downloading cache in 1.417144831s
3:29:55 PM: Starting to extract cache
3:30:02 PM: Finished extracting cache in 6.321721447s
3:30:02 PM: Finished fetching cache in 7.793609553s
3:30:02 PM: Starting to prepare the repo for build
3:30:02 PM: Preparing Git Reference refs/heads/master
3:30:03 PM: Starting build script
3:30:03 PM: Installing dependencies
3:30:04 PM: Started restoring cached node version
3:30:06 PM: Finished restoring cached node version
3:30:06 PM: Attempting node version '11.6.0' from .nvmrc
3:30:07 PM: v11.6.0 is already installed.
3:30:07 PM: Now using node v11.6.0 (npm v6.5.0-next.0)
3:30:08 PM: Attempting ruby version 2.6.2, read from environment
3:30:09 PM: Using ruby version 2.6.2
3:30:09 PM: Using PHP version 5.6
3:30:09 PM: Started restoring cached node modules
3:30:09 PM: Finished restoring cached node modules
3:30:09 PM: Started restoring cached yarn cache
3:30:09 PM: Finished restoring cached yarn cache
3:30:10 PM: Installing NPM modules using Yarn version 1.17.0
3:30:11 PM: yarn install v1.17.0
3:30:11 PM: [1/4] Resolving packages...
3:30:11 PM: [2/4] Fetching packages...
3:30:35 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:30:35 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:30:35 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:30:35 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:30:35 PM: [3/4] Linking dependencies...
3:30:35 PM: warning "gatsby > [email protected]" has incorrect peer dependency "[email protected]".
3:30:35 PM: warning "gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
3:30:35 PM: warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
3:30:46 PM: [4/4] Building fresh packages...
3:31:11 PM: Done in 60.40s.
3:31:11 PM: NPM modules installed using Yarn
3:31:11 PM: Started restoring cached go cache
3:31:11 PM: Finished restoring cached go cache
3:31:12 PM: unset GOOS;
3:31:12 PM: unset GOARCH;
3:31:12 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
3:31:12 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
3:31:12 PM: go version >&2;
3:31:12 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
3:31:12 PM: go version go1.12 linux/amd64
3:31:12 PM: Installing missing commands
3:31:12 PM: Verify run directory
3:31:12 PM: Executing user command: gatsby build
3:31:15 PM: success open and validate gatsby-configs — 0.058
3:31:16 PM: success load plugins — 1.165
3:31:16 PM: success onPreInit — 0.051
3:31:16 PM: success delete html and css files from previous builds — 0.073
3:31:16 PM: success initialize cache — 0.045
3:31:16 PM: success copy gatsby files — 0.103
3:31:16 PM: success onPreBootstrap — 0.049
3:31:16 PM: FETCHING SHEET function fetchData(_x2, _x3, _x4) {
3:31:16 PM:     return _ref.apply(this, arguments);
3:31:16 PM:   }
3:31:16 PM: error #11321 PLUGIN error:0906D06C:PEM routines:PEM_read_bio:no start line
3:31:16 PM: "gatsby-source-google-sheets" threw an error while running the sourceNodes lifecycle:
3:31:16 PM: error:0906D06C:PEM routines:PEM_read_bio:no start line
3:31:16 PM: See our docs page for more info on this error: https://gatsby.dev/issue-how-to
3:31:16 PM: 
3:31:16 PM:   Error: error:0906D06C:PEM routines:PEM_read_bio:no start line
3:31:16 PM:   
3:31:16 PM:   - sig.js:84 Sign.sign
3:31:16 PM:     internal/crypto/sig.js:84:29
3:31:16 PM:   
3:31:16 PM:   - index.js:152 Object.sign
3:31:16 PM:     [repo]/[gtoken]/[jwa]/index.js:152:45
3:31:16 PM:   
3:31:16 PM:   - sign-stream.js:32 Object.jwsSign [as sign]
3:31:16 PM:     [repo]/[gtoken]/[jws]/lib/sign-stream.js:32:24
3:31:16 PM:   
3:31:16 PM:   - index.js:241 GoogleToken._signJWT
3:31:16 PM:     [repo]/[gtoken]/lib/index.js:241:25
3:31:16 PM:   
3:31:16 PM:   - index.js:195 GoogleToken._requestToken
3:31:16 PM:     [repo]/[gtoken]/lib/index.js:195:15
3:31:16 PM:   
3:31:16 PM:   - index.js:77 GoogleToken.getToken
3:31:16 PM:     [repo]/[gtoken]/lib/index.js:77:19
3:31:16 PM:   
3:31:16 PM:   - jwtclient.js:137 
3:31:17 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:31:16 PM:     [repo]/[google-auth-library]/lib/auth/jwtclient.js:137:21
3:31:16 PM:   
3:31:16 PM:   - jwtclient.js:226 JWT._createGToken
3:31:16 PM:     [repo]/[google-auth-library]/lib/auth/jwtclient.js:226:12
3:31:17 PM: Shutting down logging, 44 messages pending
3:31:16 PM:   

• Temporarily commented out code on sourcing data and hard-coded an array of items instead

better website copy at homepage

• Users need to scroll to bottom to go Let's go shopping!
• Text probably too long

add contributors' page

error on querying images

Folder structure

.
├── ...
├── src
│   ├── components
│   ├── context
│   ├── images
│        └── presidential-photo.jpg
│   ├── pages
│        └── index.js
│   └── styles
└── ...

gatsby-config.js

plugins: [
    ...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    ...
]

index.js

import React from "react"
import { Link, useStaticQuery } from "gatsby"
import { graphql } from "graphql"
import Img from "gatsby-image"

import Layout from "../components/layout/layout"
import SEO from "../components/layout/seo"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    {
      presidentialPhoto: file(
        relativePath: { eq: "images/presidential-photo.jpg" }
      ) {
        childImageSharp {
          fluid(maxWidth: 800) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  const image = data.presidentialPhoto.childImageSharp.fluid
  console.log(image)
  return (
    <Layout>
      <SEO title="Home" />
      ...
      <Img fluid={image} alt="Presidential Photo" />
      ...
    </Layout>
  )
}

export default IndexPage

Resulting error

Things I already tried:

• Clearing cache and restarting server
• Querying through http://localhost:8000/___graphql:

  query {
     presidentialPhoto: file(
       relativePath: { eq: "images/presidential-photo.jpg" }
     ) {
       childImageSharp {
         fluid(maxWidth: 800) {
           base64
           tracedSVG
           aspectRatio
           src
           srcSet
           srcWebp
           srcSetWebp
           sizes
           originalImg
           originalName
           presentationWidth
           presentationHeight
         }
       }
     }
   }

  ...but the result is still:

  {
    "data": {
      "presidentialPhoto": null
    }
  }

• Editing gatsby-source-filesystem in gatsby-config to:

  {
     resolve: `gatsby-source-filesystem`,
     options: {
       name: `images`,
       path: path.join(__dirname, `src`, `images`),
     },
   }

  ...but still shows same error

add a reset cart button

• Bottom part of shop.js
• All cart items will be reset to 0

populate shopping items

Add to alternativeItems.json

Rules

• Fill out the 4 required fields: description, price, imgurl, label
  • Additional fields imgcredit (e.g. unsplash, etc) and itemcredit (aka your Twitter handle/name since you added the item) can be added
  • Please sort by price
• No two items should have the same price. Currently, price = id na rin ng item hahaha
• Please include items na makabuluhan
  • For example, yung modern jeepney na 2.2M kako. Mga ganoyn. Or PGH renovation, pero look up the figures pa HAHAH
  • Insert daily life purchases + pangarap purchases din in between para people can still relate. Gadgets, concert tickets, trip to ganito ganyan, isang bucket ng Red Horse, Stan Smiths. Ewan HAHA
  • If we were to ratio it: 2:1:1 daily life:pangarap:makabuluhan
• Will only accept maximum of 4 items per person :) (na subject to review hahah) Shelemz!

Examples

style prices at /shop to tags

Expected behavior

• Expected (left) vs Current (right)
• Bulma classes used: tag is-medium
  • Check documentation here: https://bulma.io/documentation/elements/tag/

Also better if this can be fixed alongside issue #21 :)

host images

• Cannot put all in static folder- too big to serve all at once
• Host here in Github then link URLs? (How will Gatsby image work?)
• Or host somewhere (Cloudinary, S3?)

remove "may sukli ka pang: {change}" if wallet === 0

cart.js

input should return max quantity only, so wallet !== negative number

Expected behavior

• If input > max, return max (in this case, 10)
• ❓ Should we bind it to onKeyDown, onChange, onKeyPress???

animate page transitions

• Looking into react-transition-group, but open to suggestions ❤️

customize scrollbar

Sample

• https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
• Use $primary (Bulma teal)

format quantity in cart as xx,xxx,xxx (use formatNumber from utils)

Current behavior

Expected behavior

use gatsby-image to serve images

update prices of sample items

• check out real price of Starbs drink and iPhone 7

make homepage catchier

• An image? Catchier copies? Fill out with suggestions plz

add modal

• For destructive actions like reset at the end of /shop, and delete (issue #39) at /cart

add alt to img elements

delete from cart

• Add delete button at /cart

change card appearance if item's price exceeds wallet amount

Current behavior

• Only distinguishable feature is input === disabled
  

Expected behavior

If item's price > state.wallet

• Add className has-background-light to .card-content and .card-footer
• Add className has-text-danger to .subtitle
  

display cart

• Do not modify navbar, andun pa rin siya dapat
  

• Reuse Input component so need siya tanggalin sa Card component and maging standalone

• Total should be displayed at the bottom right part

• CTA buttons at the bottom:

  • Go back shopping (returns to /shop)
  • Done na me (??) (goes to /complete, blank page muna)