[Feat]: Automate Profile Addition via Website Form Submission | gssoc-ext

What feature?

Issue Description:

Currently, DevDisplay requires users to manually fork the repository, create a JSON file, and submit a pull request to add their profiles. To enhance user experience and simplify the contribution process, I will create a feature that allows users to submit their profile details directly from the website, automatically generating and submitting the required JSON file via a form. Detailed Plan:

Create a Profile Submission Form:

Build a form using React Hook Form for collecting user details: Fields: Name, Location, Bio, Avatar URL, Portfolio URL, Skills, GitHub, Twitter, LinkedIn. Validate input fields to ensure correct data formatting (e.g., valid URLs, bio length of 20-30 words).

Generate JSON from Form Data:

Upon form submission, the input will be processed and converted into the required JSON format, matching the existing profile structure. The skills will be handled as a comma-separated input that is transformed into an array.

Example of JSON format:

json

{ "name": "Your Name", "location": "Your Location", "bio": "Your Bio should be 20-30 words not more than that", "avatar": "https://github.com/your-github-username.png", "portfolio": "Your Portfolio URL or Github URL", "skills": ["Your Skill 1", "Your Skill 2", "..."], "social": { "GitHub": "https://github.com/your-github-username", "Twitter": "https://twitter.com/your-twitter-username", "LinkedIn": "https://www.linkedin.com/in/your-linkedin-username" } }

Backend Integration for GitHub Automation:

Set up a backend service (Node.js/Express) to handle the form submissions. Use the GitHub API to automate the process of adding the user's JSON profile file to the repository: Fork the repository (if necessary). Create a new branch. Add the JSON file (e.g., username.json) to the public/data/ folder. Submit a pull request automatically.

GitHub API Usage:

Implement the following GitHub API endpoints: Fork Repository (if needed). Create File in Repository. Create Pull Request.

User Experience:

Once the pull request is created, it will await the project maintainer’s review and merge. After merging, the user’s profile will be displayed on the website automatically.

UI Enhancements:

Add appropriate success and error messages to guide users through the process. Notify users when their profile has been successfully submitted and is under review.

Assign this to me under gssoc-ext level 3

Add screenshots

Code of Conduct

[X] I agree to follow this project's Code of Conduct

devdisplay / DevDisplay