React Animated Ranking Table from API data — Realtime Crypto Changes with FramerMotion & TailwindCS
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/YouTube/tree/main/React%20Animated%20Ranking/react-animated-ranking-table
Sample Table with TailwindCSS in CodePen:
https://codepen.io/superfly/pen/wvvPLZB
CoinGecko API endpoint:
https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd
Reorder function in Framer motion:
https://www.framer.com/docs/reorder/
TailwindCSS installation in react:
https://tailwindcss.com/docs/guides/create-react-app
YouTube Source code:
https://github.com/Andrew-FungKinHo/YouTube
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 ;) !!!
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «React Animated Ranking Table from API data — Realtime Crypto Changes with FramerMotion & TailwindCS», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.