← Back to Projects
NFT Marketplace
Frontend Developer (Internship)
Tech: React, JavaScript, CSS. Internship capstone focused on grid performance, pagination, and wallet-like interactions. I virtualized long lists and split code by route to keep the app responsive. Result: 60fps scroll on commodity laptops and Lighthouse scores in the 90s for performance/accessibility.
Key Highlights
- Independently completed virtual internship capstone project
- Implemented list virtualization for performance optimization
- Built responsive grid layouts with CSS Grid and Flexbox
- Created wallet-like interactions and user flows
- Achieved Lighthouse scores in the 90s for performance
Problem
NFT marketplaces often suffer from poor performance when displaying large collections, leading to janky scrolling and slow interactions. Users expect smooth, app-like experiences even when browsing thousands of digital assets.
Solution
Rebuilt a complete NFT marketplace from scratch as a single-page application with focus on performance optimization. Implemented virtualization for large lists, code-splitting for faster initial loads, and optimized rendering for smooth 60fps scrolling.
Technical Challenge
Rendering thousands of NFT cards caused severe performance degradation. React's reconciliation algorithm struggled with frequent updates. Image loading created jarring layout shifts and memory bloat.
Technical Solution
Implemented react-window for virtualized list rendering, only mounting visible items plus buffer. Used React.memo and useMemo strategically to prevent unnecessary re-renders. Built a custom image loader with placeholder dimensions, lazy loading, and automatic WebP conversion for 40% smaller file sizes.
Results
- Maintained 60fps scrolling on standard hardware
- Lighthouse performance score above 90
- Lighthouse accessibility score above 90
- Reduced initial bundle size through code-splitting
- Successfully deployed responsive SPA handling large datasets