Migrate Project to Next.js and Tailwind CSS v4

[OmkarTipugade]

Addressed Issues:

Fixes #3

Screenshots/Recordings:

Additional Notes:

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• New Features

  • Introduced OrgExplorer home page with centered layout
  • Implemented global theme system with CSS variables supporting light and dark modes

• Refactor

  • Updated application build and development toolchain
  • Reorganized project configuration and styling architecture
  • Updated linting setup

[coderabbitai]

📝 Walkthrough

Walkthrough

The project is transitioning from a Vite + React development setup to a Next.js application architecture. This includes removing all Vite-specific configuration and client-side entry points, replacing them with Next.js app structure (layout and page components), updating build tools to Next.js equivalents, and realigning dependencies and configuration files accordingly.

Changes

Cohort / File(s)	Summary
Vite & Legacy Setup Removal vite.config.ts, index.html, src/App.tsx, src/App.css, src/main.tsx, src/index.css	Removed Vite-based build configuration, HTML entry point, and legacy React component files that are no longer needed in a Next.js setup.
Legacy TypeScript Configuration tsconfig.app.json, tsconfig.node.json	Deleted application and node-specific TypeScript configs, consolidated into Next.js-focused tsconfig.json.
ESLint Configuration Migration eslint.config.js, eslint.config.mjs	Replaced old ESLint config with new Next.js-compatible configuration using ESLint v9 flat config format and eslint-config-next presets.
Next.js App Structure app/layout.tsx, app/page.tsx, app/globals.css	Introduced Next.js App Router structure with RootLayout (containing metadata, fonts, global styles) and initial Home page component styled with Tailwind CSS variables.
Next.js Configuration & Types next.config.ts, next-env.d.ts	Added typed Next.js configuration file and TypeScript declaration file for Next.js environment types.
Build & Styling Toolchain postcss.config.mjs, tsconfig.json	Introduced PostCSS configuration for Tailwind CSS processing; updated main TypeScript config with Next.js compiler options, path aliases, and plugin settings.
Package Management & Build Scripts package.json	Migrated from Vite-based scripts and dependencies to Next.js stack; updated dependencies to include next, tailwindcss, postcss; replaced build commands (dev/build/start/lint).
Project Maintenance .gitignore	Added trailing newline for formatting consistency.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Set up initial project structure with Vite, React, and TypeScript; ad… #2: This PR directly replaces the Vite+React structure that was introduced, removing and restructuring the same core files (package.json, TypeScript configs, src/ directory).

Suggested labels

javascript, configuration, frontend, dependencies, size/XL

Suggested reviewers

• Zahnentferner

Poem

🐰 Vite's gone, Next.js is here,
From React roots to app-based cheer,
Config files dance in new array,
Tailwind paints a fresher way,
The rabbit hops—migration's done! 🚀

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly and accurately describes the main changeset: migrating from Vite/React to Next.js with Tailwind CSS v4 integration.
Linked Issues check	✅ Passed	All coding requirements from issue #3 are met: Next.js with TypeScript setup [#3], Tailwind CSS v4 configured [#3], ESLint configured [#3], basic app folder structure created [#3], and project builds successfully [#3].
Out of Scope Changes check	✅ Passed	All changes are within scope of the Next.js migration. File deletions (Vite configs, src/ structure) and additions (Next.js configs, app/ structure) directly support the migration objective with no unrelated changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/globals.css (1)

22-26: Body font-family doesn't reference the Geist theme font.

The @theme block maps --font-sans to var(--font-geist-sans) (Geist font), but the body hardcodes Arial, Helvetica, sans-serif. If you intend to use the Geist font family loaded by the layout, consider updating line 25:

♻️ Suggested fix

 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans, Arial, Helvetica, sans-serif);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/globals.css` around lines 22 - 26, The body selector currently hardcodes
font-family to "Arial, Helvetica, sans-serif"—replace that value with the theme
variable so the Geist font is used: change the body rule's font-family to use
the CSS custom property (e.g., var(--font-sans) which is mapped to
--font-geist-sans) to align with the `@theme` mapping and loaded Geist font in the
layout.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/globals.css`:
- Around line 22-26: The body selector currently hardcodes font-family to
"Arial, Helvetica, sans-serif"—replace that value with the theme variable so the
Geist font is used: change the body rule's font-family to use the CSS custom
property (e.g., var(--font-sans) which is mapped to --font-geist-sans) to align
with the `@theme` mapping and loaded Geist font in the layout.

[OmkarTipugade]

@Zahnentferner Please review and merge this PR.