feat: complete website migration to NextJS16, restructuring with professional dark mode implementation, SEO Improvements, UI Improvement and Atomic Codebase design done. #41

MishraShardendu22 · 2025-10-08T13:50:23Z

Description

Migrated and redesigned the Keploy DevRel Program website to a modern tech stack using Next.js 16, Tailwind CSS, and shadcn/ui, following an atomic design structure.
This upgrade delivers a sleek, scalable 2025-ready UI inspired by [keploy.io](https://keploy.io) while maintaining all core content and SEO functionality.

Fixes / Solved issues:

Fixes [devrel-program] Migrate DevRel website to Next.js + TypeScript keploy#3065 — Migration to Next.js 15
Fixes [devrel-program] SEO, Open Graph, Sitemap, and Performance Optimizations keploy#3080 — Improve SEO for the website
Fixes [devrel-program] Add Dark/Light Mode Support with Toggle (DevRel Website) keploy#3078 — Added light/dark mode
Fixes [devrel-program] Establish best practices: folder structure, code quality, and README update keploy#3068 — File/folder structure updated per Next.js conventions
Fixes [devrel-program] Add Navbar, Footer, and new UI components (Modal, Details) keploy#3067 — Add Navbar, Footer, and new UI components (Modal, Details)
Fixes [devrel-program] Redesign DevRel website with a modern 2025 look (inspired by keploy.io) keploy#3066 — Redesign DevRel website with a modern 2025 look (inspired by keploy.io)

Change Highlights

Upgraded tech stack to Next.js 16 + Tailwind CSS + shadcn/ui.
Adopted atomic design: atoms, molecules, organisms, templates, and pages.
Rebuilt layout and UI components (Navbar, Footer, Modal, Details) for consistent design and accessibility.
Dark/light theme powered by next-themes and shadcn/ui, with persistent theme storage.
Optimized fonts, assets, and metadata for better performance and SEO.
Updated documentation (README.md, STRUCTURE.md, etc.) for modern setup.
Verified production builds and improved workflow scripts.

Type of Change

Bug fix
New feature
Breaking change — full site redesign and migration
Documentation update

How Has This Been Tested?

Verified npm run dev, npm run build, npm run start.
Visual regression tested across all sections (home, join, testimonials, contact).
Confirmed responsiveness and theme toggle behavior.
Validated SEO metadata, sitemap, and manifest generation.

Environment

OS: Linux
Node.js: v20+
Next.js: v16+
Package Manager: npm / pnpm / yarn

Additional Context

Figma: [Keploy DevRel Figma](https://www.figma.com/design/fu5e7iESOM0Oho8E1Dj1X1/Keploy-Figma-Devrel?node-id=0-1&t=YY4f8L9tJlfRW7VI-1)
Live Demos:

Checklist

Code follows project conventions
Self-reviewed and validated changes
Updated documentation and README
No new warnings or errors
All scripts tested (dev, build, start)
Visual and functional parity achieved
Commits signed with --signoff

Acceptance Criteria

Migration to Next.js 16 complete
Redesigned with Tailwind + shadcn/ui
Atomic design structure implemented
Modern UI parity with keploy.io
Fully functional, responsive, and production-ready

github-actions

Thank you and congratulations 🎉 for opening your very first pull request in student-program

MishraShardendu22 · 2025-10-08T13:51:10Z

Here is a sample link of website - https://devrel-program-shardendu-mishra.vercel.app
@amaan-bhati

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

…ons Program Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-09T16:05:29Z

I have read the CLA Document and I hereby sign the CLA.

MishraShardendu22 · 2025-10-09T16:05:48Z

recheck

…ementation 1. Project Restructuring Reorganized folder structure following Next.js conventions Renamed src/Component/ → src/components/ (lowercase) Moved src/css/ → src/styles/ for better organization Created src/lib/ for utilities and constants Updated all import paths across the codebase Added comprehensive project documentation 2. Development Tools & Quality Enhanced ESLint configuration with TypeScript rules Added Prettier for consistent code formatting Introduced .editorconfig for cross-editor consistency Added utility scripts: lint:fix, format, type-check Installed key libraries: clsx, tailwind-merge, class-variance-authority 3. Dark Mode Implementation Integrated next-themes for theme management with system preference detection Implemented toggle switch using shadcn/ui Switch component Moved theme toggle to sidebar menu for cleaner navbar Applied consistent dark mode styling matching Keploy Docs aesthetic Fixed all components (testimonials, footer, join section) for dark mode Ensured WCAG AA contrast compliance Added smooth transitions and hover effects 4. UI/UX Enhancements Refined footer with better responsive design Improved testimonial cards for dark mode support Added rounded corners and professional styling to service sections Fixed layout consistency between light and dark modes Retained original 3-column layout in “Why Us” section Applied professional dark palette (#0a0a0a backgrounds) 5. Font System Upgrade Migrated from local fonts to Google Fonts (Lora, Montserrat) Fixed font loading and build errors Optimized font rendering with swap strategy 6. Documentation Overhaul Rewrote README.md with detailed setup instructions Enhanced CONTRIBUTING.md to include dev workflow Added structured docs: STRUCTURE.md, DARK_MODE.md Created quick reference guides for contributors Documented architectural decisions and best practices 7. Build & Performance Fixed all build errors and ESLint warnings Removed unused dependencies and files Optimized imports for smaller bundle size Ensured full TypeScript type safety Added SEO metadata and structured data 8. Acceptance Criteria Modern Next.js folder structure ESLint + Prettier fully configured Professional dark/light mode with theme persistence <10-minute contributor onboarding via README Successful build with zero errors UI consistent with Keploy design standards Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-09T22:26:41Z

Dev-Rel-revamped_Dark-Light-Mode.mp4

amaan-bhati

Hey @MishraShardendu22 Thanks for raising this pr, love your enthusiasm solving multiple issues in the same pr. Before i do the final review on my local, can you please take care of the following changes in the UI:

the description needs to be after the heading, not before the heading in the hero section, here's how it is supposed to be:

the positioning of the scroll button is not according to what is currently present in the website, can be made better
headings should be a little more according to the current website, i have attached an example from the current website

expected:

yours:

the join slack section breaks on dark mode

MishraShardendu22 · 2025-10-10T08:03:03Z

Ill fix the issues mentioned, thank for the review.

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-10T10:02:51Z

@amaan-bhati
I have made the necessary changes as asked I am attaching images and Live website below.
Live at - https://devrel-program-shardendu-mishra.vercel.app/

Top section

Join Section

Heading fix

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-14T01:48:47Z

@amaan-bhati please review the pr once bhaiya

amaan-bhati

Hey @MishraShardendu22 I checked out the preview that you shared everything looks good to me, just one change, the slack button has an incorrect url, can you please update with the correct one?
Also the hero section heading looks a little odd on mobile screen devices, mayb e you can try reducing the size of the heading or giving it a fixed width so that the last letter doesnt get to the next line or smth.

MishraShardendu22 · 2025-10-23T11:00:52Z

Hey @MishraShardendu22 I checked out the preview that you shared everything looks good to me, just one change, the slack button has an incorrect url, can you please update with the correct one? Also the hero section heading looks a little odd on mobile screen devices, mayb e you can try reducing the size of the heading or giving it a fixed width so that the last letter doesnt get to the next line or smth.

Sure bhaiya making the changes !!

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-23T12:01:26Z

@amaan-bhati I have made the changes bhaiya please check

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-10-24T10:18:20Z

@amaan-bhati I have fixed the URLS as well please check.

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 · 2025-11-05T00:03:52Z

Here is the update for the secondary website's video -

Desktop

Updated-UI.mp4

Mobile

mobile.mp4

MishraShardendu22 · 2025-11-05T11:46:34Z

Here are the necessary links -

• Live site: https://devrel-program-shardendu-mishra-dcw.vercel.app/

• Design in Figma: https://www.figma.com/design/fu5e7iESOM0Oho8E1Dj1X1/Keploy-Figma-DevRel?node-id=0-1&t=YY4f8L9tJlfRW7VI-1

• Source code (UI improvements branch): https://github.com/MishraShardendu22/devrel-program-Shardendu-Mishra/tree/ui-improvement

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

github-actions bot reviewed Oct 8, 2025

View reviewed changes

MishraShardendu22 mentioned this pull request Oct 8, 2025

[devrel-program] Migrate DevRel website to Next.js + TypeScript keploy/keploy#3065

Open

MishraShardendu22 added 4 commits October 8, 2025 19:41

feat: migrated the codebase to Nextjs15

3f9ac4e

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: improve UI a little

44b6005

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: fixed logo size

3c9b1c3

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: enhance SEO and structured data for the Keploy Developer Relati…

59c4e97

…ons Program Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 force-pushed the main branch from cadef02 to 59c4e97 Compare October 8, 2025 14:11

amaan-bhati added the good first issue Good for newcomers label Oct 8, 2025

This was referenced Oct 9, 2025

[devrel-program] SEO, Open Graph, Sitemap, and Performance Optimizations keploy/keploy#3080

Open

[devrel-program] Establish best practices: folder structure, code quality, and README update keploy/keploy#3068

Open

MishraShardendu22 force-pushed the main branch from 9ea4660 to 5308d64 Compare October 9, 2025 22:06

MishraShardendu22 force-pushed the main branch from 5308d64 to 70d5409 Compare October 9, 2025 22:10

MishraShardendu22 changed the title ~~Migrated to NextJS 15~~ feat: complete website migration to NextJS15, restructuring with professional dark mode implementation and SEO Improvements Oct 9, 2025

MishraShardendu22 mentioned this pull request Oct 9, 2025

[devrel-program] Add Dark/Light Mode Support with Toggle (DevRel Website) keploy/keploy#3078

Open

amaan-bhati self-requested a review October 10, 2025 07:54

amaan-bhati reviewed Oct 10, 2025

View reviewed changes

MishraShardendu22 added 4 commits October 10, 2025 14:20

fix: header ection fixed

05ec7c0

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

fix: font styles fixed

710417d

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: UI and font styling fixed

c80a9fc

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

fix: minor UI fixes made

0988d0c

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 added 3 commits October 10, 2025 15:37

fix: menu button fixed

7da0d6c

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

fix: UI of testimonials fixed

cdd5db3

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: necessary animations added

9add534

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 requested a review from amaan-bhati October 16, 2025 16:26

amaan-bhati requested changes Oct 23, 2025

View reviewed changes

amaan-bhati added hacktoberfest-accepted hacktoberfest labels Oct 23, 2025

chore: fix responsiveness of the website

ac34c6b

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: fix responsiveness of the website

5932e4c

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 requested a review from amaan-bhati October 23, 2025 12:18

MishraShardendu22 added 2 commits October 24, 2025 15:43

fix: url fixed

4234e47

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

fix: url fixed

528a534

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 added 7 commits November 4, 2025 22:04

feat: UI improved

0a9c833

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: improve UI completed the website

3292595

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: UI improvements made

5e076f1

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: cleann up codebase and Improved UI

a7033c1

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: formatted

0e133f8

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: migrated ot atomic design

c2fa7bf

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

chore: png and jpg to webp converted

8665a6f

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 added 2 commits November 5, 2025 17:31

feat: icons color fixed

e03f795

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: lucide icons added

00323b0

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 force-pushed the main branch from e90e000 to 8e47f3b Compare November 10, 2025 06:35

MishraShardendu22 added 3 commits November 11, 2025 17:16

add: added husky to this

f082148

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

add: added husky to this

9b45725

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

feat: updated dependencies

5e474b4

Signed-off-by: MishraShardendu22 <shardendumishrabrave@gmail.com>

MishraShardendu22 force-pushed the main branch from 5f221bf to 5e474b4 Compare November 11, 2025 11:51

Uh oh!

feat: complete website migration to NextJS16, restructuring with professional dark mode implementation, SEO Improvements, UI Improvement and Atomic Codebase design done. #41

Are you sure you want to change the base?

feat: complete website migration to NextJS16, restructuring with professional dark mode implementation, SEO Improvements, UI Improvement and Atomic Codebase design done. #41

Uh oh!

Conversation

MishraShardendu22 commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Change Highlights

Type of Change

How Has This Been Tested?

Additional Context

Checklist

Acceptance Criteria

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

MishraShardendu22 commented Oct 8, 2025

Uh oh!

MishraShardendu22 commented Oct 9, 2025

Uh oh!

MishraShardendu22 commented Oct 9, 2025

Uh oh!

MishraShardendu22 commented Oct 9, 2025

Uh oh!

amaan-bhati left a comment

Choose a reason for hiding this comment

Uh oh!

MishraShardendu22 commented Oct 10, 2025

Uh oh!

MishraShardendu22 commented Oct 10, 2025

Uh oh!

MishraShardendu22 commented Oct 14, 2025

Uh oh!

amaan-bhati left a comment

Choose a reason for hiding this comment

Uh oh!

MishraShardendu22 commented Oct 23, 2025

Uh oh!

MishraShardendu22 commented Oct 23, 2025

Uh oh!

MishraShardendu22 commented Oct 24, 2025

Uh oh!

MishraShardendu22 commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MishraShardendu22 commented Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MishraShardendu22 commented Oct 8, 2025 •

edited

Loading

MishraShardendu22 commented Nov 5, 2025 •

edited

Loading