DevHub

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.

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.

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.

• 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

You don't need to know all of these before contributing. Most changes only touch one or two of them at a time.

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.

Before you begin, make sure you have the following installed:

• 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:

node -v
npm -v
git --version

Clone the project from GitHub:

git clone https://github.com/open-devhub/website.git

Move into the project directory:

cd website

This project depends on several external packages. Install them using:

npm install

This may take a few minutes the first time.

Run:

npm run dev

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.

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.

Below is an overview of the repository structure to help you locate important files and folders.

├── 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

We welcome contributions from developers of all experience levels, including first-time contributors!

A typical contribution workflow looks like this:

1. Fork this repository to your GitHub account.
2. Clone your fork locally.
3. Create a new branch.

git checkout -b feature/my-new-feature

4. Make your changes.
5. Test your changes locally.
6. Run the linter:

npm run lint

7. Commit your changes.

git commit -m "feat: add awesome feature"

8. Push your branch.

git push origin feature/my-new-feature

9. Open a Pull Request describing what you changed and why.

New to open source? Look for issues tagged good first issue. 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.

Before opening a Pull Request, make sure your changes work as expected.

Run the linter:

npm run lint

Then start the development server:

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.

Make sure you're using Node.js 18 or later.

Run the development server on another port:

npm run dev -- -p 3001

Delete the node_modules folder and reinstall dependencies:

rm -rf node_modules
npm install

Want to get involved? We'd love to have you!

• Website: devhub.vercel.app
• Discord: Join DevHub – Ask questions, connect with other developers, and stay up to date with the community.
• GitHub: open-devhub – Explore our projects and contribute.
• Email: open-devhub@outlook.com – Reach out for general inquiries or support.

Licensed under the GNU GPL v3.0 License. See the LICENSE file for details.

Thanks to everyone who has contributed to this repository!