https://github.com/yashksaini-coder/git-graph
Visualize GitHub contributions, allowing users to customize, export, and share their activity as high-quality images on Twitter, and LinkedIn.
https://github.com/yashksaini-coder/git-graph
cards github nextjs shareable tailwindcss
Last synced: 17 days ago
JSON representation
Visualize GitHub contributions, allowing users to customize, export, and share their activity as high-quality images on Twitter, and LinkedIn.
- Host: GitHub
- URL: https://github.com/yashksaini-coder/git-graph
- Owner: yashksaini-coder
- License: mit
- Created: 2025-03-06T08:06:24.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-08T18:14:23.000Z (about 1 year ago)
- Last Synced: 2025-04-08T19:27:14.251Z (about 1 year ago)
- Topics: cards, github, nextjs, shareable, tailwindcss
- Language: TypeScript
- Homepage: https://git-graph-one.vercel.app
- Size: 564 KB
- Stars: 5
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: License.md
- Security: Security.md
Awesome Lists containing this project
README
Git Graph
> [!NOTE]
>
> INTRODUCTION_PARAGRAPH
> Visualize GitHub contributions, allowing users to
> customize, export, and share their activity as high-quality
> images on Twitter, Instagram, and LinkedIn.
## 📷 Screenshots
> Here's a working and expected screenshot of **_Git Graph_**
| Landing Page | User Display |
|------------|------------|
|  | |
---
## 📋 Features
- 📊 **Customizable Graphs**: Customize the graph by selecting from various themes.
- 📈 **Export Graphs**: Export the graph as a high-quality image for sharing on social media.
- 📱 **Responsive Design**: Fully responsive design that works on all devices.
- 🎨 **Themes**: Choose from a variety of themes to customize the graph's appearance.
- 📅 **Date Range**: Select a custom date range to visualize your GitHub contributions.
- 📤 **Share on Socials**: Share your GitHub activity on Twitter, Instagram, and LinkedIn.
- 📊 **2D & 3D**: Get the graph in either 2D or 3D frame style
## 🛠️ Tech Stack
> Git Graph is built using the following powerful technologies:
| Logo | Technology | Description |
|----|------------|-------------|
| | **[TypeScript](https://www.typescriptlang.org/)** | Strongly typed programming language for enhanced development |
|  | **[Next.js](https://nextjs.org/)** | React framework for production-grade applications |
| | **[Octokit](https://github.com/octokit)** | Official GitHub API wrapper for seamless integration |
| | **[Tailwind](https://tailwindcss.com/)** | Utility-first CSS framework for modern designs |
| | **[Vercel](https://vercel.com/home)** | Platform for deploying and hosting web applications |
## 🛣️ Tasks
- [ ] 2D & 3D Graph
- [ ] JSON Date Parsed
- [ ] Post on Socials
- [ ] Themes menu
## 💻 Contributing
> [!TIP]
> We welcome contributions to improve **Git Graph**! If you have suggestions, bug fixes, or new feature ideas, follow these steps:
1. **Fork the Repository**
Click the **[Fork](https://github.com/yashksaini-coder/git-graph/fork)** button at the top-right of the repo page.
2. **Clone Your Fork**
Clone the repo locally:
```bash
git clone https://github.com/yashksaini-coder/git-graph
```
3. **Create a Branch**
Create a new branch for your changes:
```bash
git checkout -b your-feature-branch
```
4. **Make Changes**
Implement your changes (bug fixes, features, etc.).
5. **Commit and Push**
Commit your changes and push the branch:
```bash
git commit -m "feat(scope): description"
git push origin your-feature-branch
```
6. **Open a Pull Request**
Open a PR with a detailed description of your changes.
7. **Collaborate and Merge**
The maintainers will review your PR, request changes if needed, and merge it once approved.
## 🙋♂️ Issues
Found a bug or need help? Please create an issue on the [GitHub repository](https://github.com/yashksaini-coder/git-graph) with a detailed description.
---
## 📄 License
Git Graph is licensed under the MIT License. See the LICENSE file for more details.
---
🌟 If you find this project helpful, please give it a star to show support to the Author! 🌟
## 👤 Author
Yash K. Saini
(Author)
👋 Hi there! I'm Yash K. Saini, a self-taught software developer and a computer science student from India.
-
I love building & contributing to Open Source software solutions & projects that help solve real-world problems.
-
I want to build products & systems that can benefit & solve problems for many other DEVs.
## 🐳 Docker Usage
You can build and run **Git Graph** inside a Docker container using the [Dockerfile](./Dockerfile) provided in this project.
1. **Build the Docker Image**
```bash
docker build -t git-graph-image .
```
2. **Run a Container**
```bash
docker run -p 3000:3000 git-graph-image
```
3. **Access the App**
Open [http://localhost:3000](http://localhost:3000) in your browser.
> **TIP**: Check the `.env` file for environment variables. Make sure it’s copied as needed.