Generate GitHub repositories timeline using a username

Related tags

React react nextjs
Overview

ReposTimeline

screenshot

About

ReposTimeline is a NextJS app that helps visualize your repositories in a timeline you can easily share.

Installation

git clone https://github.com/nazifbara/repos-timeline.git
cd repos-timeline
npm install

Generate a GitHub personal access token to be able to communicate the graphql API. Give it the public_repo and read:user scope. Then, create a .env.local file with the following:

GITHUB_TOKEN=YOUR_TOKEN

Now start the app:

npm run dev

Hosting

This app is hosted on AWS using AWS Amplify. Refer to the AWS Amplify docs for the instructions. I suggest you use the git-based hosting with Continuous Deployment.

Once your backend is set up, head over to the build settings. Edit the amplify.yml and modify the build section:

build:
  commands:
    - npm run build
    - echo "GITHUB_TOKEN=$GITHUB_TOKEN" >> .env.local

Finally, add the GITHUB_TOKEN env variable in the "Environment variables" section.

You might also like...

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

React Color 13 Different Pickers - Sketch, Photoshop, Chrome and many more Make Your Own - Use the building block components to make your own Demo Liv

Jan 6, 2023

GitHub action to get notification whenever vaccine slot is availble in cowin portal :tada:

GitHub action to get notification whenever vaccine slot is availble in cowin portal :tada:

Covid Vaccine availability notifier Setup Fork this repo Update the config at src/config.js Delete the db file src/db.json module.exports = { // opt

Jul 27, 2022

Github organization location changer.

GOLC Github organization location changer Installation Github: git clone https://github.com/I2rys/GOLC NPM Packages: npm i axios Usage node index.js

Jul 12, 2022

Glob - Github action to match glob patterns and retrieve the relative file paths.

Glob - Github action to match glob patterns and retrieve the relative file paths.

Dec 12, 2022

Painel para pesquisa e exibição de dados de usuários do Github. Foram utilizados a biblioteca React e a API da plataforma.

Painel para pesquisa e exibição de dados de usuários do Github. Foram utilizados a biblioteca React e a API da plataforma.

React - GitHub User Search Sobre Esse projeto foi criado com a biblioteca React JS e com os dados provenientes da GitHub API. Trata-se de uma página p

Apr 24, 2022

A simple showcase of how to create a CI/CD to automate nextjs deploy to github pages.

TypeScript & Styled Components Next.js example This is a really simple project that show the usage of Next.js with TypeScript and Styled Components. E

Apr 27, 2022

GitHub action that compares basehead commits and provides all changed files in a pull request or push.

Get PR/push Files Get all added/modified/removed/renamed files in a pull request or push's commits. You can choose to get all files, only added files,

May 21, 2022

This repo is for educational and demonstration purposes only, this project is to demonstrate usage of apollo/client and github API and firebase.

This repo is for educational and demonstration purposes only, this project is to demonstrate usage of apollo/client and github API and firebase.

Gissues Gissues is a web application that allows you to search for issues in GitHub. It is built for new developers who want to learn more about GitHu

Oct 1, 2022

Open source version of the GitHub /trending page

ghtrending ⭐ Open source version of GitHub's trending page Find the latest trending repositories on GitHub! ghtrending.io link 🔗 Please note, this pr

Nov 22, 2022
Comments
  • Differentiate archived repo.

    Differentiate archived repo.

    Hi. 👋🏻 Before all, this is a cute project, congrats for that !

    My idea is to differentiate archived repo from active repo.

    I've got an idea of add transparency of archived repo, something like this: image who "RSSToNotion" is the archived repo. (it's an example.)

    Another idea is to make the color circle green for active repo and red for archived repo, something like this: image who "RSSToNotion" is the archived repo. (it's an example.)

    Could be cool to see this. ^^

    enhancement good first issue 
    opened by HerIsDia 1
Owner
Nazif Barassounon
👋🏽 Hi! I'm a frontend web developer specializing in ReactJS.
Nazif Barassounon
Github-ci-cd-react - I followed CI/CD course from codedamn to learn how to implement github actions in a project, in this practical lesson with codedamn am using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Okechukwu Somtochukwu 1 Jan 2, 2022
A Chrome T-Rex game remake using javascript and threejs. Online demo: https://rossning92.github.io/t-rex

T-Rex Game in 3D A Chrome T-rex game remake using javascript and threejs. Build the code Make sure you have node 12+ installed: https://nodejs.org/en/

null 79 Dec 29, 2022
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
An implementation of GitHub's Primer Design System using React

Primer React A React implementation of GitHub's Primer Design System Documentation Our documentation site lives at primer.style/react. You'll be able

Primer 2.2k Dec 26, 2022
This is a Chrome extension that aims to encourage accessibility awareness while using GitHub

github-a11y This is a Google Chrome extension that runs a simple JavaScript snippet on github.com domain and aims to encourage accessibility mindfulne

Kate Higa 9 Jul 24, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Create posts for ubccsss.org using the GitHub REST API

content manager for ubccsss.org Create posts for ubccsss.org using the GitHub REST API Installation $ git clone [email protected]:ubccsss/content-manager

UBC Computer Science Student Society 2 Sep 15, 2022
A simple PWA to scan your EU digital COVID Certificate and generate a passbook from it

COVID-19 passbook Generator The aim of this project is to let a user scan a EU Digital COVID Certificate with their smartphone, and generate a passboo

Thibault Milan 129 Nov 11, 2022
Generate font size variables for a fluid type scale with CSS clamp.

Fluid Type Scale Calculator Generate font size variables for a fluid type scale with CSS clamp. Overview Customize everything, grab the output CSS, an

Aleksandr Hovhannisyan 136 Dec 31, 2022
This library is a template to generate new angular component libraries.

Open Template Hub - UI Library Template v1 This library is a template to generate new angular component libraries. About the NPM Package Package Insta

Open Template Hub 6 Dec 18, 2022