React Animated Ranking Table from API data — Realtime Crypto Changes with FramerMotion & TailwindCSS
Hello Everyone! My name is Andrew Fung, in this video, I will be showing you how to create the take-over animation in React Tables using Framer Motion and TailwindCSS. To showcase the project, I picked the theme of cryptocurrency price changes as the changing factor and fetch data from the CoinGecko API which doesn’t require an API key. Hope you enjoy this tutorial!
#react #reactanimation #framermotion #webdevelopment #tailwindcss
Installation and Setup!
Project Source code:
https://github.com/Andrew-FungKinHo/Y...
Sample Table with TailwindCSS in CodePen:
https://codepen.io/superfly/pen/wvvPLZB
CoinGecko API endpoint:
https://api.coingecko.com/api/v3/coin...
Reorder function in Framer motion:
https://www.framer.com/docs/reorder/
TailwindCSS installation in react:
https://tailwindcss.com/docs/guides/c...
YouTube Source code:
https://github.com/Andrew-FungKinHo/Y...
Check out my Github!
https://github.com/Andrew-FungKinHo
How I make my YouTube videos:
⌨️ Keyboard - Nuphy Air75 Mechanical Keyboard - https://amzn.to/3Xu4PD3
🎙 Microphone - MAONO A04 Professional Podcaster USB Microphone - https://amzn.to/3k8ocD5
🖱 Mouse - Microsoft Bluetooth Ergonomic Mouse - https://amzn.to/3CHhdHJ
🔌 Accessories - Laptop Docking Station for MacBook Pro - https://amzn.to/3CHi5Mv
Timestamps
-------------------------------
0:00 | Intro
2:32 | Generate React App & TailwindCSS Setup
5:26 | Create Tailwind Table
11:33 | Fetch Crypto Data from Coingecko API
18:30 | Map CryptoData to Table
21:50 | Sort Table by 24h Price Change
23:27 | Refresh Data every 5 second
26:43 | Animation with Framer Motion
32:10 | Out tro
-------------------------------
Feel free to drop a like and comment if you enjoy and video and let me know if you want me to do other types of programming videos ;) !!!