'eventsbook' is a full stack app - this repository contains its frontend source code while the backend source code is stored in another GitHub repository here »

View the deployed app »

Table of Contents

1. About The Project
2. Built With
3. Migration from React 18 to React 19, including React DOM
4. Migration from React Router v5 to v6
5. Migration from React Router v6 to v7
6. Acknowledgments

About The Project

1. This app is a social media platform where users can:

• log in/create an account,
• upload photos/create posts (about upcoming social events),
• add likes,
• add comments,
• tag their event's location on the Google map ,
• change their passwords.

2. There are currently a few dummy users accounts created and all of them users have already posted some events as seen below:

3. Below we have an example of an event created by User1

• titled 'Lorem Ipsum'
• with the date and time of the creation
• it received 3 likes by Guest, User1 and User3
• by using the three buttons the event can be seen on Google Maps, Updated or Deleted
• there were two comments made by Guest and User3

(back to top)

Built With

• HTML, CSS,
• ,
• Node.js, Express.js, Mongoose,
• MongoBD for a database,
• Firebase for deploying the frontend,
• Render.com for deploying the backend,
• Cloudinary API for storing photos,
• Google Maps Platform API for events locations (due to having to use laser card on Google Maps this feature is temporarly on hold),
• SendGrid API for password change,
• Multer middleware library for uploading photos,
• bcrypt library for hashing passwords,
• jsonwebtoken for creating login token,
• Chrome Developer Tools for testing screen sizes and using Lighthouse,
• Chrome, Firefox, Edge and Opera for browser testing the responsiveness,
• https://ui.dev/amiresponsive for testing and to make responsive image,
• https://favicon.io/favicon-generator/ to create a favicon,
• https://fontawesome.com/ for icons,
• https://tinypng.com/ to optimize images,
• https://www.remove.bg/ for removing images backgrounds,
• https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi during development,
• https://wave.webaim.org/ to check web accessibility,
• https://balsamiq.com/ for wireframing.

Heavy usage of React Hooks like useReducer for managing complex state and useContext (as a part of the Context API that is being used for a "global" state managment) also useEffect, useRef, useCallback and useState. There are also custom hooks built and that is form-hook.js for managing form data, http-hook.js for all fetching requests and auth-hook.js for managing back end login token through the rerender cycles. All sorts of errors that are being handled on the backend  (like an incorrect password) are sent to the frontend and are displayed in a modal window on UI for better UX. As for the CSS styling, Block/Element/Modifier convention is being followed.

(back to top)

Migration from React 18 to React 19

Successfully upgraded from React 18.3.1 to React 19.0.0, including React DOM.

Steps Completed:

1. Created backup before migration

   copy package.json package.json.backup-$(Get-Date -Format "yyyyMMdd-HHmmss")
   

2. Updated React and React DOM packages npm install --save-exact [email protected] [email protected] npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

3. Ran official React 19 migration codemod npx codemod@latest react/19/migration-recipe

4. Fixed React Transition Group compatibility issues

Added nodeRef pattern to all CSSTransition components Updated components to use useRef for proper DOM node handling: // Before (React 18) <CSSTransition in={props.show} timeout={200} classNames="modal"

<ModalOverlay {...props} />

// After (React 19) const nodeRef = useRef(null); <CSSTransition nodeRef={nodeRef} in={props.show} timeout={200} classNames="modal"

Key Changes: ✅ Updated entry point to use createRoot instead of render ✅ Fixed compatibility with react-transition-group using refs ✅ Removed usage of deprecated APIs like findDOMNode ✅ Maintained component functionality while improving performance

Migration from React Router v5 to v6

Correctly implemented:

The new route structure with and components Using the element prop instead of children components

• Replacing Redirect with Navigate
• Replacing Switch with Routes Using the catch-all route with path="" for fallback navigation Key Improvements in Your Updated Code ✅ Proper imports: import { Routes, Route, Navigate } from 'react-router-dom' ✅ Route structure: Each route uses element={} pattern insted of
  ✅ Conditional routes: Different routes for authenticated vs non-authenticated users ✅ Fallback handling: Using <Route path="" element={} /> Next Steps Now that your router is working, you might need to update any components that use router-specific hooks:

Replace useHistory() with useNavigate()

Check any components using location or route params:

useParams() still works but might return data differently useLocation() still works similarly useRouteMatch() is replaced with useMatch() If you were using nested routes, the approach is different in v6 with

Migration from React Router v6 to v7

Successfully upgraded from React Router DOM v6 to v7.3.0, with key architectural changes.

Steps Completed:

1. Updated React Router Package

   npm install react-router-dom@latest
   

2. Migrated to Data Router API

Replaced and with createBrowserRouter and RouterProvider Configured routes using JavaScript objects instead of JSX component // Before (React Router v6) <Route path="/allevents" element={} />

// After (React Router v7) const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "allevents", element: } ] } ]);

3. Implemented Layout Pattern with Outlet const Root = () => { return ( <>

   ); };

4. Updated Navigation after Form Submissions

Added explicit navigation with useNavigate() hook after successful operations const navigate = useNavigate();

const placeSubmitHandler = async (event) => { event.preventDefault(); try { await sendRequest(/_ API request details _/); navigate("/"); // Explicit navigation } catch (err) {} }; 5. Configured Conditional Routes Based on Authentication const router = createBrowserRouter([ { path: "/", element: , children: token ? [ // Authenticated routes ] : [ // Non-authenticated routes ] } ]);

Key Benefits: ✅ Improved performance with the data router architecture ✅ Enhanced type safety and better TypeScript support ✅ More explicit navigation control with programmatic redirects ✅ Better code organization with object-based route definitions ✅ Support for future React Router features and patterns

Acknowledgments

• this project was completed at the end of the Udemy course The MERN Guide

• all users' accounts and all events have been created with the usage of free-to-use photos from www.pexels.com

(back to top)