fork-commit-merge / fork-commit-merge-web

Welcome to Fork, Commit, Merge! Your one-stop resource hub for mastering GitHub contributions! This project is the repo of Fork, Commit, Merge -website.

"Fork, Commit, Merge" serves as a comprehensive resource for mastering GitHub contributions, catering to both beginners and seasoned developers. Our detailed guides are tailored to simplify your GitHub experience, covering everything from forking and committing to merging processes. We're dedicated to enabling you to contribute skillfully and confidently to the open-source community. Join us in our journey of coding, collaboration, and creativity!

Find awesome badges for your project in this repository: markdown-badges

Table of Contents

This project is the repo of Fork, Commit, Merge -website.

• Features
• Tech Stack
• Local Development
• Contributing
• Questions
• License
• List of Contributors

Features

• Comprehensive Guides: Easy to follow step-by-step guides for various GitHub processes, from creating a repository to managing pull requests.

• Command Tutorials: Detailed tutorials on Git commands to enhance your productivity and workflow efficiency.

• Best Practices: Recommendations on Git and GitHub best practices to promote high-quality code and effective collaboration.

• Contribution Guidelines: Detailed guides on how to properly contribute to open-source projects, including etiquette and effective communication with project maintainers.

• FAQs and Troubleshooting: A comprehensive section dedicated to frequently asked questions and common issues users face while contributing on GitHub.

• Resource Library: An extensive collection of external resources such as books, blog posts, and video tutorials on Git and GitHub.

Tech Stack

• React.js
• Next.js
• TypeScript
• Tailwind CSS
• MongoDB Atlas
• Clerk (Authentication)
• GitHub API

Local Development

Follow these steps to run the application in your local environment:

1. Clone this repository.

   git clone https://github.com/yourusername/fork-commit-merge-web.git

2. Install the project dependencies.

   cd fork-commit-merge-web
   npm i

3. Set up your environment variables. You will need to create a Github MongoDB Atlas cluster and an AWS S3 bucket for your local development environment.

   First, make a copy of the .env.local.example file and rename it to .env.local.

   cp .env.local.example .env.local

   You will need to replace the placeholder values in this file with your actual credentials.

   • For MongoDB Atlas, you will need to replace MONGODB_URI with your MongoDB connection string. You can get this from the MongoDB Atlas dashboard. Also, remember to add 0.0.0.0/0 to the Network Access to allow connections from all IP addresses.

   • For Github you need to replace GITHUB_ID and GITHUB_SECRET with your on credentials by creating a GitHub OAuth Application:

     • Go to your GitHub account settings.
     • Navigate to "Developer settings" > "OAuth Apps" > "New OAuth App."
     • Fill in the application name, homepage URL (use NEXTAUTH_URL value), and set the authorization callback URL as <NEXTAUTH_URL>/api/auth/callback/github.

   After registering the application, you will receive a client ID and client secret.

   • You also need to replace NEXTAUTH_SECRET with a random string. You can generate one simply in terminal:

     • On Linux and macOS:

       • You can use the openssl command to generate a random string. Open your terminal and run openssl rand -base64 32. This will generate a 32-byte random string encoded in base64. You can copy this string and use it as the value for NEXTAUTH_SECRET.

     • On Windows:

       • If you're using Windows, you can use PowerShell to generate a random string. Open PowerShell and run [System.Text.Encoding]::UTF8.GetString((1..32 | ForEach-Object { Get-Random -Minimum 0 -Maximum 255 })) | Out-Clipboard. This will generate a 32-character random string and copy it to your clipboard.

4. Run the development server.

   npm run dev

Contributing

Contributions to fork-commit-merge-web are always welcome, whether it be improvements to the documentation, new features, bug fixes, or even feedback on the project.

1. Fork the project.

2. Add a reference to the original repository:

git remote add upstream https://github.com/fork-commit-merge/fork-commit-merge-web.git

3. Check the remotes for this repository:

git remote -v

4. Take a pull from the upstream repository to your main branch to keep it at par with the main project:

git pull upstream main

5. Create your feature branch:

git switch -c my-new-feature

6. Add your changes:

git add files-that-you-changed

7. Commit your changes:

git commit -m 'Add some feature'

8. Push to the branch:

git push -u origin my-new-feature

9. Submit a pull request.

We kindly request that you express your interest in working on a particular issue by leaving a message on the respective issue thread. This will allow us to assign the issue to you directly, thereby preventing multiple individuals from simultaneously working on the same problem.

If you have some small bug, feature, or fix to make, that is not currently on Issues, feel free to submit a pull request.

For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

Also, please read our Contributing Guidelines for more information.

Questions

If you have any questions about the repo, open an issue or contact us directly at [email protected]

License

This project is licensed under the MIT License.

List of Contributors

Massive thanks to all of the these fine individuals who contributed to this project!

fork-commit-merge-web's Issues

Change version number from 1.x.x to 1.0.0

Change the version number in SECURITY.md from 1.x.x to 1.0.0

Add PrivacyPolicy.md

Add PrivacyPolicy.md to the root of the project. You can copypaste one from my other projects like here.

Add `Roadmap` section to README.md

Add Roadmap section to README.md, maybe after the Contributing section. Content of the Roadmap should be all of the text below:

The following are some of the enhancements and features planned for future releases of this project. We welcome any feedback or contributions to help make these plans a reality.

1. User Authentication: We plan to add user registration and login functionality. This will allow users to have personalized experiences and save their projects on the platform.

2. Pro Membership: We're considering a paid membership tier. Pro members would receive certain benefits, such as a special 'Pro' badge and early access to new features. More details about the cost and specific benefits will be provided at a later date.

3. Integration with GitHub API: To make project management easier, we're planning on adding the ability to pull project information directly from GitHub. This would streamline the process of adding new projects to the site.

These roadmap items are subject to change based on user feedback and development resources. If you have any suggestions or if you want to contribute to the project, please see the Contributing section.

Create more Framework/Library components

In the website, there are is Frameworks | Libraries dropdown menu in the header/navbar.
Add more frameworks or libraries that are not yet in this list. The framework/library components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/frameworkComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/frameworkList.ts file similarly as the other paths.
• Add the component inside pages/frameworks/[framework].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Create more Language components

In the website, there are is Languages dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other languages.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

More Framework/Library components needed

In the website, there is Frameworks/Libraries dropdown menu in the header/navbar.
Add more frameworks or libraries that are not yet in this list. The Framework/Library components has to be made similarly as the other components, so you can simply copypaste existing framework/library component inside components/frameworkComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/frameworkList.ts file similarly as the other paths.
• Add the path to middleware.ts file similarly as the other paths.
• Add the component inside pages/frameworks/[framework].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Add shadow below the Header

Add a bit of shadow at the bottom of the Header using Tailwind classes.

Incorrect Java Logo and Missing Technology Logos

Incorrect Java Logo and Missing Technology Logos

Issue Description:
I noticed that the website displays logos for various programming languages and technologies, but there are a couple of issues with the logos being incorrect or missing. This issue aims to address these discrepancies and ensure the website provides accurate representations of the technologies.

Incorrect Java Logo:
The Java logo displayed on the website is not the correct version. It's essential to update the Java logo to reflect the current official logo. This helps in maintaining the accuracy and professionalism of the website.

Missing Technology Logos:
Additionally, I've noticed that some technology logos are missing from the website. It would be great to include logos for the missing technologies to ensure comprehensive coverage.

Suggested Actions:

Replace the incorrect Java logo with the up-to-date, official Java logo.
Add logos for the missing technology or programming languages to the website to provide complete and accurate information.

Steps to Reproduce :

Badges.tsx
IndexMain.tsx
badgesData.ts

Screenshots :

Create more Language components

In the website, there are is Language dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The Language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other paths.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Update 'Getting Started' Link to redirect user to /add-project

Update 'Getting Started' Link in Header.tsx to redirect user to /add-project instead of /getting-started.

More framework/library components needed

In the website, there is Frameworks/Libraries dropdown menu in the header/navbar.
Add more frameworks or libraries that are not yet in this list. The Framework/Library components has to be made similarly as the other components, so you can simply copypaste existing framework/library component inside components/frameworkComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/frameworkList.ts file similarly as the other paths.
• Add the path to middleware.ts file similarly as the other parts.
• Add the component inside pages/frameworks/[framework].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Add more resources about Contributing to Open Source

Add more resources about Contributing to Open Source in pages/resources.tsx. It can be anything from video tutorials to different documentations or websites.

Create more Best Practices sections for different languages

Create more Best Practices sections similar as other ones to pages/best-practices.tsx. You can create new component to components folder where the content will be, similar as with the other languages.

So far we have:

• JavaScript
• TypeScript
• Ruby
• Rust

So we are missing several languages used in the Fork, Commit, Merge project such as C, C++, C#, Python, Elixir, Kotlin, Java, PHP etc.

Add more Language/Library/Framework descriptions

Add more Language/Library/Framework descriptions to components/Descriptions.tsx file about technologies used in Fork, Commit, Merge repository.

Create more Language components

In the website, there are is Languages dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other languages.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

More language components needed

In the website, there are is Language dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The Language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other paths.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Create more Framework/Library components

In the website, there are is Frameworks | Libraries dropdown menu in the header/navbar.
Add more frameworks or libraries that are not yet in this list. The framework/library components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/frameworkComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/frameworkList.ts file similarly as the other paths.
• Add the component inside pages/frameworks/[framework].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Create more Framework/Library components

In the website, there are is Frameworks | Libraries dropdown menu in the header/navbar.
Add more frameworks or libraries that are not yet in this list. The framework/library components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/frameworkComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/frameworkList.ts file similarly as the other paths.
• Add the component inside pages/frameworks/[framework].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

More Language components needed

In the website, there is Languages dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The Language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other paths.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Enhance the design of the Header and Footer

Enhance the design of the header components/layout/Header.tsx and footer components/layout/Footer.tsx to look more modern. This can be anything between new color scheme to hover effects etc.

Feel free to ask here any questions you may have regarding this issue.

Enhance the look of the Header for more modern style

Enhance the design of the header/navbar in components/layout/Header.tsx to look more modern. This can be anything between new color scheme to hover effects etc.

Feel free to ask here any questions you may have regarding this issue.

Add `login` and `sign up` links to the header

Add login and sign up links to the header in components/Header.tsx. No need to add functionality yet, just the links.

Create more Language components

In the website, there are is Language dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The Language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other paths.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

No favicon in the project

It doesn't have a "fav icon", it would be cool if it did. If it is in your plans:)

More Language components needed

In the website, there is Languages dropdown menu in the header/navbar.
Add more languages that are not yet in this list. The Language components has to be made similarly as the other components, so you can simply copypaste existing language component inside components/languageComponents directory and create new component from that by adding the information needed as well as the badge image if it is available.

After creating the component:

• Add the path to data/languageList.ts file similarly as the other paths.
• Add the path to middleware.ts file similarly as the other paths.
• Add the component inside pages/languages/[lang].tsx file same way as the other components are added.

Remember to ask permission to get signed for this task to avoid other contributors possible working at the same issue and avoiding conflicts.

Feel free to ask any questions here if you have some problems!

Enhance the footer design

i want to edit the footer, as it is very small and not user friendly
will make it more attractive

Enhance Header.tsx

Enhance the header design to look more modern in components/layout/Header.tsx.

Untrusted user input in findOne() function can result in NoSQL Injection.

Tracking issue for:

• https://github.com/nikohoffren/fork-commit-merge-web/security/code-scanning/1

Add hover:text-slate-100 class to all links in header

Add hover:text-slate-100 class to all links in components/Header.tsx file.