Creating a Portfolio Page with GitHub Projects for AltSchool Second Semester Exams

Adetuwo Ezekiel Mofiyinfoluwa — Mon, 09 Jan 2023 11:20:12 +0000

Are you a new developer looking for an effective way to showcase your projects to the world? Creating a portfolio page with GitHub projects is the perfect way to do just that! GitHub is an open-source platform that allows anyone to host and share their programming projects and code. With the GitHub repository source file, you can easily create a portfolio page to showcase all of your projects and great repositories. In this guide, we'll walk you through the process of creating a portfolio page with GitHub projects, so you can showcase your talent and dazzle potential employers!

Content

Overview of React JS
Setting up React Router
Setting up the App Components
Importing Repository data from GitHub
Hosting the app on Firebase.

Overview of React JS

React.js is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React allows developers to create large web applications that use data and can change over time without reloading the page. It aims primarily to provide speed, simplicity, and scalability.

React components are written using a combination of JavaScript and HTML-like syntax called JSX. This is then compiled to plain JavaScript that can be understood by most browsers. React components are reusable and can be used to create complex user interfaces. When a user interacts with the application, the state of the components is updated and rendered to the user.

Setting up React Router

React Router is a popular library used to handle routing in React applications. It allows you to set up multiple routes, which can be accessed by users when navigating your site. Setting up React Router is relatively straightforward and can be done in just a few steps.

Install React Router:

The first step is to install React Router using the command line. To do this, you'll need to have Node.js and npm installed on your machine. Once you have those, you can install React Router using the command:

npm install react-router-dom

Create a Router Component:
Once React Router has been installed, you'll need to create a Router component. This component will act as the starting point for all of the routes in your application. You can create a Router component like this:

import { BrowserRouter as Router, Route } from 'react-router-dom';

const AppRouter = () => ( <Router> <Route path="/" component={Home} /> </Router> );

Add Routes:
After you define your routes, you can use the <Link> or <NavLink> components to navigate between them. the <Link> and <NavLink> taking in a "to" attribute which dictates the link or path to which the link would lead to.

Setting up Components

Functional components are a great way to make your React projects more efficient, organized, and maintainable. To set up functional components, you need to create a new file for each component, import React and ReactDOM, and then write a basic function that returns JSX.

Each component should have a descriptive name. You can also use props to pass data to your components, and use state to store and update data within the component. Make sure to export your components so they can be imported into other components. Finally, you can use the ReactDOM.render() method to render your React components to the DOM.

Importing repository data from Github

Fetching your repositories

fetch(`https://api.github.com/users/${github_username}/repos?${repo_endpoint_parameter}`)
.then(response => response.json())
.then(result => this.setState({ repos: result }));

https://api.github.com/users/your_github_username is the REST API endpoint provided by GitHub, this is actually what we are fetching. The response from the fetch call is then called all through our app when reassigned designated values.

Hosting the App of Firebase

Note: There are several free hosting sites that you can check out but I will be discussing the process for hosting on Firebase.

To host your created app on Fire base, follow the following steps

Step 1: Create an Account with Firebase

First, create a new account with Firebase by visiting the Firebase website and signing up. You will need to provide your account details and payment information to complete the setup process.
To sign up, go to https://firebase.google.com/

Step 2: Install the Firebase Command Line Tools

Once you have an account, you will need to install the Firebase command line tools. To do so, you will need to download the Firebase CLI, which is available for both Windows and Mac operating systems.

Step 3: Initialize a Firebase Project

Once the Firebase CLI is installed, you will need to create a new project. To do this, you will use the command line to run the firebase init command. This will create a new Firebase project and initialize it with the default settings.

Step 4: Configure the Firebase Project

Before you can deploy your app, you will need to configure your Firebase project. To do this, you will need to set up the project settings, such as the project name, database rules, and authentication settings.

Step 5: Deploy the App

Conclusion

In conclusion, creating a React portfolio app and hosting it on Firebase may seem daunting, but with the right understanding of the development process, it can be done with relative ease. There is a wide range of technologies available and the combination of React, Firebase, and other services are a great way to create a powerful and robust portfolio. With a bit of patience and the right guidance, anyone can create a portfolio app and host it on Firebase.

DEV Community: Adetuwo Ezekiel Mofiyinfoluwa