Visit the Demo: OctoConnect
OctoConnect is a website that lets you easily display your team's projects on one page with GitHub profile details as a portfolio. It's super simple to use: just provide a GitHub link and it will automatically fill everything for you. No coding required! 🙌
I built this project because I wanted to show off my team's work and skills in a simple and elegant way. I think it's a great way to impress potential employers, clients, or collaborators with your amazing projects. 🚀
Trust me, this is one of the easiest ways to create a stunning portfolio.
- No need to fork this repo. Just click on the button below and deploy it on Vercel in seconds.
- Give it a Repository Name and click on the Create button. That's it!
- Now you can see your project is on GitHub.
- Go to your GitHub repo and clone it or download it.
- Open the project in your favorite code editor.
- Open the
Your Data
folder in your root directory. - Edit the
Heading.json
file with your project details.
{
"title": "Name of your project",
"question": "What is <Project-Name>?",
"answer": "Explain your project in 2-3 lines."
}
Just fill the
title
,question
andanswer
fields.
- Edit the
GithubDetails.json
file with your team members' details.
[
{
"name": "Your Name",
"githubProfileLink": "https://github.com/<Github-Username>",
"githubRepositoryLinks": [
"https://github.com/<Github-Username>/<Github-Repository-Name>",
"https://github.com/<Github-Username>/<Github-Repository-Name>"
]
}
]
Just fill the
name
,githubProfileLink
andgithubRepositoryLinks
fields.
name
is your name or nickname.githubProfileLink
is your GitHub profile link. Just replace<Github-Username>
with your GitHub username.githubRepositoryLinks
are the links to the repositories you want to showcase. Just replace<Github-Username>
and<Github-Repository-Name>
with your GitHub username and repository name, or simply copy and paste the links here. You can add as many links as you want.
You can also make changes on GitHub and just commit and push them to your repo. It will automatically deploy on Vercel.
- Open your terminal and run the following command to install the dependencies.
npm install
- Run the following command to start the development server.
npm run dev
- Open your browser and go to
http://localhost:3000/
. Voila! You can see your portfolio in action!
- Open your terminal and run the following command to stage all the changes.
git add .
- Run the following command to commit the changes with a message.
git commit -m "Your commit message"
- Run the following command to push the changes to your main branch.
git push origin main
Congratulations 🎉, you have successfully deployed your portfolio on Vercel and now you can see it live on the web.
For more details on GitHub API Rate Limiting, please refer to the
↠HashNode
↠Dev.to
- Clone the repo using the following command.
git clone https://github.com/Subham-Maity/OctoConnect.git
- Open the project in your favorite code editor.
- In the root directory, create a
.env.local
file or rename the.env.local.example
file to.env.local
.
You will see the following code in the `.env.local.example` file.
```ts
NEXT_PUBLIC_GITHUB_TOKEN=github_pat_11AXLTICY0jSz5k........
Copy the token and paste it in the .env.local
file.
- Open your github account and go to `Settings > Developer Settings(Bottom Left)
- Click on
Personal Access Tokens
and then click onTokens (classic)
. - Give a note name and select the
repo
scope. - Click on
Generate Token
and copy the token. - Paste the token in the
.env.local
file.
- Open your terminal and run the following command to install the dependencies.
- Run the following command
vercel link
to link your project to Vercel. - Now they will ask you to select a scope. Select your username.
- Now they will ask you to select a project. Select your project.
- Run the following command
vercel env add NEXT_PUBLIC_GITHUB_TOKEN
to add the environment variable. - Now they will ask you to enter the value of the environment variable. Enter the token.
- Now they will ask you to select the environment. Select
Production
. - Now you can see your project is on Vercel. (Additionally, you can commit and push the changes to your GitHub repo so that it will automatically deploy on Vercel.)
- Go to your Vercel dashboard and open your project.
- Go to
Settings > Environment Variables
and check if the environment variable is added or not. - If it is not added, then add it manually.
- Now you can see your project is live on the web with the API rate limit increased to
5000 requests
per hour.
PS F:\mains\OctoMeetOfficial\octomeetdevelopers> vercel link
Vercel CLI 29.3.4
? Set up “F:\mains\OctoMeetOfficial\octomeetdevelopers”? [Y/n] y
? Which scope should contain your project? subham-maity
? Found project “subham-maity/octomeetdevelopers”. Link to it? [Y/n] y
âś… Linked to subham-maity/octomeetdevelopers (created .vercel)
PS F:\mains\OctoMeetOfficial\octomeetdevelopers> vercel env add NEXT_PUBLIC_GITHUB_TOKEN
Vercel CLI 29.3.4
? What’s the value of NEXT_PUBLIC_GITHUB_TOKEN? github_pat_11AXLTICY0.....
? Add NEXT_PUBLIC_GITHUB_TOKEN to which Environments (select multiple)? Production
âś… Added Environment Variable NEXT_PUBLIC_GITHUB_TOKEN to Project octomeetdevelopers [308ms]
Contributions are always welcome! If you'd like to contribute to the project, please raise an issue before creating a pull request.