loki/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2026-06-03 03:24:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: add pull request template to guide contributors

Browse Source
This commit is contained in:
AykutSarac
2026-02-04 00:55:32 +03:00
parent eaafbf53c0
commit 1d6921992c
2 changed files with 148 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/pull_request_template.md
+45
View File
@@ -0,0 +1,45 @@
## Issue
Closes #[ISSUE_NUMBER]
## What Changed
Brief description of what you changed and why.
Example:
- Added JSON validation tooltip on parse error
- Improved performance by memoizing graph component
- Fixed bug where large JSON files caused slowdown
## How to Test
Step-by-step instructions to test the change:
1. ...
2. ...
3. ...
## Evidence
**Screenshots or Video Required** — Choose one or both:
### Screenshots
- [ ] Before/after screenshots attached (for UI changes)
### Video
- [ ] Screen recording of the feature in action
### Testing
- [ ] Tested locally with `pnpm dev`
- [ ] No console errors
- [ ] Tested with large JSON files (if applicable)
## Performance Impact
Any notes on performance, re-renders, or potential concerns?
- [ ] No performance impact
- [ ] Improved performance (explain how)
- [ ] Potential impact (explain and justify)
## Additional Notes
Anything else reviewers should know?
---
**Remember:** If this PR is not linked to an issue, it may be closed. Always reference an approved issue!
CONTRIBUTING.md
+103 -38
View File
@@ -1,64 +1,129 @@
# Welcome to the JSON Crack Contributing Guide <!-- omit in toc -->
# Contributing to JSON Crack
Thank you for investing your time in contributing to our project! Any contribution you make will be reflected at [jsoncrack.com](https://jsoncrack.com).
Thank you for wanting to contribute! This is a community-driven project, and we appreciate your help. Please read this guide carefully to make the review process smooth and fast.
Read our [Code of Conduct](./CODE_OF_CONDUCT.md) to keep our community approachable and respectable.
**Read our [Code of Conduct](./CODE_OF_CONDUCT.md) first** — we want to keep this community friendly and welcoming.
In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR.
---
## Getting Started
JSON Crack is built with React, Reaflow for visualization, Mantine UI for components, Zustand for state management. If you are not familiar with these technologies, we recommend you to read their documentation to get started. You can find the links to the respective documentations below:
## Before You Start: The Issue-First Workflow
* [React](https://reactjs.org/docs/getting-started.html)
* [Reaflow](https://github.com/reaviz/reaflow)
* [Mantine UI](https://mantine.dev/)
* [Zustand](https://github.com/pmndrs/zustand)
**Always open or find an issue BEFORE you start coding.** This saves everyone time.
If you're looking for a task to contribute, you can pick up a TODO from our project board: [Open Project Board Tasks](https://github.com/AykutSarac/jsoncrack.com/projects?query=is%3Aopen).
1. **Check existing issues** — Search to see if someone already reported this or is working on it
2. **Open a new issue** if one doesn't exist — Describe what you want to fix or build
3. **Wait for approval** — I'll review and give feedback (usually within a few days)
4. **Once approved**, you can start coding
5. **Link your PR to the issue** — Use `Closes #123` in your PR description
Once you are familiar with these technologies, you can clone the JSON Crack repository by running the following command:
This workflow prevents duplicate work and ensures your contribution aligns with the project's direction.
---
## Quick Setup
### Prerequisites
- Node.js 18+
- pnpm (or npm/yarn)
### Tech Stack
JSON Crack uses:
- **React** — UI library
- **Reaflow** — Graph visualization
- **Mantine UI** — UI components
- **Zustand** — State management
### Get Started
```bash
# Clone the repo
git clone https://github.com/AykutSarac/jsoncrack.com.git
```
cd jsoncrack.com
After cloning the repository, you can install the required dependencies by running the following command:
```bash
# Install dependencies
pnpm install
```
To run the development server, you can run the following command:
```bash
# Run the dev server
pnpm dev
```
## Contributing Guidelines
Before submitting a pull request, please make sure to follow these guidelines:
The app will be available at `http://localhost:3000`
### 1. Performance
Performance is an important criteria for JSON Crack. Any new contributions should not affect the re-rendering of the application. Therefore, when making changes to the code, please keep performance in mind.
---
If you're having trouble with re-rendering issues in React, you can use the React Devtools Profiler to debug it. You can also check out this up-to-date guide on debugging re-renders with React Devtools to learn more.
## How to Submit a Pull Request
### 2. Code Style
We follow the [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html) for our code. Please make sure to follow this guide when writing new code or modifying existing code.
### Requirements
Before submitting, make sure your PR includes:
### 3. Testing
While we do not currently have a comprehensive testing suite in place, we encourage contributors to thoroughly test their changes and ensure that they do not break any existing functionality. Please include a description of how you tested your changes in your pull request, so that we can review them more effectively.
1. **Issue ID** — Reference the issue: `Closes #123`
2. **Clear description** — What does this change do? Why?
3. **Evidence of working changes** — One or both:
- **Screenshot** — Show the UI before/after
- **Video** — Screen recording of the feature in action
4. **Test it locally** — Run `pnpm dev` and verify it works
5. **Follow code style** — Use [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)
### 4. Commit Messages
Please use descriptive commit messages that explain the changes you have made. This will help us understand your changes and make it easier to review your pull request.
### Creating Your Branch
```bash
git checkout -b fix/issue-123-description
# or
git checkout -b feature/issue-123-description
```
### 5. Pull Requests
Please create a new branch for your changes and submit a pull request to the main branch. Please provide a detailed explanation of the changes you have made and any necessary context in the pull request description.
Use clear branch names that reference the issue.
## Conclusion
We appreciate any contributions to JSON Crack, big or small. If you have any questions or need any help, please do not hesitate to reach out to us. Thank you for contributing!
---
### Your PR is merged!
## Guidelines
Congratulations :tada::tada: The JSON Crack team thanks you :sparkles:.
### Performance First
- Avoid unnecessary re-renders
- Use React DevTools Profiler to check performance
- Test with large JSON files to ensure no slowdowns
Once your PR is merged, your contributions will become part of the next JSON Crack release, and will be visible in the [JSON Crack app](https://jsoncrack.com).
### Code Quality
- Follow the [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)
- Write descriptive commit messages
- Keep changes focused — one feature/fix per PR
### Testing
- Manually test your changes thoroughly
- Describe exactly how you tested it in the PR
- Make sure existing features still work
---
## Example PR
Here's what a good PR looks like:
**Title:** Add JSON validation tooltip on parse error
**Description:**
```
Closes #234
## What Changed
Added a helpful tooltip that shows validation errors when JSON fails to parse, making it easier for users to fix their JSON.
## How to Test
1. Paste invalid JSON: `{invalid`
2. Look for the red error indicator
3. Hover over it to see the detailed error message
## Evidence
- [Screenshot of tooltip](link-to-image)
## Performance Notes
No performance impact. Tooltip renders conditionally only on errors.
```
---
## Questions?
- Found a bug? Open an issue
- Have an idea? Open an issue
- Confused about something? Comment on the issue
Thank you for contributing to JSON Crack! 🎉