Skip to content

chore: upgrade to Vite, React 19, MUI v5, and React Router v6 (standardize on npm)#154

Open
Tijo-11 wants to merge 1 commit intohhhrrrttt222111:masterfrom
Tijo-11:vite-react19-upgrade
Open

chore: upgrade to Vite, React 19, MUI v5, and React Router v6 (standardize on npm)#154
Tijo-11 wants to merge 1 commit intohhhrrrttt222111:masterfrom
Tijo-11:vite-react19-upgrade

Conversation

@Tijo-11
Copy link
Copy Markdown

@Tijo-11 Tijo-11 commented Sep 22, 2025

📌 Pull Request Description

Summary of Changes

This PR modernizes the portfolio project to be fully compatible with React 19 and Vite while also standardizing the package manager to npm.


⚡️ Build Tool & Setup

  • Migrated from CRA/Webpack to Vite for faster builds and dev server.
  • Fixed stricter import resolution issues under Vite.

🎨 UI Library Updates

  • Material-UI v4 → MUI v5

    • Replaced @material-ui/core & @material-ui/icons with @mui/material and @mui/icons-material.
    • Migrated from makeStyles (deprecated) to styled from @mui/material/styles or the sx prop.

🎬 Animation & Effects

  • Replaced react-reveal (not React 18/19 safe) with framer-motion (<Fade><motion.div>).
  • Replaced react-fast-marquee with a custom framer-motion marquee for smoother animations.

🧭 Routing

  • Upgraded to react-router-dom v6.
  • Replaced NavHashLink with react-router-hash-link (v2, v6 compatible).
  • Updated Route/Switch logic for v6 APIs.

🧠 Context & State

  • Modernized ThemeContext:

    • Removed outdated setHandleDrawer.
    • Added toggleDrawer with useCallback.
    • Used useMemo for context values.
    • Defined default context shape to avoid undefined values.

📦 Dependencies

  • Replaced outdated libraries:

    • react-helmetreact-helmet-async.
    • @material-ui/core/Drawer@mui/material/Drawer.
  • Considered alternatives for react-slick (e.g., Swiper.js).


📝 Components Updated

  • Updated key components (Navbar, Projects, SingleProject, Blog, EducationCard, AchievementCard, etc.) to:

    • Remove makeStyles usage.
    • Replace Fade with framer-motion.
    • Fix broken imports from old packages.
    • Ensure consistent use of theme from ThemeContext.

📌 Package Manager

  • Standardized on npm:

    • Updated and committed package-lock.json.

Result:
The project is now React 19 + Vite compatible, using MUI v5 + framer-motion for modern UI/animations, with a simplified dependency tree and standardized package management via npm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant