/gatsby-github-api-test

Primary LanguageJavaScript

Hello! 👩🏻‍🦰 🤙🏻

I am Liuba, a Front-End Developer working with React. I love to create awesome stuff with code.

GitHub Repository Commits

View Demo · Report Bug

About The Project


landing page

The goal of this project is to create a web application that shows git commit history of this project.

Stack

plugins

Getting Started

#make sure you have npm installed
npm install npm@latest -g

#Clone the repo
gh repo clone liuba-larousse/gatsby-github-api-test

#Install NPM packages
npm install

#Insall Gatsby CLI globally
npm install -g gatsby-cli

#Start project
npm run start

#or
gatsby develop

Usage

Watch demo video

Features

  • ✅ GitHub API used

    • ⭐ Display profile info
    • ⭐ Display commit history
    • ⭐ Map out git repositories related to gatsby framwork

  • ✅ Search functionality with Apollo

Learnings

💡 📖 See what I have LEARNED building this project.

Toggle to see learnings here

Here are some things I learned while building this website:


🌴 Topic

🥥 Tip to remember

🌿 Better code practice

📖 Reading resources


Gatsby

  • 🥥 used gatsby-plugin-layout for setting consistent layouts across routes

  • 🌴 APOLLO

    • 🥥useLazyQuery() function to query on click
    • 🥥qql to write the query
    • 🥥 had to run npm i @apollo/react-hooks
    • 📖 More about LazyQuery

Sass

  • 🥥 change import s from "./header.module.scss" to import * as s from "./header.module.scss due to recent changes
  • 🥥 store color varibles in a global.scss file for easy reuse

Git

  • 🥥 🌿 store access token in .env file and add .env to .gitignore otherwise github removes token

Contact

I am actively looking for a Junior Front End Developer position. Contact me if you think I can be a great addition to your organization or you just want to talk code.