Skip to content

PaulieScanlon/gatsby-groovy-analytics

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 63 commits ahead, 2 commits behind gatsby-inc:main.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Groovy Analytics

Gatsby FuncJam '21

Groovy Analytics is both a classic Gatsby static site requesting location data from the Google Analytics API at build time using gatsby-node AND a dynamic application that uses Gatsby Functions to GET and POST the following:

  • Get all Reactions stored in Fauna Database
  • Get all Comments stored in Fauna Database
  • Post a Reaction to Fauna Database
  • Post a Comment to Fauna Database (with server-side Authentication)
  • Post to Convertkit for Newsletter signup

πŸ‘€ Live Demo

πŸ•Ί Groovy Analytics: https://gatsbygroovyanalytics.gatsbyjs.io


βš™οΈ The Functions

There are two types of functions in this site: public and private. All GET requests are public, but one POST request is private.


πŸ§‘β€πŸ€β€πŸ§‘ Public Functions

These can be hit from the browser address bar and will return a JSON object.


😲 Get all reactions

GET | /api/get-all-reactions

src: /src/api/get-all-reactions.ts

Example axios GET request
const getAllReactions = async () => {
  try {
    const response = await axios('/api/get-all-reactions')
    console.log(response.data.reactions)
  } catch (error) {
    console.warn(error.message)
  }
}

πŸ’¬ Get all comments

GET | /api/get-all-comments

src: /src/api/get-all-comments.ts

Example axios GET request
const getAllComments = async () => {
  try {
    const response = await axios('/api/get-all-comments')
    console.log(response.data.reactions)
  } catch (error) {
    console.warn(error.message)
  }
}

πŸ“₯ Signup to Newsletter

POST |/api/signup-newsletter

req.body params
Name Type Required Summary
email string true The users email address

src: /src/api/signup-newsletter.ts

Example axios POST request with req.body
const handleSubmit = async (email) => {
  try {
    const response = await axios.post('/api/signup-newsletter', {
      email: email,
    })
    console.log(response.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

πŸ–οΈ Summer Functions

We covered Newsletters on Week 1 of #GatsbySummerFunctions

πŸ”΄ Collect email addresses (and more) from visitors Β· #GatsbySummerFunctions Β· Week 1

Week 1


😲 Submit a reaction

POST | /api/add-reaction

req.body params
Name Type Required Summary
reaction string true The Reaction type
date date true The Date the reaction was submitted

src: /src/api/add-reaction.ts

Example axios POST request with req.body
const handleSubmit = async (reaction) => {
  setIsSubmitting(true)
  try {
    await axios.post('/api/add-reaction', {
      reaction: reaction,
      date: new Date(),
    })
    console.log(respose.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

πŸ–οΈ Summer Functions

We covered Reactions on Week 2 of #GatsbySummerFunctions

πŸ”΄ Gather reactions (claps, hearts or votes) from visitors Β· #GatsbySummerFunctions Β· Week 2

Week 2


πŸ” Private Functions

Private functions require Twitter login and a Bearer token provided by Auth0


πŸ’¬ Submit a comment

POST | /api/add-comment

req.body params
Name Type Required Summary
user string true The users name
comment string true The users comment
date date true The Date the comment was submitted
req.headers params
Name Type Required Summary
Authorization string true The Auth0 access token

src: /src/api/add-comment.ts

Example axios POST request with req.body / req.headers
const handleSubmit = async (user, comment) => {
  try {
    const response = await axios.post(
      '/api/add-comment',
      {
        user: user.name,
        comment: comment,
        date: new Date(),
      },
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    )
    console.log(response.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

πŸ–οΈ Summer Functions

We covered Auth0 Authentication on Week 3 of #GatsbySummerFunctions

πŸ”΄ Limit usage to visitors who have logged in with Auth0 Β· #GatsbySummerFunctions Β· Week 3

Week 3

We covered Comments on Week 4 of #GatsbySummerFunctions

πŸ”΄ Poll and display live data on your site Β· #GatsbySummerFunctions Β· Week 4

Week 4



Everything I do goes into everything I do.

Groovy Analytics was the result of 26hrs work however, there are a number of areas where I borrowed code from previous projects, blog post demos or work I'd completed in preparation for the Nattermob Friday night streams.

... and if you're looking for a more gentle introduction to Gatsby Functions have a watch of Week 0 of #GatsbySummerFunctions where we built a Slot Machine : Build an emojii slot machine with a #GatsbyJS Serverless Function Β· #GatsbySummerFunctions

References

Here are the references I used to create Groovy Analytics

-- And the groovy font I used is:

Me

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.5%
  • Other 0.5%