DEV Community: Manav Shete

VSCODE THEMED PORTFOLIO USING REACT.JS AND TAILWINDCSS.

Manav Shete — Mon, 28 Aug 2023 14:48:30 +0000

Idea And Inspiration

I've been watching a lot of portfolio websites lately and came across some that were mind blowing like some were built in 3D using three.js , some with framer motion, etc. Inspired me started to build one using some of the react animation libraries and even built one or two but they were not as good looking as I thought and I was a react beginner at that time. After a while and getting some knowledge of react and building some projects I started collecting ideas to a again make a portfolio. As a coder an Idea jumped into my head why not build a portfolio that looks like vscode. Done some research to find some good design on the internet but there were'nt much but then I came across nitin ranganath's vscode portfolio and liked it so much.

I Built a VSCode Inspired Developer Portfolio

Nitin Ranganath ・ May 8 '21

#showdev #webdev #react #nextjs

So I decided to give it a try and kinda cloned his website but using react and tailwind and made some changes in the about me page and used emailjs for sending emails turned out too be good.

Here is the link to the live website:

vscode-portfolio-main.vercel.app

manavss / vscode-portfolio-main

A Visual Studio Code themed developer portfolio website built with React.js and Tailwind.

vs-code.mp4

VSCODE PORTFOLIO

A Visual Studio Code themed developer portfolio website built with React.js and tailwind.

Explore the docs »

View Demo . Report Bug . Request Feature

About The Project

A Visual Studio Code themed developer portfolio website built with React.js and Tailwind.

Built With

React.js TailwindCss React-hook-form email.js react-async-helmet

Authors

Manav Shete - BE-IT - Manav Shete - Developer

View on GitHub

I would like to thank @itsnitinr for letting me use his icons and design as I am bit lazy to go and set them up all.😜Learned a lot from this project and glad I picked this one .

Using GitHub API with Personal Access Tokens to Fetch User Data and GitHub Calendar Integration.

Manav Shete — Fri, 25 Aug 2023 08:20:04 +0000

GitHub provides a powerful API that allows developers to access and interact with various data from GitHub repositories, users, and more. In this tutorial, we will explore how to use the GitHub API with personal access tokens to fetch user data, and we will also integrate the GitHub Calendar library to visualize user contributions over time.

Introduction to GitHub API and Personal Access Tokens
Generating a Personal Access Token
Fetching User Data using GitHub API
Integrating GitHub Calendar Library
Conclusion

1. Introduction to GitHub API and Personal Access Tokens

The GitHub API offers endpoints that allow developers to programmatically interact with GitHub resources such as repositories, issues, and users.

ADVANTAGES OF USING PERSONAL TOKENS

Personal access tokens provide a secure and standardized way to authenticate and authorize users or applications when interacting with the GitHub API.

2.GitHub API requests are subject to rate limits. By using a personal access token, applications can make authenticated requests, which usually have higher rate limits compared to unauthenticated requests.

and much more...

2. Generating a Personal Access Token

To generate a personal access token, follow these steps:

Log in to your GitHub account.
Go to your GitHub Settings.
Select Developer settings from the left sidebar, and then click on Personal access tokens.
Click on the Generate new token button. Give your token a meaningful name and select the scopes (permissions) you need.
Click the Generate token button at the bottom.

Make sure to copy your generated token immediately, as you won't be able to see it again.

3. Fetching User Data using GitHub API

Now that we have our personal access token, let's use it to fetch user data from the GitHub API.

We'll use the axios library to make HTTP requests. If you haven't installed it, you can do so using:
npm install axios

Here's how to fetch user data using the GitHub API and your personal access token:

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [userData, setUserData] = useState({});

  useEffect(() => {
    const token = 'YOUR_PERSONAL_ACCESS_TOKEN';

    axios.get('https://api.github.com/user/yourgithubUserName', {
      headers: {
        Authorization: `token ${token}`,
      },
    })
    .then(response => {
      setUserData(response.data);
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
  }, []);

  return (
    <div>
      <h1>GitHub User Data</h1>
      <div>{JSON.stringify(userData, null, 2)}</pre>
    </div>
  );
};

export default App;

Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with the actual personal access token you generated.

You can create your own Card to display the user data like username,profile pic,bio,public repos,etc

It would look like this

*You can also use the repo api to get all the information about repostiories:
*
Just replace the api link with https://api.github.com/user/yourgithubUserName/repos

4. Integrating GitHub Calendar Library

The GitHub Calendar library allows you to visualize a user's contributions (commits, pull requests, issues, etc.) over time in a calendar heatmap.

To integrate the GitHub Calendar library, we'll use the react-github-calendar package. Install it using:

npm install react-github-calendar

Here's how to integrate the GitHub Calendar library into your React app:

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import GitHubCalendar from 'react-github-calendar';

const App = () => {
  const [userData, setUserData] = useState({});

  useEffect(() => {
    const token = 'YOUR_PERSONAL_ACCESS_TOKEN';

    axios.get('https://api.github.com/user', {
      headers: {
        Authorization: `token ${token}`,
      },
    })
    .then(response => {
      setUserData(response.data);
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
  }, []);

  return (
    <div>
      <h1>GitHub User Data</h1>
      <pre>{JSON.stringify(userData, null, 2)}</pre>

      {userData.login && (
        <div>
          <h2>GitHub Contributions Calendar</h2>
          <GitHubCalendar
            username={userData.login}
            blockSize={15}
            blockMargin={2}
          />
        </div>
      )}
    </div>
  );
};

export default App;

Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with your actual personal access token.

This is how it looks:

Refer the official github repo for more more information :

grubersjoe / react-github-calendar

A React component to display a GitHub contributions calendar

React GitHub Calendar

A React component to display a GitHub contributions graph based on react-activity-calendar and github-contributions-api.

Demo and documentation

Installation

pnpm install react-github-calendar

Development

Start watch mode for the library first:

pnpm install
pnpm dev

Then start watch mode of example page:

cd example
pnpm install
pnpm dev

Open http://localhost:3000.

Publish a new release

npm publish --dry-run

# When you're happy
npm publish --access=public

Update demo page

pnpm run deploy

View on GitHub

The owner of the repo has also created a website for calendar and visualization and customizations you can do.

grubersjoe.github.io

5. Conclusion

In this tutorial, we learned how to use the GitHub API with personal access tokens to fetch user data and integrate it with the GitHub Calendar library. We generated a personal access token, used it to authenticate API requests, fetched user data, and visualized GitHub contributions over time using the calendar heatmap.

An Easy Guide to Building a Basic Form with React Hook Form.

Manav Shete — Fri, 25 Aug 2023 07:07:34 +0000

React Hook Form is a powerful library for managing form state and validation in React applications using hooks. In this tutorial, we will explore how to set up a basic form using React Hook Form. We'll cover installation, creating a form, form validation, and submitting form data.

Table of Contents

Introduction to React Hook Form
Installation
Creating the Form Component
Form Input Fields and Validation
Handling Form Submission

1. Introduction to React Hook Form

React Hook Form is a library that simplifies form handling in React applications by utilizing hooks. It provides a straightforward way to manage form state, handle form validation, and streamline form submission.

2. Installation

npm install react-hook-form

3.Creating the Form Component

Let's create a new component for our form. For this example, we'll create a SimpleForm.js file in your project's src folder.

// src/SimpleForm.js
import React from 'react';
import { useForm } from 'react-hook-form';

const SimpleForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields will be added here */}
    </form>
  );
};

export default SimpleForm;

4. Form Input Fields and Validation

Let's add some input fields to our form along with basic validation. We'll create fields for the user's name and email address. We'll use the register function to associate input fields with React Hook Form.

// src/SimpleForm.js
import React from 'react';
import { useForm } from 'react-hook-form';

const SimpleForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name</label>
        <input
          type="text"
          {...register('name', { required: true })}
        />
        {errors.name && <p>This field is required</p>}
      </div>
      <div>
        <label>Email</label>
        <input
          type="email"
          {...register('email', { required: true, pattern: /^\S+@\S+$/i })}
        />
        {errors.email && <p>Enter a valid email address</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

In this section, we added two input fields for the user's name and email. We used the register function to connect the input fields to React Hook Form. We also added basic validation rules such as required and pattern for the email field.

5. Handling Form Submission

Now that we have our form set up with input fields and validation, let's handle the form submission.

// src/SimpleForm.js
import React from 'react';
import { useForm } from 'react-hook-form';

const SimpleForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

In the onSubmit function, you can perform any actions you need, such as sending the form data to a server or updating the state of your application.

Conclusion

In this tutorial, we've covered the basics of setting up a form using React Hook Form. We installed the library, created a form component, added input fields with validation, and handled form submission. React Hook Form simplifies the process of managing forms in React applications and provides powerful tools for form validation and state management.

You can further customize your forms by adding more fields, complex validation rules, and integrating with other libraries. This tutorial serves as a foundation for building more advanced forms using React Hook Form.

DEV Community: Manav Shete

VSCODE THEMED PORTFOLIO USING REACT.JS AND TAILWINDCSS.

Idea And Inspiration

I Built a VSCode Inspired Developer Portfolio

Nitin Ranganath ・ May 8 '21

manavss / vscode-portfolio-main

A Visual Studio Code themed developer portfolio website built with React.js and Tailwind.

VSCODE PORTFOLIO

Table Of Contents

About The Project

Built With

Authors

Using GitHub API with Personal Access Tokens to Fetch User Data and GitHub Calendar Integration.

Table of Contents

1. Introduction to GitHub API and Personal Access Tokens

2. Generating a Personal Access Token

3. Fetching User Data using GitHub API

4. Integrating GitHub Calendar Library

grubersjoe / react-github-calendar

A React component to display a GitHub contributions calendar

React GitHub Calendar

Installation

Development

Publish a new release

Update demo page

5. Conclusion

An Easy Guide to Building a Basic Form with React Hook Form.

1. Introduction to React Hook Form

2. Installation

3.Creating the Form Component

4. Form Input Fields and Validation

5. Handling Form Submission

Conclusion