From 55e3edb8e7c78ae11859db6618a2c3f14ca56eb1 Mon Sep 17 00:00:00 2001 From: Tanvi-Kuwar Date: Sat, 1 Aug 2026 22:42:24 +0530 Subject: [PATCH 1/5] docs: rewrite README for beginner-friendly onboarding --- README.md | 240 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 206 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 83cc8d5..51bcb80 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,25 @@ -# DevHub +# DevHub Website -The official website for the DevHub developer community. Built with Next.js, TypeScript, and Tailwind CSS. +Welcome to the official website for the DevHub developer community! πŸ‘‹ + +This repository contains the source code for the DevHub website, built using **Next.js**, **TypeScript**, and **Tailwind CSS**. The website serves as a central place where developers can discover learning resources, read community guides, explore articles, and stay connected with everything happening in the DevHub community. + +Whether you're a beginner exploring modern web development or someone making your first open-source contribution, this repository is a great place to learn how a modern Next.js project is organized and make your first contribution with confidence. + +## About DevHub + +DevHub is a developer community focused on helping programmers learn, collaborate, and grow together. + +The website brings together community resources in one place, including: + +- πŸ“š Learning guides for developers +- πŸ› οΈ Curated tools and useful resources +- πŸ“– Articles and tutorials +- 🀝 Community information and onboarding guides +- πŸ“œ Rules, FAQs, and moderation guides +- ❀️ Open-source contribution opportunities + +If you're new to open source, this project is a great place to start because documentation improvements, bug fixes, and feature enhancements are all welcome. ## What's in here @@ -23,39 +42,98 @@ The official website for the DevHub developer community. Built with Next.js, Typ ## Tech Stack -- **Framework** - Next.js -- **Language** - TypeScript -- **Styling** - Tailwind CSS -- **Animation Libriary** - GSAP and Framer Motion -- **Component Libriary** - React Bits -- **Icons** - Lucide -- **Deployment** - Vercel +| Technology | Purpose | +|------------|---------| +| Next.js | React framework used to build the website | +| TypeScript | Adds static typing to JavaScript | +| Tailwind CSS | Utility-first CSS framework for styling | +| GSAP & Framer Motion | Animation libraries | +| React Bits | UI component library | +| Lucide | Icon library | +| Vercel | Deployment platform | ## Getting Started +Follow the steps below to run the project on your own computer. + +Don't worry if you've never worked with a Next.js project beforeβ€”each step is explained. + ### Prerequisites -- Node.js 18+ -- bun, npm, yarn, or pnpm +Before you begin, make sure you have the following installed: -### Setup +- **Node.js 18 or later** +- A package manager such as **npm**, **bun**, **pnpm**, or **yarn** +- **Git** + +> **Note:** This guide uses **npm** for all examples. If you prefer **bun**, **pnpm**, or **yarn**, you can use the equivalent commands instead. + +You can verify your installation by running: + +```bash +node -v +npm -v +git --version +``` + +### Step 1: Clone the repository + +Clone the project from GitHub: + +```bash +git clone https://github.com/open-devhub/website.git +``` + +Move into the project directory: ```bash -# Clone the repo -git clone https://github.com/open-devhub/website cd website +``` + +### Step 2: Install dependencies + +This project depends on several external packages. Install them using: -# Install dependencies +```bash npm install +``` + +This may take a few minutes the first time. -# Start the dev server +### Step 3: Start the development server + +Run: + +```bash npm run dev ``` -Open [http://localhost:3000](http://localhost:3000) and you're in. +The development server will start locally. + +Open your browser and visit: + +``` +http://localhost:3000 +``` + +Whenever you save changes to the code, the browser automatically refreshes so you can instantly see your updates. + +### Step 4: Verify Everything Works + +Once the development server is running, open your browser and visit: + +``` +http://localhost:3000 +``` + +You should see the DevHub homepage. Try navigating to a few pages to make sure everything loads correctly. + +If you've made changes, save your files and verify that the browser updates automatically. ## Project Structure +Below is an overview of the repository structure to help you locate important files and folders. + ``` β”œβ”€β”€ πŸ“ .github β”‚ └── πŸ“ workflows @@ -156,36 +234,130 @@ Open [http://localhost:3000](http://localhost:3000) and you're in. β”œβ”€β”€ πŸ“„ vercel.json ``` +## Understanding the Project Structure + +The project contains several folders, but you only need to know a few to get started. + +| Folder | Purpose | +|---------|---------| +| `app/` | Contains the application's pages and routing. | +| `components/` | Reusable React components used throughout the website. | +| `content/` | Markdown files, guides, articles, and other website content. | +| `lib/` | Helper functions and utility code. | +| `hooks/` | Custom React hooks used across the application. | +| `.github/` | GitHub workflows such as automated linting. | + +As you contribute, you'll mostly work inside the **app**, **components**, or **content** folders. + ## Contributing -We welcome contributions of all kinds: bug fixes, new features, documentation improvements, and design feedback. +We welcome contributions from developers of all experience levels, including first-time contributors! -See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full guide. The short version: +A typical contribution workflow looks like this: -1. Fork the repo -2. Create a branch (`git checkout -b feature/your-cool-feature`) -3. Make your changes -4. Run `npm run lint` -5. Open a PR with a clear description +1. Fork this repository to your GitHub account. +2. Clone your fork locally. +3. Create a new branch. -First time contributing to open source? Look for issues tagged [`good first issue`](https://github.com/open-devhub/website/issues?q=is%3Aopen+label%3A%22good+first+issue%22). +```bash +git checkout -b feature/my-new-feature +``` + +4. Make your changes. +5. Test your changes locally. +6. Run the linter: + +```bash +npm run lint +``` + +7. Commit your changes. + +```bash +git commit -m "feat: add awesome feature" +``` + +8. Push your branch. + +```bash +git push origin feature/my-new-feature +``` + +9. Open a Pull Request describing what you changed and why. + +If you're contributing for the first time, check out issues labelled **good first issue**. + +For a more detailed contribution guide, coding standards, and pull request expectations, please see [CONTRIBUTING.md](./CONTRIBUTING.md). + +## Useful Scripts + +| Command | Description | +|---------|-------------| +| `npm run dev` | Starts the local development server. | +| `npm run build` | Creates an optimized production build. | +| `npm run start` | Runs the production build locally. | +| `npm run lint` | Checks your code for linting issues. | +| `npm run format` | Formats the project using Prettier. | + +## Testing Your Changes + +Before opening a Pull Request, make sure your changes work as expected. + +Run the linter: + +```bash +npm run lint +``` -## Scripts +Then start the development server: ```bash -npm run dev # Start development server -npm run build # Production build -npm run start # Start production server -npm run lint # Run ESLint -npm run format # Run Prettier +npm run dev +``` + +Open the website in your browser and verify that your changes appear correctly and don't introduce any issues. + +If the project adds automated tests in the future, be sure to run those as well before submitting your contribution. + +## Troubleshooting + +### `npm install` fails + +Make sure you're using **Node.js 18 or later**. + +### Port 3000 is already in use + +Run the development server on another port: + +```bash +npm run dev -- -p 3001 +``` + +### Module not found + +Delete the `node_modules` folder and reinstall dependencies: + +```bash +rm -rf node_modules +npm install ``` ## Community -- **Discord** - [devhub.vercel.app/join](https://devhub.vercel.app/join) -- **GitHub Org** - [github.com/open-devhub](https://github.com/open-devhub) -- **Email** - open-devhub@outlook.com +Want to get involved? We'd love to have you! + +- **Discord:** [Join DevHub](https://devhub.vercel.app/join) – Ask questions, connect with other developers, and stay up to date with the community. +- **GitHub:** [open-devhub](https://github.com/open-devhub) – Explore our projects and contribute. +- **Email:** open-devhub@outlook.com – Reach out for general inquiries or support. ## License Licensed under the GNU GPL v3.0 License. See the [LICENSE](./LICENSE) file for details. + +## ❀️ Our Contributors + +A huge thank you to everyone who has contributed to making DevHub better! + + + + \ No newline at end of file From a3a3ccdb1b70adc3e31dbec304b3b43803c3b8ce Mon Sep 17 00:00:00 2001 From: Tanvi-Kuwar Date: Sun, 2 Aug 2026 19:20:51 +0530 Subject: [PATCH 2/5] docs: address README review suggestions --- README.md | 40 ++++++++++++++++------------------------ 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 51bcb80..3149ea8 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ -# DevHub Website +# DevHub -Welcome to the official website for the DevHub developer community! πŸ‘‹ +The official website for DevHub, a developer community focused on helping people learn, build, and connect with other developers. This repository contains the source code for the website, including the landing page, community rules, guides, resource library, articles, and partners page. -This repository contains the source code for the DevHub website, built using **Next.js**, **TypeScript**, and **Tailwind CSS**. The website serves as a central place where developers can discover learning resources, read community guides, explore articles, and stay connected with everything happening in the DevHub community. - -Whether you're a beginner exploring modern web development or someone making your first open-source contribution, this repository is a great place to learn how a modern Next.js project is organized and make your first contribution with confidence. +If you're new here, welcome! This README is designed to guide you from cloning the repository to making your first contribution, even if you've never worked with this codebase before. ## About DevHub @@ -23,22 +21,12 @@ If you're new to open source, this project is a great place to start because doc ## What's in here -- Landing page -- Community guides -- Resource library, curated tools and learning materials -- Partners page -- DevHub Pages: - - Getting Started - - Join Guide - - Server Info - - How to Ask - - How to Help - - Code of Conduct - - Contributing - - Moderation Guide - - Staff Roles - - FAQ - - and many many more +- Landing page: introduction to DevHub and what the community offers +- Pages: guides like Getting Started, How to Ask, How to Help, Code of Conduct, Contributing, Moderation Guide, Staff Roles, FAQ, and more +- Resource library: curated tools and learning materials +- Articles: write-ups from the community +- Rules: the server and community rules in one place +- Partners: communities and projects DevHub partners with ## Tech Stack @@ -52,6 +40,8 @@ If you're new to open source, this project is a great place to start because doc | Lucide | Icon library | | Vercel | Deployment platform | +You don't need to know all of these before contributing. Most changes only touch one or two of them at a time. + ## Getting Started Follow the steps below to run the project on your own computer. @@ -285,7 +275,7 @@ git push origin feature/my-new-feature 9. Open a Pull Request describing what you changed and why. -If you're contributing for the first time, check out issues labelled **good first issue**. +New to open source? Look for issues tagged [`good first issue`](https://github.com/open-devhub/website/issues?q=is%3Aopen+label%3A%22good+first+issue%22). These are picked specifically to be approachable for first-time contributors. For a more detailed contribution guide, coding standards, and pull request expectations, please see [CONTRIBUTING.md](./CONTRIBUTING.md). @@ -297,6 +287,7 @@ For a more detailed contribution guide, coding standards, and pull request expec | `npm run build` | Creates an optimized production build. | | `npm run start` | Runs the production build locally. | | `npm run lint` | Checks your code for linting issues. | +| `npm run typecheck` | Check for type errors. | | `npm run format` | Formats the project using Prettier. | ## Testing Your Changes @@ -346,6 +337,7 @@ npm install Want to get involved? We'd love to have you! +- **Website:** [devhub.vercel.app](https://devhub.vercel.app) - **Discord:** [Join DevHub](https://devhub.vercel.app/join) – Ask questions, connect with other developers, and stay up to date with the community. - **GitHub:** [open-devhub](https://github.com/open-devhub) – Explore our projects and contribute. - **Email:** open-devhub@outlook.com – Reach out for general inquiries or support. @@ -354,9 +346,9 @@ Want to get involved? We'd love to have you! Licensed under the GNU GPL v3.0 License. See the [LICENSE](./LICENSE) file for details. -## ❀️ Our Contributors +## Contributors -A huge thank you to everyone who has contributed to making DevHub better! +Thanks to everyone who has contributed to this repository. From d89288c4fe02828e82b6697c177fd2531f811126 Mon Sep 17 00:00:00 2001 From: Tanvi-Kuwar Date: Tue, 4 Aug 2026 10:53:10 +0530 Subject: [PATCH 3/5] style: format README with Prettier --- README.md | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 3149ea8..7065c4d 100644 --- a/README.md +++ b/README.md @@ -30,15 +30,15 @@ If you're new to open source, this project is a great place to start because doc ## Tech Stack -| Technology | Purpose | -|------------|---------| -| Next.js | React framework used to build the website | -| TypeScript | Adds static typing to JavaScript | -| Tailwind CSS | Utility-first CSS framework for styling | -| GSAP & Framer Motion | Animation libraries | -| React Bits | UI component library | -| Lucide | Icon library | -| Vercel | Deployment platform | +| Technology | Purpose | +| -------------------- | ----------------------------------------- | +| Next.js | React framework used to build the website | +| TypeScript | Adds static typing to JavaScript | +| Tailwind CSS | Utility-first CSS framework for styling | +| GSAP & Framer Motion | Animation libraries | +| React Bits | UI component library | +| Lucide | Icon library | +| Vercel | Deployment platform | You don't need to know all of these before contributing. Most changes only touch one or two of them at a time. @@ -228,14 +228,14 @@ Below is an overview of the repository structure to help you locate important fi The project contains several folders, but you only need to know a few to get started. -| Folder | Purpose | -|---------|---------| -| `app/` | Contains the application's pages and routing. | -| `components/` | Reusable React components used throughout the website. | -| `content/` | Markdown files, guides, articles, and other website content. | -| `lib/` | Helper functions and utility code. | -| `hooks/` | Custom React hooks used across the application. | -| `.github/` | GitHub workflows such as automated linting. | +| Folder | Purpose | +| ------------- | ------------------------------------------------------------ | +| `app/` | Contains the application's pages and routing. | +| `components/` | Reusable React components used throughout the website. | +| `content/` | Markdown files, guides, articles, and other website content. | +| `lib/` | Helper functions and utility code. | +| `hooks/` | Custom React hooks used across the application. | +| `.github/` | GitHub workflows such as automated linting. | As you contribute, you'll mostly work inside the **app**, **components**, or **content** folders. @@ -281,14 +281,14 @@ For a more detailed contribution guide, coding standards, and pull request expec ## Useful Scripts -| Command | Description | -|---------|-------------| -| `npm run dev` | Starts the local development server. | -| `npm run build` | Creates an optimized production build. | -| `npm run start` | Runs the production build locally. | -| `npm run lint` | Checks your code for linting issues. | -| `npm run typecheck` | Check for type errors. | -| `npm run format` | Formats the project using Prettier. | +| Command | Description | +| ------------------- | -------------------------------------- | +| `npm run dev` | Starts the local development server. | +| `npm run build` | Creates an optimized production build. | +| `npm run start` | Runs the production build locally. | +| `npm run lint` | Checks your code for linting issues. | +| `npm run typecheck` | Check for type errors. | +| `npm run format` | Formats the project using Prettier. | ## Testing Your Changes @@ -352,4 +352,4 @@ Thanks to everyone who has contributed to this repository. - \ No newline at end of file + From 26d680fe8245b7c57c433a8592c9d1c4c72c2e0f Mon Sep 17 00:00:00 2001 From: Tanvi Kuwar <167565054+Tanvi-Kuwar@users.noreply.github.com> Date: Tue, 4 Aug 2026 13:43:13 +0530 Subject: [PATCH 4/5] docs: apply review suggestions Co-authored-by: Caleb --- README.md | 42 +++++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 7065c4d..eac605a 100644 --- a/README.md +++ b/README.md @@ -218,27 +218,31 @@ Below is an overview of the repository structure to help you locate important fi β”œβ”€β”€ πŸ“„ 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) +β”‚ β”œβ”€β”€ api/ β†’ API routes (e.g. link previews) +β”‚ β”œβ”€β”€ pages/ β†’ Renders the guide pages (Getting Started, FAQ, etc.) +β”‚ β”œβ”€β”€ articles/ β†’ Article listing + individual article pages +β”‚ β”œβ”€β”€ partners/ β†’ Partners page +β”‚ β”œβ”€β”€ resources/ β†’ Resource library page +β”‚ └── rules/ β†’ Community rules page +β”œβ”€β”€ components/ β†’ Reusable React components +β”‚ β”œβ”€β”€ home/ β†’ Landing page sections (Hero, Features, Stats, etc.) +β”‚ β”œβ”€β”€ site/ β†’ Shared layout pieces (Navbar, Footer, Section) +β”‚ β”œβ”€β”€ ui/ β†’ Generic building blocks (buttons, dialogs, badges…) +β”‚ └── bits/ β†’ Visual/animation effects (glow, fuzzy text, cursor) +β”œβ”€β”€ content/ β†’ Site copy and structured data +β”‚ β”œβ”€β”€ pages/ β†’ Content for the guide pages +β”‚ β”œβ”€β”€ articles/ β†’ Article content +β”‚ β”œβ”€β”€ resources.ts β†’ Resource library data +β”‚ └── rules.ts β†’ Community rules data +β”œβ”€β”€ lib/ β†’ Shared utility code +β”‚ β”œβ”€β”€ markdown/ β†’ Markdown parser used for articles/pages +β”‚ β”œβ”€β”€ animations.ts β†’ Shared animation configs +β”‚ β”œβ”€β”€ colors.ts β†’ Color system used across the site +β”‚ └── utils.ts β†’ General helper functions +└── hooks/ β†’ Custom React hooks ``` -## Understanding the Project Structure - -The project contains several folders, but you only need to know a few to get started. - -| Folder | Purpose | -| ------------- | ------------------------------------------------------------ | -| `app/` | Contains the application's pages and routing. | -| `components/` | Reusable React components used throughout the website. | -| `content/` | Markdown files, guides, articles, and other website content. | -| `lib/` | Helper functions and utility code. | -| `hooks/` | Custom React hooks used across the application. | -| `.github/` | GitHub workflows such as automated linting. | - -As you contribute, you'll mostly work inside the **app**, **components**, or **content** folders. - ## Contributing We welcome contributions from developers of all experience levels, including first-time contributors! From 1c1fc833ba83a2e60a0199f0392ce302bf37c4fd Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 4 Aug 2026 11:35:28 +0300 Subject: [PATCH 5/5] docs: remove duplicate project structure tree --- README.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/README.md b/README.md index eac605a..138be60 100644 --- a/README.md +++ b/README.md @@ -208,16 +208,6 @@ Below is an overview of the repository structure to help you locate important fi β”‚ β”œβ”€β”€ πŸ“„ 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 β”œβ”€β”€ app/ β†’ Pages of the site (Next.js App Router) β”‚ β”œβ”€β”€ api/ β†’ API routes (e.g. link previews) β”‚ β”œβ”€β”€ pages/ β†’ Renders the guide pages (Getting Started, FAQ, etc.)