feat: auto-populate README fields from GitHub repository URL

[Shivangi1515]

Closes #167

Description

This PR implements the feature to automatically populate README fields from a GitHub repository URL.

Currently, users have to manually enter all details. With this feature, pasting a public GitHub repository URL fetches repository metadata using the GitHub REST API and pre-fills the form fields, making README generation faster and more efficient.

Proposed Improvements

1. GitHub API Utility

• Created a new utility file src/utils/githubApi.js that contains:
  • parseGitHubUrl(url): Robust parser supporting various GitHub URL formats (HTTPS, HTTP, SSH, .git suffixes, subpages, etc.).
  • fetchRepoData(owner, repo): Fetches repository metadata from the public GitHub REST API, returning clean mapped values (name, description, owner login, homepage URL, license, etc.).

2. State & Fields Management

• Updated src/hooks/useReadmeState.js:
  • Added a new updateMultipleFields helper function to set multiple fields of the formData state simultaneously in a single React state transaction, ensuring smooth auto-saving.

3. Editor Panel UI

• Updated src/pages/ReadmeMaker/EditorPanel.jsx:
  • Created a new Import from GitHub card at the very top of the editor.
  • Added a URL input field and a "Fetch" button.
  • Implemented loading, success, and clear error status messages (invalid URL format, repository not found, API rate limit exceeded, network error).

4. Integration & Mapping

• Updated src/pages/ReadmeMaker/ReadmeMaker.jsx:
  • Defined handleGitHubImport(data): maps the fetched GitHub API response fields to the matching local state keys (projName, repoSlug, tagline, description, ghUser, authorGh, license, demoUrl).
  • Integrated the import handler into <EditorPanel> via the onGitHubImport prop.

5. Styling

• Updated src/styles/index.css:
  • Styled the .github-import-bar layout, header, form input field, fetch button, and status messages.
  • Implemented custom styles for success and error status banners to fit the application theme aesthetics.

Verification

Automated

• Ran npm run build locally to verify clean compilation without warnings or errors.

[netlify]

✅ Deploy Preview for makeareadme ready!

Name	Link
🔨 Latest commit	7d93901
🔍 Latest deploy log	https://app.netlify.com/projects/makeareadme/deploys/6a0f963de80f1b0009f0e37d
😎 Deploy Preview	https://deploy-preview-175--makeareadme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Shivangi1515]

Hi @Mohit-368

Kindly review the PR for the issue #167