์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์.
Frontend Tribe
2024. 9. 14.
๐จ๐จ Download Your FREE Video Resources Here: ๐ https://lp.frontendtribe.com/dark-saas-blockchain-site-resource-bundle ๐ฅ Whatโs Inside the Resource Bundle?: - ๐จ Complete Responsive Designs - ๐ Starter Template Files - ๐ท All Images and Icons - ๐ฏ 100% FREE! โถ๏ธ If you missed parts 1 or 2 of this video series, you can watch it here: โถ๏ธ Part 1: https://youtu.be/8PeEKbqE3E0 Part 2: https://youtu.be/bQpMSpV0fks ๐ Get a FREE 14-day trial of Polypane, the browser used in this video: ๐ https://polypane.app/?ref=frontendtribe Welcome to Part 3 of our deep dive into building a fully animated dark-mode SaaS website with a blockchain theme! Weโre picking up right where we left off, using Astro.js, TailwindCSS, and Framer Motion to guide you through the second part of this stunning build. Whether you watched Part 1 or are jumping straight into the action, this tutorial will help you elevate your front-end skills and complete your professional-grade, dark-themed site. ๐โจ Who is this tutorial for? - Frontend developers eager to learn about Astro.js, TailwindCSS, and Framer Motion. - Anyone interested in creating a complete build of a dark-themed, responsive site from scratch. ๐ค Hereโs What Youโll Learn: - Astro.js Techniques: Learn how to leverage Astroโs modern framework for lightning-fast sites and simplified development workflows. - TailwindCSS Styling: Use Tailwindโs utility-first approach to style a professional, dark-mode site with ease and consistency. - Framer Motion Animations: Create eye-catching animations and micro-interactions that elevate your siteโs user experience. - Complete Build and Deployment: Follow along as we develop the homepage, blog, articles, careers page, contact page, and fully functional forms โ all deployed and ready to go. ๐ Timestamps: 00:00 - Quick Recap & Intro 05:31 - Site Navigation 27:42 - Blog Index Page 1:05:47 - Blog Article Page 1:29:42 - Careers Page 1:50:19 - Contact Page 2:16:33 - Build and Deployment ๐ Subscribe for More Amazing Frontend Tutorials: https://www.youtube.com/@frontend-tribe?sub_confirmation=1 ๐ Visit Our Website: https://frontendtribe.com #blockchain #astrojs #tailwindcss #framermotion #webdevelopment #codingtutorial #darkmode ๐ ๏ธ My Setup: IDE: Cursor IDE - https://www.cursor.com/ Browser: Polypane - https://polypane.app/?ref=frontendtribe ๐ฃ Frontend Tribe is on a mission to transform 10,000 lives through front-end development mastery! ๐ฃ Credits: - This site design was heavily inspired by the brilliant Onix design located here: https://ui8.net/ui8/products/onix-blockchain-landing-page-ui-design-kit - 3D shapes were pulled from the amazing Clavius Abstract Shapes Figma design: https://www.figma.com/community/file/1306680408918952423/clavius-design-system-abstract-3d-shapes - Social media icons by Font Awesome: https://fontawesome.com/ - Other icons provided by Heroicons: https://heroicons.com/ - "Link Below" stock video by Vecteezy: https://www.vecteezy.com/free-videos/link-below Affiliate links disclaimer: This description contains affiliate links. If you click on a link and make a purchase, I may receive a commission. I only recommend products I genuinely use and believe will help you build better projects. Your support helps keep this channel running, so thank you!
Learn why I think lookup objects are better conditionals when you are evaluating a simple value. ๐ Support me on Patreon โ https://patreon.com/davegray ๐ป Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap ๐ Discord โ https://discord.gg/neKghyefqh ๐ Follow Me On Social Media: GitHub: https://github.com/gitdagray X: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://www.davegray.codes/ #javascript #lookup #objects
2024. 9. 17.
I was fired everywhere so I built 24 startups. I work solo and document the entrepreneurial journey in (hopefully?) not-boring videos. ๐ All my startups โ https://www.marclou.com โก๏ธ Ship your startup in days, not weeks โ https://shipfa.st/ ๐ก Everything I know as a solo entrepreneur โ https://marclou.beehiiv.com/ ๐ธ Instagram โ https://www.instagram.com/marclouvion/ ๐ผ LinkedIn โ https://www.linkedin.com/in/marclouvion/ ๐ฆ Twitter โ https://twitter.com/marc_louvion Music by @Dyalla My friend Nico makes great YouTube videos (much better than that short clip) check him out @Jeannen
2024. 7. 3.
2024. 10. 4.
GitHub Repo: https://github.com/elliott-chong/learning-journey-yt Welcome to this comprehensive full-stack tutorial where we delve into the latest features of NextJS 13.4. Join me as we build an entire project from the ground up and seamlessly deploy it to Vercel ๐. Throughout this journey, you will gain expertise in the following areas: ๐ Leveraging NextJS 13's cutting-edge App Router. ๐ณ Managing Payments seamlessly through Stripe. ๐จ Harnessing the beauty of Shadcn and the power of Tailwind CSS. ๐ง Unleashing the capabilities of OpenAI's API for Language Model usage. ๐๏ธ Interacting with databases with the efficiency of ORMs. ๐ Self-hosting your NextJS project on DigitalOcean. ๐ Securing your deployment with a custom domain name and SSL certificate. ๐ Implementing a robust CI/CD deployment pipeline with GitHub Actions. ๐ Pastebins for Code Timestamps Timestamp 17:54 prisma db.ts file https://pastebin.com/hYYzuFY9 Timestamp 20:00 schema.prisma template code https://pastebin.com/S325fZ4P Timestamp 1:45:00 lib/gpt.ts https://pastebin.com/EiggjLeq Timestamp 1:58:42 lib/unsplash.ts https://pastebin.com/nkykdzdV Timestamp 2:59:51 lib/youtube.ts https://pastebin.com/rqhdDLiU Timestamp 5:48:47 .github/deploys.deploy.yml https://pastebin.com/7XPPNecM ๐ Credits & Inspirations - A heartfelt thank you to my friends for their unwavering support throughout this project. - Special thanks to Mo for sparking the idea for this project. - Inspiration drawn from https://www.youtube.com/@joshtriedcoding for coding videos. - Thumbnail inspiration credit: https://www.youtube.com/ @codewithantonio ๐ Referenced Resources Shadcn best practices form: https://youtu.be/26bSDD9IEG4 Strict JSON GPT repo: https://github.com/tanchongmin/strictjson/tree/main Connect With Me ๐ฅ๐ : GitHub: https://github.com/elliott-chong Instagram: https://instagram.com/elliottchong_ Website: https://elliottchong.tech ๐ Chapters Overview 0:00 Intro & Demo 8:02 Set Up NextJS 10:58 Set Up Shadcn 14:18 Set Up PlanetScale & Prisma 19:15 Set Up NextAuth 35:49 Navbar 58:09 Theme Toggle 1:02:53 Create Course Form 1:31:00 Creating the Chapters Endpoint 1:44:00 Strict GPT JSON 2:08:00 Confirming Chapters 2:09:00 Exploring React Query 2:20:51 Gathering Chapters Information 2:27:08 Continuing Chapter Confirmation 2:45:08 Forwarding Refs to Chapter Cards 2:53:55 Retrieving Chapter Information 2:57:31 Utilizing the YouTube API 3:08:02 Generating Questions 3:34:58 Crafting the Course Page 3:47:26 Summarizing the Main Video 3:53:55 Designing Quiz Cards 4:07:11 Navigating Next & Previous Chapters 4:12:03 Building the Gallery Page 4:21:06 Seamless Stripe Integration 4:59:33 Integrating Credits 5:02:45 Loading Pages 5:06:14 Deployment Strategies 5:07:55 Self-hosting on DigitalOcean 5:11:12 Implementing Docker 5:47:07 Embracing GitHub Actions for CI/CD 5:57:00 Outro Join me on this exciting journey to master NextJS 13.4 and unlock the potential of full-stack development. Let's code and create something amazing together! ๐๐จโ๐ป #NextJS #FullStackDevelopment #WebDevelopment #StripePayments #ReactQuery #React #TailwindCSS #OpenAI #DatabaseORM #DigitalOceanHosting #GitHubActions #CI/CDPipeline #CodingTutorial #Programming #VercelDeployment #Docker #GitHubRepo #WebDevelopmentTutorial #FrontendDevelopment #BackendDevelopment #CustomDomain #SSL #YouTubeAPI #Prisma #CreditIntegration #GalleryPage #QuizCards #PaymentIntegration #StrictJSONGPT #CodingInspirations #GitHub #Instagram #Website
2023. 8. 20.
Code: https://github.com/burakorkmez/python-chat (Stars appreciated๐) Diagrams: https://www.eraser.io (Sponsored) Discord for questions: https://discord.gg/yEyKQWYugG Timestamps: 00:00 Demo App 00:47 Backend 23:49 Frontend 46:00 Deployment and bye... Subscribe to support this work tytyty Keywords: Python, Python for Beginners, Python projects for resume, Python Chat app, How to build a chat app with python, Python tutorial
2024. 9. 15.
ํ๊ฐ ๊ณต์ ์ผ์ ํ์์ ๊ธฐ์๋ณ ๋ญ์ธ์ ์ด๊ธดํ์ ๋์ ์ํ๊ถ
2023. 6. 3.