Skip to content

docs: rewrite README for beginner-friendly onboarding - #56

Merged
calebephrem merged 5 commits into
open-devhub:mainfrom
Tanvi-Kuwar:improve-readme
Aug 4, 2026
Merged

docs: rewrite README for beginner-friendly onboarding#56
calebephrem merged 5 commits into
open-devhub:mainfrom
Tanvi-Kuwar:improve-readme

Conversation

@Tanvi-Kuwar

Copy link
Copy Markdown
Contributor

What does this PR do?

This PR rewrites the README to make it more beginner-friendly and easier to follow for new contributors.

Changes include:

  • Added a clearer introduction explaining what DevHub is and what this repository contains.
  • Expanded the setup guide with step-by-step instructions for running the project locally.
  • Added explanations of the project structure and important directories.
  • Improved the contribution workflow for first-time open-source contributors.
  • Added troubleshooting tips for common setup issues.
  • Updated the Tech Stack and Community sections for better readability.
  • Added a Contributors section with the contrib.rocks image.
  • Incorporated the review suggestions from docs: make README more beginner-friendly #53 where applicable.

The goal is to help new contributors understand the project, get it running locally, and make their first contribution with confidence.

Closes

Type of change(s)

  • Bug fix
  • New feature
  • Documentation update
  • Style / UI change
  • Refactor (no functional change)
  • Performance improvement
  • Other

Checklist

  • I've tested this change locally and it works as expected
  • bun run lint or npm run lint completes without warnings or errors
  • bun run build or npm run build completes successfully
  • My commit messages follow Conventional Commits (e.g. feat: ..., fix: ..., chore: ...)
  • I've updated relevant documentation (README, comments, etc.) if needed
  • I've removed any temporary debugging code (e.g. console.log)

Screenshots / recordings (if applicable)

Not applicable. This PR only updates documentation.

Anything else the reviewer should know?

I incorporated the review suggestions from #53 into this PR where applicable. I wasn't able to verify the project locally because the build currently fails in my environment with a Node.js/Next.js configuration error (ERR_UNKNOWN_FILE_EXTENSION when loading a TypeScript config file).

@devhub-bot devhub-bot Bot added the docs Improvements or additions to documentation label Aug 2, 2026
@beetle-ai

beetle-ai Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Summary by Beetle

This PR rewrites the README.md file to create a beginner-friendly onboarding guide for the DevHub website repository. The changes transform the README from a concise technical overview into a comprehensive, step-by-step guide designed to help first-time contributors and developers new to Next.js understand the project structure, set up their development environment, and make their first contribution with confidence. The rewrite emphasizes accessibility, includes detailed explanations, visual formatting improvements, and practical troubleshooting guidance.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +206/-34 Comprehensive rewrite of the README to improve beginner-friendliness. Changes include: (1) Enhanced introduction with emojis and clearer value proposition explaining DevHub's mission and the website's purpose; (2) Expanded "About DevHub" section with bullet points highlighting community resources; (3) Tech Stack reformatted as a table for better readability; (4) Detailed Getting Started guide with 4 numbered steps, including prerequisites verification commands, cloned repository instructions, and development server startup; (5) Project Structure explanation with a new table mapping folders to their purposes; (6) Improved Contributing section with step-by-step workflow including git commands and linting instructions; (7) New "Useful Scripts" table documenting npm commands; (8) Testing Your Changes section with pre-PR verification steps; (9) Troubleshooting section addressing common issues (Node.js version, port conflicts, module errors); (10) Enhanced Community section with better formatting and descriptions; (11) New Contributors section with contributor attribution. Overall, the documentation grew from 34 lines to 240 lines, making it significantly more accessible to beginners while maintaining technical accuracy.

Total Changes: 1 file changed, +206 additions, -34 deletions

🎯 Key Changes:

  • Beginner-Focused Introduction: Replaced technical jargon with welcoming language and emojis, explicitly stating the repository is "a great place to start" for first-time open-source contributors.
  • Structured Getting Started Guide: Transformed a 3-line setup section into a 4-step process with prerequisites verification, detailed clone instructions, dependency installation guidance, and development server startup with browser verification.
  • Visual Documentation Improvements: Converted bullet lists to markdown tables for Tech Stack, Project Structure, and Useful Scripts sections, improving scannability and information hierarchy.
  • Project Structure Explanation: Added a new section explaining the purpose of key folders (app/, components/, content/, lib/, hooks/, .github/) to help contributors understand where to focus their efforts.
  • Comprehensive Troubleshooting: Added a new troubleshooting section addressing three common issues: Node.js version requirements, port conflicts, and module resolution problems.
  • Enhanced Contribution Workflow: Expanded the contributing section with detailed git commands, linting instructions, and commit message examples to guide first-time contributors through the entire process.
  • Testing Guidance: Added a "Testing Your Changes" section encouraging developers to verify their work before submitting PRs, including linting and manual testing steps.
  • Community Recognition: Added a contributors section with a visual contributor attribution image, fostering community appreciation.

📊 Impact Assessment:

  • Security: No security implications. This is purely documentation content with no code changes or security-sensitive information introduced.
  • Performance: No performance impact. README changes do not affect application runtime, build performance, or deployment.
  • Maintainability: Positive impact. The improved documentation structure makes it easier for new contributors to understand the project, reducing onboarding friction and support burden. The table-based formatting is more maintainable and easier to update than prose descriptions. Clear folder explanations reduce confusion about where to make changes.
  • Testing: No direct testing implications. However, the addition of testing guidance and troubleshooting sections encourages contributors to validate their changes before submission, potentially improving PR quality and reducing review cycles. The documentation now explicitly guides developers through the linting process (npm run lint) before opening PRs.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai

beetle-ai Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

✅ You're good to merge this PR! No issues found. Great job!

Settings
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

@beetle-ai

beetle-ai Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Summary by Beetle

This PR refines the README documentation by addressing review suggestions to improve clarity, conciseness, and user guidance. The changes streamline the introduction, reorganize content sections for better readability, enhance the contribution workflow guidance, and add missing documentation references. The overall goal is to make the README more accessible to new contributors while maintaining comprehensive information about the DevHub project.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +16/-24 Refined documentation addressing review feedback: simplified title and introduction, reorganized "What's in here" section with clearer descriptions, added note about tech stack learning curve, enhanced "good first issue" guidance with direct link, added npm run typecheck command to scripts table, included website URL in community links, and simplified contributor acknowledgment section.

Total Changes: 1 file changed, +16 additions, -24 deletions

🎯 Key Changes:

  • Simplified Title & Introduction: Changed from "DevHub Website" to "DevHub" with a more concise, focused opening that immediately explains the project's purpose and scope.
  • Improved Content Organization: Restructured the "What's in here" section from a long bulleted list to categorized items (Landing page, Pages, Resource library, Articles, Rules, Partners) with brief descriptions for each.
  • Enhanced Contributor Guidance: Added a direct link to GitHub's "good first issue" filter and provided context that these issues are specifically selected for first-time contributors, making it more actionable.
  • Added Missing Documentation: Included the npm run typecheck command in the scripts reference table, ensuring developers know about TypeScript type checking.
  • Expanded Community Links: Added the website URL (devhub.vercel.app) to the "Get Involved" section alongside existing Discord, GitHub, and email links.
  • Tech Stack Accessibility Note: Added clarification that contributors don't need to know all technologies before contributing, reducing barriers to entry.
  • Simplified Contributor Acknowledgment: Streamlined the "Contributors" section heading and description for brevity and clarity.

📊 Impact Assessment:

  • Security: No security implications. This is purely documentation content with no code changes.
  • Performance: No performance impact. README changes do not affect application performance.
  • Maintainability: Positive Impact - The improved documentation structure and clearer guidance make it easier for new contributors to understand the project, reducing onboarding friction and support requests. The addition of the typecheck command ensures developers are aware of all available development tools.
  • Testing: No testing implications. This is documentation-only. However, the enhanced contribution guidance may lead to better-quality pull requests from new contributors due to clearer expectations and easier entry points.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai

beetle-ai Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

✅ You're good to merge this PR! No issues found. Great job!

Settings
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

@devhub-bot

devhub-bot Bot commented Aug 2, 2026

Copy link
Copy Markdown

Warning

Linting checks did not pass for this PR.

Run: View logs

Tip

Make sure to check the following before pushing:

  • code formatting issues
  • code quality / linting errors
  • unused or broken imports
  • syntax or type issues (if applicable)
  • secret leaks or exposed credentials
  • security / dependency vulnerabilities
  • invalid YAML / JSON / config files

Then fix the issues, commit, and push again.

Note

This is just a friendly reminder and will not block the PR from being merged.

@calebephrem calebephrem left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is amazing!
I would accept it as is, but just a couple of changes to make it look even better:

Comment thread README.md Outdated
Comment thread README.md Outdated
@calebephrem

Copy link
Copy Markdown
Member

I wasn't able to verify the project locally because the build currently fails in my environment with a Node.js/Next.js configuration error (ERR_UNKNOWN_FILE_EXTENSION when loading a TypeScript config file).

You don't need to build the project because this is just a documentation update, but would appreciate if you run npm run format before committing.

@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Summary by Beetle

This PR applies Prettier code formatting to the README.md file, specifically reformatting all Markdown tables to improve consistency and readability. The changes align the table columns with proper spacing and padding, making the documentation more visually organized and easier to maintain. This is a purely stylistic improvement with no functional changes to the content or structure of the documentation.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +26/-26 Reformatted all Markdown tables (Tech Stack, Folder Structure, and Useful Scripts) using Prettier to improve column alignment and readability. Tables now have consistent spacing and padding for better visual presentation.

Total Changes: 1 file changed, +26 additions, -26 deletions

🎯 Key Changes:

  • Tech Stack Table: Reformatted with aligned column widths for better readability
  • Folder Structure Table: Improved spacing and alignment of folder descriptions
  • Useful Scripts Table: Enhanced table formatting with consistent column padding
  • Newline Fix: Added missing newline at end of file (EOF compliance)
  • No Content Changes: All documentation content remains identical; only formatting was modified

📊 Impact Assessment:

  • Security: ✅ No security implications. This is a documentation formatting change with no code modifications.
  • Performance: ✅ No performance impact. README.md is a static documentation file; formatting changes do not affect application performance.
  • Maintainability: ✅ Positive Impact. Prettier-formatted tables are easier to read and maintain. Consistent formatting reduces cognitive load when reviewing documentation and makes future edits more straightforward. Aligns with project's code style standards.
  • Testing: ✅ No testing implications. This is a documentation-only change. No code logic, functionality, or test coverage is affected.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

✅ You're good to merge this PR! No issues found. Great job!

Settings
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

@Tanvi-Kuwar

Copy link
Copy Markdown
Contributor Author

Hi! I pushed the requested updates and formatted the README with Prettier. The workflow is currently awaiting maintainer approval. When you have time, could you please approve the workflow and review the updated PR? Thank you!

@devhub-bot

devhub-bot Bot commented Aug 4, 2026

Copy link
Copy Markdown

Note

Linting checks passed successfully 🎉

All formatting and code quality checks are clean.

You're good to merge 🚀

@calebephrem

Copy link
Copy Markdown
Member

@Tanvi-Kuwar Thank you for listening and formatting your readme with prettier, and you can see important checks have passed so we're good to merge
But before merging, I'd love if you apply these suggestions tho #56 (review)

Co-authored-by: Caleb <quantumpandaprog@gmail.com>
@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Summary by Beetle

This PR improves the README.md documentation by applying review suggestions that enhance the clarity and structure of the repository overview. The changes replace a generic table-based folder description with a more detailed, visual tree-based structure that better explains the purpose and organization of each directory and subdirectory in the Next.js website project. This makes it easier for new contributors to understand the codebase organization and navigate to the relevant folders for their contributions.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +23/-19 Enhanced repository structure documentation by replacing a simple table with a detailed tree-based directory structure. Added comprehensive descriptions for app/, components/, content/, lib/, and hooks/ directories with their subdirectories and purposes. Improved visual hierarchy using tree symbols and arrows to make navigation clearer for contributors.

Total Changes: 1 file changed, +23 additions, -19 deletions

🎯 Key Changes:

  • Enhanced Directory Tree Visualization: Replaced a basic table format with a detailed ASCII tree structure that shows the complete folder hierarchy with visual indicators (├──, │, └──, →)
  • Detailed Subdirectory Documentation: Added descriptions for subdirectories within major folders:
  • app/api/, app/pages/, app/articles/, app/partners/, app/resources/, app/rules/
  • components/home/, components/site/, components/ui/, components/bits/
  • content/pages/, content/articles/, content/resources.ts, content/rules.ts
  • lib/markdown/, lib/animations.ts, lib/colors.ts, lib/utils.ts
  • Improved Clarity: Each directory now includes a brief arrow-based description (→) explaining its purpose, making it immediately clear what each folder contains
  • Better Contributor Guidance: The enhanced structure helps contributors quickly identify where to make changes based on their task type (pages, components, content, utilities, or hooks)

📊 Impact Assessment:

  • Security: No security implications. This is purely documentation-focused with no code changes.
  • Performance: No performance impact. Documentation changes do not affect runtime behavior or build performance.
  • Maintainability: Positive Impact - The improved documentation structure makes the codebase more accessible to new contributors and reduces onboarding time. The detailed directory descriptions serve as a quick reference guide for understanding project organization.
  • Testing: No testing implications. Documentation updates do not require test coverage changes.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

✅ You're good to merge this PR! No issues found. Great job!

Settings
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

@Tanvi-Kuwar

Copy link
Copy Markdown
Contributor Author

Hi @calebephrem, I've applied the requested review suggestions. Please let me know if there's anything else you'd like me to update. Thank you!

@calebephrem calebephrem left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really sorry for not removing this earlier, it should not be here.. Apply this suggestion and we're good to go!

Comment thread README.md
Comment on lines 128 to +221
@@ -150,42 +218,142 @@ Open [http://localhost:3000](http://localhost:3000) and you're in.
├── 📄 package-lock.json
├── 📄 package.json
├── 📄 postcss.config.js
├── 📄 README.md
├── 📄 tailwind.config.ts
├── 📄 tsconfig.json
├── 📄 vercel.json
├── app/ → Pages of the site (Next.js App Router)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
├── app/ → Pages of the site (Next.js App Router)

@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Summary by Beetle

This PR removes duplicate project structure documentation from the README.md file. The commit eliminates a redundant section of the project tree that was listing root-level configuration files (.eslintrc.json, .gitignore, bun.lock, components.json, CONTRIBUTING.md, LICENSE, next.config.js, package-lock.json, package.json, and postcss.config.js). This cleanup improves documentation clarity by removing the duplicate tree structure that was already documented elsewhere in the file.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +0/-10 Removed duplicate project structure tree listing root-level configuration files that were redundantly documented

Total Changes: 1 file changed, +0 additions, -10 deletions

🎯 Key Changes:

  • Removed duplicate tree structure: Eliminated 10 lines from the project structure documentation that listed root-level files (.eslintrc.json, .gitignore, bun.lock, components.json, CONTRIBUTING.md, LICENSE, next.config.js, package-lock.json, package.json, postcss.config.js)
  • Improved documentation clarity: The removal prevents confusion from having the same files documented in multiple places within the README
  • Maintained structure integrity: The remaining documentation still provides a complete overview of the project structure, starting from the app/ directory

📊 Impact Assessment:

  • Security: No security implications. This is purely a documentation cleanup with no code changes.
  • Performance: No performance impact. This is a documentation-only change affecting README rendering only.
  • Maintainability: Positive impact. Removing duplicate documentation reduces maintenance burden and prevents inconsistencies between multiple versions of the same information. Developers will have a single source of truth for the project structure.
  • Testing: No testing implications. This change does not affect any code, tests, or functionality.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai

beetle-ai Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

✅ You're good to merge this PR! No issues found. Great job!

Settings
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Comment thread README.md
Comment on lines 128 to +211
@@ -140,52 +208,142 @@ Open [http://localhost:3000](http://localhost:3000) and you're in.
│ ├── 📄 redirects.config.ts
│ ├── 📄 staticdata.config.ts
│ └── 📄 utils.ts
├── 📄 .eslintrc.json
├── 📄 .gitignore
├── 📄 bun.lock
├── 📄 components.json
├── 📄 CONTRIBUTING.md
├── 📄 LICENSE
├── 📄 next.config.js
├── 📄 package-lock.json
├── 📄 package.json
├── 📄 postcss.config.js
├── 📄 README.md
├── 📄 tailwind.config.ts
├── 📄 tsconfig.json
├── 📄 vercel.json
├── app/ → Pages of the site (Next.js App Router)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
├── app/ → Pages of the site (Next.js App Router)

@devhub-bot

devhub-bot Bot commented Aug 4, 2026

Copy link
Copy Markdown

Note

Linting checks passed successfully 🎉

All formatting and code quality checks are clean.

You're good to merge 🚀

@calebephrem

Copy link
Copy Markdown
Member

Umm github diff is kinda weird for some reason, so i'll just merge it and fix some things manually

@calebephrem
calebephrem merged commit 4832402 into open-devhub:main Aug 4, 2026
4 of 5 checks passed
@calebephrem

Copy link
Copy Markdown
Member

Thank you for contributing!!

@Tanvi-Kuwar

Copy link
Copy Markdown
Contributor Author

Thank you! I really appreciate the review and feedback. I learned a lot through this contribution.

@calebephrem

Copy link
Copy Markdown
Member

I'm happy to hear that! And thank you as well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make the readme beginner friendly

2 participants