Skip to content

feat: implement neubrutalist UI design and modular component architecture #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kjarir wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: implement neubrutalist UI design and modular component architecture #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4b28fb4
chore: setup tailwind css v4 and project configuration
kjarir Feb 12, 2026
5e4fad7
feat: implement neubrutalist UI design and homepage sections
kjarir Feb 12, 2026
0a95db2
refactor: migrate monolithic App to modular component-based architecture
kjarir Feb 12, 2026
dddf064
docs: update contribution guidelines and add technical change log
kjarir Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions CHANGES_LOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Summary of Changes: Neubrutalist UI Overhaul & Architectural Refactoring

This document summarizes the major technical and design updates implemented in the **OrgExplorer** project to modernize the platform for GSoC 2026.

## 🎨 1. Neubrutalist Design Integration
- **Theme Overhaul**: Implemented a comprehensive Neubrutalist UI system using **Tailwind CSS v4**.
- **Color Palette**: Defined a high-contrast white theme accented with electric blue, neon green, and hot pink.
- **Typography**: Integrated **Space Grotesk** from Google Fonts as the primary typeface for a bold, technical aesthetic.
- **UI Elements**: Standardized 3px - 4px black borders, hard shadows (`shadow-neubrutal`), and vivid accent blocks.

## 🏗️ 2. Architectural Refactoring (Clean Code)
- **Component-Based Migration**: Decomposed the monolithic `App.tsx` into a modular directory structure:
- `src/components/layout/`: Global `Navbar` and `Footer`.
- `src/components/home/`: Individual landing page sections (`Hero`, `Features`, `Testimonials`, `CTA`).
- `src/pages/`: Page-level assembly components for better routing scalability.
- **Maintainability**: Improved code readability for open-source contributors by decoupling logic and styles.

## ⚡ 3. Technical Modernization
- **Tailwind CSS v4 Switch**: Fully migrated the project to the latest CSS-first Tailwind engine.
- **Vite Integration**: Configured `@tailwindcss/vite` for optimized dev performance and production builds.
- **Responsive Layout**: Optimized all sections for both mobile and desktop viewing.
- **Asset Cleanup**: Standardized Material Icon integration and Google Font preconnects in `index.html`.

## 📜 4. Documentation & Compliance
- **CONTRIBUTING.md**: Rewrote the contribution guide to be professional, project-specific, and AOSSIE/GSoC compliant.
- **Project Context**: Updated all copyright references and meta tags to **2026**.

## 🚀 Suggested GitHub Issue Details
**Title**: [Refactor] Modernize UI with Neubrutalist Theme and Component Architecture

**Description**:
I have implemented a full UI/UX overhaul for OrgExplorer to align with 2026 design standards.

**Main Changes**:
1. Integration of Tailwind CSS v4 and Space Grotesk typography.
2. Complete Neubrutalist landing page implementation with high-contrast elements.
3. Refactoring of project structure into modular React components (`Navbar`, `Hero`, `Features`, etc.).
4. Optimization for responsive layouts across all screen sizes.

**Request**: I would like to raise this as a PR to prepare the project for the upcoming GSoC cycle.
258 changes: 58 additions & 200 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,258 +1,116 @@
# Contributing to TODO: Project Name
# Contributing to OrgExplorer

⭐ First off, thank you for considering contributing to this project! ⭐
⭐ First off, thank you for considering contributing to OrgExplorer! ⭐

We welcome contributions from everyone. By participating in this project, you agree to abide by our Code of Conduct.
OrgExplorer is a high-speed visualization engine for massive GitHub organizations, developed under the **AOSSIE** organization. We are proud to be part of the Open Source community and welcome contributions from GSoC students, students, and developers of all backgrounds.

## � IMPORTANT: Discord Communication is Mandatory
## 📢 IMPORTANT: Discord Communication is Mandatory

**All project communication MUST happen on Discord. We do not pay attention to GitHub notifications.**

- Join our [Discord server](https://discord.gg/hjUhu33uAn) before starting any work
- Post your PR/issue updates in the relevant Discord channel (**MANDATORY**)
- All discussions, questions, and updates should be on Discord
- GitHub is for code only - Discord is for communication
- Join our [Discord server](https://discord.gg/hjUhu33uAn) before starting any work.
- Post your PR/issue updates in the #orgexplorer channel (**MANDATORY**).
- GitHub is for code hosting only—Discord is for community and discussion.

**PRs without Discord updates will not be reviewed or may face delays.**
---

## �📋 Table of Contents
## 📋 Table of Contents

- [How Can I Contribute?](#how-can-i-contribute)
- [Getting Started](#getting-started)
- [Development Workflow](#development-workflow)
- [Pull Request Guidelines](#pull-request-guidelines)
- [Code Style Guidelines](#code-style-guidelines)
- [Community Guidelines](#community-guidelines)
- [GSoC & AOSSIE specifics](#gsoc--aossie-specifics)
Comment on lines +17 to +24
Copy link

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Table of Contents link fragments may not resolve correctly.

The markdownlint tool flags all TOC links as having invalid fragments (MD051). For instance, the heading ## 🤝 How Can I Contribute? generates a slug that includes the emoji, but the anchor #how-can-i-contribute omits it. Verify these links work on GitHub's renderer, or remove the emojis from headings to ensure reliable anchoring.

🧰 Tools
🪛 markdownlint-cli2 (0.20.0)

[warning] 19-19: Link fragments should be valid

(MD051, link-fragments)

[warning] 20-20: Link fragments should be valid

(MD051, link-fragments)

[warning] 21-21: Link fragments should be valid

(MD051, link-fragments)

[warning] 22-22: Link fragments should be valid

(MD051, link-fragments)

[warning] 23-23: Link fragments should be valid

(MD051, link-fragments)

[warning] 24-24: Link fragments should be valid

(MD051, link-fragments)

🤖 Prompt for AI Agents 
In `@CONTRIBUTING.md` around lines 17 - 24, TOC links are flagged because heading
slugs include emojis (e.g., "## 🤝 How Can I Contribute?") but the TOC uses
plain text anchors; fix by either removing emojis from the headings (rename
headings like "## How Can I Contribute?" and "## Getting Started" etc.) so their
slugs match the TOC, or regenerate the TOC anchors to match GitHub's actual slug
generation for the headings with emojis (update the links to the exact slug
strings for headings such as "🤝 How Can I Contribute?", "📋 Table of Contents",
"GSoC & AOSSIE specifics", etc.). Ensure whichever approach you pick, the
heading text symbols (the emoji-bearing headings) and the TOC link fragments are
consistent.


---

## 🤝 How Can I Contribute?

### Reporting Bugs

Before creating bug reports, please check existing issues to avoid duplicates. When creating a bug report, include:

- Clear and descriptive title
- Steps to reproduce the issue
- Expected behavior vs actual behavior
- Screenshots/Video (if applicable)
- Environment details (OS, browser, versions, etc.)
Before creating bug reports, please check existing issues to avoid duplicates. When creating a report, include steps to reproduce, environment details, and screenshots.

### Suggesting Features
Feature suggestions are highly encouraged! Please describe the utility of the feature and how it fits into the "High-Speed Visualization" goal of OrgExplorer.

Feature suggestions are welcome! Please:

- Check if the feature has already been suggested
- Provide a clear description of the feature
- Explain why this feature would be useful
- Include examples of how it would work
### Contributing Code
1. **Submit an Issue**: Always create an issue first to describe the problem or feature.
2. **Get Assigned**: Wait for an AOSSIE maintainer to assign the issue to you.
3. **Submit Your PR**: Work on your branch and submit the PR once ready.

1. **Submit an Issue First**: For features, bugs, or enhancements, create an issue first
2. **Get Assigned**: Wait to be assigned before starting work(preferable)
3. **Submit Your PR**: Once assigned, create a PR addressing the issue
4. **Unrelated PRs**: Pull requests unrelated to issues may be closed or take longer to review

---

## 🚀 Getting Started

### Prerequisites
- **Node.js**: v22.x or later (LTS recommended)
- **npm**: v10.x or later
- **Git**

TODO: List prerequisites specific to your project

### Setup

1. **Fork the Repository**
```bash
# Click the 'Fork' button at the top right of this page
```

2. **Clone Your Fork**
### local Setup
Copy link

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Capitalize "local" → "Local" in the heading.

-### local Setup
+### Local Setup
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
### local Setup
### Local Setup
🤖 Prompt for AI Agents 
In `@CONTRIBUTING.md` at line 50, Update the heading text "local Setup" to "Local
Setup" in CONTRIBUTING.md by capitalizing the first letter of the word "local"
so the section heading reads "Local Setup".

1. **Fork the Repository** on GitHub.
2. **Clone Your Fork**:
```bash
git clone https://github.com/YOUR_USERNAME/TODO.git
cd TODO
git clone https://github.com/YOUR_USERNAME/OrgExplorer.git
cd OrgExplorer
```

3. **Add Upstream Remote**
3. **Add Upstream Remote**:
```bash
git remote add upstream https://github.com/AOSSIE-Org/TODO.git
git remote add upstream https://github.com/AOSSIE-Org/OrgExplorer.git
```

4. **Install Dependencies**
4. **Install Dependencies**:
```bash
npm install
# or yarn install
# or pnpm install
```

5. **Run the Project**
5. **Run the Project**:
```bash
npm run dev
```

## 🔄 Development Workflow

### 1. Create a Feature Branch
---

Always work on a new branch, never on `main` or `dev`:
## 🔄 Development Workflow

### 1. Create a Branch
```bash
git checkout -b feature/your-feature-name
git checkout -b feat/your-feature-name
# or
git checkout -b fix/your-bug-fix
```

### 2. Make Your Changes
### 2. Tech Stack
OrgExplorer uses a modern, high-performance stack:
- **React 19**: Frontend framework.
- **TypeScript**: For type-safe development.
- **Tailwind CSS v4**: CSS-first styling engine.
- **Vite**: Build tool for fast HMR.

- Write clean, readable code
- Follow the project's code style
- Add comments where necessary
- Update documentation if needed

### 3. Test Your Changes

TODO: Add project-specific testing instructions

```bash
npm test
# or
npm run lint
```

### 4. Commit Your Changes

Write clear, concise commit messages:

```bash
git add .
git commit -m "feat: add user authentication"
# or
git commit -m "fix: resolve navigation bug"
```

**Commit Message Format:**
### 3. Commit Format
We follow conventional commits:
- `feat:` for new features
- `fix:` for bug fixes
- `docs:` for documentation changes
- `style:` for formatting changes
- `refactor:` for code refactoring
- `test:` for adding tests
- `chore:` for maintenance tasks
- `docs:` for documentation
- `refactor:` for code restructuring (like the recent component migration)

### 5. Keep Your Branch Updated

```bash
git fetch upstream
git rebase upstream/main
# or upstream/dev depending on the project
```

### 6. Push Your Changes

```bash
git push origin feature/your-feature-name
```
---

## 📤 Pull Request Guidelines

### Before Submitting

- [ ] Your code follows the project's style guidelines
- [ ] You've tested your changes thoroughly
- [ ] You've updated relevant documentation
- [ ] Your commits are clean and well-organized
- [ ] You've rebased with the latest upstream changes

### Submitting a Pull Request

1. Go to the original repository on GitHub
2. Click "New Pull Request"
3. Select your fork and branch
4. Fill out the PR template with:
- Clear description of changes
- Link to related issue(s)
- Screenshots (if UI changes)
- Testing steps

### PR Description Template

```markdown
## Description
Brief description of what this PR does

## Related Issue
Closes #issue_number


## Screenshots/Video (if applicable)
Add screenshots here

## Testing(if applicable)
Steps to test the changes

## Checklist
- [ ] Code follows style guidelines
- [ ] Self-review completed
- [ ] Documentation updated
- [ ] Tests added/updated
```

### After Submission

- Post your PR in the project's Discord channel for visibility(**IMPORTANT**)
- Respond to review comments promptly
- Make requested changes in new commits
- Be patient - maintainers will review when available

## 📝 Code Style Guidelines

TODO: Add project-specific code style guidelines

### General Guidelines

- Use meaningful variable and function names
- Keep functions small and focused
- Add comments for complex logic
- Remove console.logs before committing
- Avoid code duplication

### JavaScript/TypeScript
- Use ES6+ syntax
- Prefer `const` over `let`, avoid `var`
- Use arrow functions where appropriate
- Follow ESLint rules

### Python
- Follow PEP 8 style guide
- Use type hints where applicable
- Write docstrings for functions/classes

## 🌟 Community Guidelines

### Communication

- Be respectful and inclusive
- Provide constructive feedback
- Help others when you can
- Ask questions - no question is too small!

### Progress Updates

- If your work is taking longer than expected, comment on the discord with updates
- Issues should be completed within 5-30 days depending on complexity
- If you can no longer work on an issue, let maintainers know on discord

### Getting Help
### Submitting a PR
- Ensure your code is linted (`npm run lint`).
- Update relevant documentation.
- Link the PR to the issue (`Closes #issue_number`).
- **Post the PR link on Discord immediately after submission.**

- Check existing documentation first
- Search closed issues for similar problems
- Ask in Discord
- Tag maintainers if your PR is unattended for 1-2 weeks on discord
---

## 🎯 Issue Assignment
## 🌟 GSoC & AOSSIE Specifics

- One contributor per issue (unless specified otherwise)
- Wait for assignment before starting work
- Issues will be reassigned if inactive for extended periods
- Check for existing PRs before starting to avoid duplication
As an AOSSIE project, we maintain a high standard for GSoC contributions:
- **Quality**: Code must be clean, modular, and well-documented.
- **Engagement**: Active participation in Discord discussions is key.
- **Timeline**: Pull requests should ideally be completed within 14 days of assignment.

---

Thank you for contributing to TODO! Your efforts help make this project better for everyone. 🚀
Thank you for helping make OrgExplorer the best tool for visualizing the open-source world! 🚀
7 changes: 6 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OrgExplorer</title>
<title>OrgExplorer | Extreme Visualization</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body>
<div id="root"></div>
Expand Down
Loading