Git Notes

Description

Why Gists are so popular? In open source community you want to create content & share it with people. With Gists you can create public content, code fragment, configuration files & files. You can share it with people, search it on Github, save it to your profile & much more. In this assignment you are going to provide a better solution for Managing Gists.

Mockups

Tap into the Figma link for a comprehensive view of project mockups and UI design.

Requirements

The Landing Page

• As user open the app, user should be able to see landing screen with a list of Gists in it.
• List will contain paginated public gists from github api.
  • List Layout
  • Grid Layout
• Use the toggle to Switch Between the Layouts
• Page will also contain a header with
  • Login menu for login with github
  • Search for searching a Gist using ID

Login Page

• Once user click login menu, it will allow the user to login using github.
  • Maintain user session
• Once logged in, header will contain profile menu with picture of user.

Gist Page

• Once user click any Gist from landing page, it will redirect to Gist page

• For a Public Gist page will

  • Contain the information of the Gist with owner's informations
  • Allow user to give star
  • Allow user to fork that Gist
  • If the user hasn't logged in yet,user shouldn't be allowed to fork and star gist.

  

Create Gist

• Profile menu will have
  • Create Submenu for creating a Gist
  • A gist can have multiple files. The Add File button will add a single file to your gist when clicked on.
  • Once all the files are added, clicking on Create Gist will create your new gist with the added files
  • Logout Submenu for Singing out of Github
  • User Profile Submenu for User Profile & user's Gists
  • Starred gists Submenu to view the user's starred gists.

Important Points

• Use nx-toolkit to initiate the project.
• Follow docs https://docs.github.com/en/rest/reference/gists for Gist Api Documentation.
• Dont Use Fetch for getting public and private gists in paralell.
• Everything must be live e.g,if you star some gist . It should be visible in starred gists.
• Dont allow any gist operation(star,fork) untill user hasn't logged in.
• If your open starred gists,the star icon should be filled.
• If you open public Gist,edit and delete option shouldn't be visible.

How to Set Up GitHub OAuth with Firebase

GitHub OAuth Steps:

1. Create a Firebase Account.
2. Create a new Firebase project.
3. Go to the projects console and select Authentication.
4. In Sign-In providers choose GitHub.
5. Provide the Client ID and Client Secret you got from GitHub.
6. Go to your GitHub app config and provide the callback URL which is provided by Firebase.
7. Install Firebase package.

npm i firebase 

8. Use this code in your App.tsx:

import { initializeApp } from "firebase/app";
const app = initializeApp({
apiKey: "your api key",
projectId: "your project id",
authDomain: "your auth domain",
});

9. Use this code in the login button to get the user data and token:

import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";

 const provider = new GithubAuthProvider();
 provider.addScope("gist");
 const auth = getAuth();

 const LoginWithGithub = async () => {
   signInWithPopup(auth, provider)
   .then((result) => {
     #( This gives you a GitHub Access Token. You can use it to access the GitHub API).
     const credential = GithubAuthProvider.credentialFromResult(result);
     const token = credential!.accessToken;
     if (!token) return;
     console.log(token); // The signed-in user info.
     const user = result.user;
     console.log(user);
     #( IdP data available using getAdditionalUserInfo(result)...)
   })
   .catch((error) => {
     console.log(error);
    #( Handle Errors here.)
     const errorCode = error.code;
     const errorMessage = error.message;
     #(The email of the user's account used.)
     const email = error.customData.email;
     #( The AuthCredential type that was used.)
     const credential = GithubAuthProvider.credentialFromError(error);
     #( ...)
   })
   .finally(() => {
     #(do something)
   });
 };

Coding Guidelines

• Create generic component and then use it on different pages e.g, Gist Code Component (where gist code is shown ) should be reusable in Grid View and also on different routes.
• You have to set error boundries for every case.

Success metrics

• A complete UI of the application build using React having good UX.
• Follow best practices for React and Typescript.

Stretched goals

• Add unit tests using RTL.
• Add integration tests
• Use github gists to store and retrieve data of tours.
• You can see official documentation on https://docs.github.com/en/rest/reference/gists.

Tech Stack

• React
• Typescript
• Redux
• CSS

Due Period

• Assignment should be submitted around 7-8 working days.

Submission Guidelines

• Must create a separate review branch for implementing suggestions.