Update MERN UI & Web3 Integration

I already have a fully-functioning event-management web app built on the MERN stack. Now I want its React front end to look exactly like our new Figma mock-ups and, once that polish is in place, I need smart-contract power added for handling in-app transactions.

First, the job is all about bringing every visible UI component—navigation, cards, dialogs, forms, buttons—into pixel-perfect alignment with the design file. You’ll work inside the existing codebase, refactoring or rebuilding components without breaking current Node/Express or Mongo functionality. The app must remain responsive and accessible across modern browsers.

When the look and feel match Figma, we’ll move on to Web3. I have a Solidity contract drafted for ticket purchases and other event transactions; your task is to complete, test, and plug it into the app. Using ethers.js (or web3.js if you prefer), the front end should call the contract, listen for events, and surface clear transaction states to the user. Everything must run on a testnet first; once verified, we’ll migrate to mainnet.

Deliverables
• Updated React codebase reflecting every Figma component and style
• Audited, unit-tested Solidity contract with deployment scripts (Hardhat/Truffle)
• Integrated Web3 service layer in the MERN app, fully wired to the contract
• README covering setup, environment variables, build commands, and deployment steps

Acceptance criteria
• UI passes a side-by-side design review at 100% zoom
• All existing features remain functional after the refactor
• Contract functions execute end-to-end with real testnet transactions and emit expected events
• No critical console errors or linter warnings

If you’re comfortable juggling React component refactors and Solidity integrations in one codebase, let’s talk timelines and milestones.