Mastering JavaScript Development: Building a Stock Media Platform in 7-Hour Coding Marathon
Join me on a 7-hour coding marathon as we master JavaScript development and build a cutting-edge Stock Media Platform from scratch. In this immersive journey, we'll implement essential features such as light and dark mode, sleek Material 3 UI design, advanced filtering options, robust search functionality, and even the ability for users to favorite their preferred photos and videos. Get ready to witness the power of JavaScript as we create a dynamic and user-friendly web app that revolutionizes the way we access and explore stock media.
🔗 Essential links
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Pexels API: https://www.pexels.com/api/
Starter file: https://drive.google.com/file/d/13xrd...
Source code link 1: https://www.patreon.com/posts/pixstoc...
Source code link 2: https://www.buymeacoffee.com/codewith...
Figma UI: https://www.patreon.com/posts/pixstoc...
Join our Discord community: / discord
Host your website with upto 75% off 👇
🌟 Hostinger: https://www.hostg.xyz/SHCGm
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
13:53 - File structure
14:57 - Init project
31:49 - Header structure & style
1:02:50 - Light & dark mode
1:07:30 - Header scroll state
1:09:24 - Ripple effect
1:18:39 - Search & search history functionality
1:53:49 - Navigation drawer structure & style
2:08:27 - Banner section structure and style
2:32:46 - Featured photo section structure & style
2:46:28 - API Configuration
3:00:35 - Fetch and render featured photos
3:16:23 - Implement Add to favorite
3:25:57 - Implement masonry grid
3:34:09 - Popular video section structure & style
3:40:00 - Fetch and render popular videos
3:49:51 - Implement video Hover-on-play
3:55:52 - Featured collection structure & style
4:01:48 - Fetch and render featured collections
4:07:58 - Footer structure & style
4:13:45 - Photo page structure & style
4:40:47 - Render photos in photo page
4:56:46 - Implement filter & dropdown menu functionality
5:19:57 - Photo detail page structure & style
5:32:20 - Fetch and render photo detail
5:52:03 - Video page structure & style
5:53:49 - Render videos in video page
5:58:42 - Video detail page structure, style & render video detail
6:06:58 - Collection page structure & style
6:08:50 - Redner collections in collection page
6:15:12 - Collection detail page structure, style & render collection medias
6:25:51 - Favorite page structure & style
6:27:51 - Render favorite items
6:36:40 - Media queries
👍 Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: / codewithsadee
Github: https://github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#stockphotoapp
#stockphoto
Смотрите видео Mastering JavaScript Development: Building a Stock Media Platform in 7-Hour Coding Marathon онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь codewithsadee 02 Июль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 21,150 раз и оно понравилось 746 людям.