์ ์๋ง ๊ธฐ๋ค๋ ค ์ฃผ์ธ์.
freeCodeCamp.org
2024. 10. 14.
Learn to build a comprehensive fullstack MERN stack bookstore website from @mdalmamunit427. This project will cover both frontend and backend development from the ground up. As a MERN stack project, we'll be using React for the frontend, Node.js and Express.js for the backend, and MongoDB as our database. We'll also leverage technologies like Tailwind CSS, Redux, RTK Query Toolkit, Mongoose, and JWT (JSON Web Tokens) to enhance our project. Our bookstore will feature an admin dashboard for managing books, a cash-on-delivery system, and a robust inventory management system. Users can easily add or remove products from their carts, proceed to checkout, and place orders. For admins, we'll create a secure admin dashboard accessible with a username and password. Admins will have the power to upload new books, manage and update existing book information, and delete books as needed. ๐ป Starter Files: https://github.com/mdalmamunit427/book-store-app-ui-assets.git ๐ป Full Source code: https://github.com/mdalmamunit427/build-full-stack-book-store-mern-app.git โญ๏ธ Chapters โญ๏ธ 0:00:00 Introduction 0:01:39 Project Overview 0:12:41 Setup Project 0:22:04 Install Tailwind CSS 0:28:46 Setup React Router DOM 0:43:36 Customize Your Project 0:54:57 Create a Responsive Navbar 1:30:35 Banner Section 1:39:33 Top Sellers Section 2:11:55 Recommend Books 2:15:15 News Section 2:29:01 Footer Section 2:35:21 Login and Register Page 3:03:42 Install Redux Toolkit & Add to Cart 3:31:41 Cart Page, Remove from Cart, Clear Cart 3:43:57 Create Checkout Page 3:54:45 Server Setup, Mongoose & MongoDB 4:19:22 Create Blog Schema & Model 4:24:09 Book Routes & Controllers 5:07:53 Create bookApi using RTK Query & Display Books 5:36:56 Firebase Setup, Implement Login & Register 6:26:39 Private Routes 6:33:13 Create Order Endpoint & Place Order 7:16:58 Create Admin & Verify Token 7:45:30 Admin Router & Dashboard Login 8:07:20 Admin Dashboard: Add, Edit & Delete Books 8:55:58 How to Deploy Your MERN Project ๐ Thanks to our Champion and Sponsor supporters: ๐พ Drake Milly ๐พ Ulises Moralez ๐พ Goddard Tan ๐พ David MG ๐พ Matthew Springman ๐พ Claudio ๐พ Oscar R. ๐พ jedi-or-sith ๐พ Nattira Maneerat ๐พ Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
2024. 8. 21.
23๊ฐ - ๋ง๋ฌด๋ฆฌ
2024. 9. 23.
๐จ Check out Wix Headless today! ๐ https://www.wix.com/developers/headless/?utm_c=jes Dive into the world of headless CMS with our comprehensive guide on Wix Headless! Discover how you can leverage the powerful combination of Wix Headless and Next.js to elevate your web development projects. This video is your ultimate "how-to" guide, equipped with everything you need to start using Wix Headless and its JavaScript SDK. ๐ Useful Links: โ Wix Headless: https://www.wix.com/developers/headless/?utm_c=jes โ Wix Headless Templates: https://www.wix.com/developers/headless/templates?utm_c=jes โ Next.js demo repo: https://github.com/wix/wix-appointments-subscriptions-nextjs-template โ๏ธ What We Cover: 1๏ธโฃ Introduction to Wix Headless: Learn about the new era of Wix beyond its website templates and GUI builders. Discover how it's revolutionizing the developer experience. 2๏ธโฃ Understanding Headless CMS: Get a clear explanation of what a headless CMS is and how it differs from traditional CMSs. 3๏ธโฃ How Wix Headless Works: An in-depth look at Wix Headless' server-side APIs, JavaScript SDK, REST API, and unique features like Bookings, Events, eCommerce, and Pricing plans APIs. 4๏ธโฃ Practical Demo: Watch a real-time demonstration as we install and explore a Next.js template from Wix, showcasing the integration and capabilities of Wix Headless. ๐ Why Wix Headless? โจ Flexibility: Use any tech stack, craft unique digital experiences, and deliver content across various platforms. โจ Seamless Integration: Perfect harmony with modern frameworks like Next.js. โจ Powerful Backend: Robust server-side capabilities for a full-scale development experience. ๐ Whether you're a seasoned developer or just starting, Wix Headless offers an innovative solution to build modern web apps with ease and flexibility. โค๏ธ Sponsored by Wix: This video is sponsored by Wix, but the insights and opinions are based on my genuine belief in the potential and functionality of Wix Headless. _____________________________________ ๐ฆธ Become A VS Code SuperHero Today: https://vsCodeHero.com ๐ง๐พโ๐คโ๐ง๐ฝ Join my Discord developer community: https://discord.gg/A9CnsVzzkZ ๐ ๏ธ Tools I use: ๐ codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme ๐ STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com) ๐ SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions _____________________________________ ๐ Show support! PayPal: https://paypal.me/codeSTACKr _____________________________________ ๐ Watch Next: Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt _____________________________________ ๐ Connect With Me: Website: https://www.codestackr.com Twitter: https://twitter.com/codeSTACKr Instagram: https://instagram.com/codeSTACKr Facebook: https://facebook.com/codeSTACKr _____________________________________ ** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you. #cms #headless #wix
2024. 1. 4.
Download the code: https://mailchi.mp/dometrain/3xoxzephdta Check out my courses: https://dometrain.com Subscribe to my weekly newsletter: https://nickchapsas.com Become a Patreon and get special perks: https://www.patreon.com/nickchapsas Hello, everybody. I'm Nick, and in this video, I will show you how you can add production-ready authentication and authorization in .NET and ASP.NET Core with JWT tokens using a real identity service. This video is sponsored by AWS. To get $50 free AWS credit, check out this link: https://aws.amazon.com/developer/language/net/getting-started Workshops: https://bit.ly/nickworkshops Don't forget to comment, like and subscribe :) Social Media: Follow me on GitHub: https://github.com/Elfocrash Follow me on Twitter: https://twitter.com/nickchapsas Connect on LinkedIn: https://www.linkedin.com/in/nick-chapsas Keep coding merch: https://keepcoding.shop #csharp #dotnet
2024. 10. 22.
#shorts
2024. 7. 12.
Join this channel to get access to perks: https://www.youtube.com/@aicodeking/join In this video, I'll be telling you about the new upgrades to the best Opensource Coding Agent ClaudeDev. ClaudeDev now has OpenAI's new O1 Model support along with Gemini Free Models support and much more new features such as OpenRouter Caching and more. Today, I'll be checking all those features out and I'll also test ClaudeDev with OpenAI's new O1 model to see if it really performs better than Claude 3.5 Sonnet, Llama-3.1, GPT-4O, Qwen & Others. ClaudeDev is the best AI Coding Agent that can plug right inside your VS Code and allow you to code with AI. It can generate Full-stack Applications, Games etc. in Just One Prompt. It works will all kinds of Programming languages which is also cool. I'll be creating a Full-Stack Application in this video with ClaudeDev and OpenAI's new o1 Model. ---- Key Takeaways: โจ OpenAI's New O1 Model Explained โ Discover how the O1 model's cutting-edge features integrate with ClaudeDev, making your coding smoother and faster. ๐ ClaudeDev's Latest Upgrades โ Learn about the newest upgrades like prompt caching via OpenRouter, Gemini support, and Azure OpenAI, making it easier to boost your productivity. ๐ Run Terminal Commands Directly in VSCode โ See how ClaudeDev lets you execute and fix terminal commands seamlessly with real-time error corrections, thanks to VSCode's latest integration. ๐ก Gemini Models for Free? Yes, Please! โ Get the inside scoop on using Geminiโs free-tier Flash model for fast and free AI projects with 15 requests per minute. ๐ฎ Try Out O1 with ClaudeDev โ Watch as we test the O1 model live with a space shooter game creation using HTML, CSS, and JS, pushing the limits of AI-assisted development. ๐ Files Timeline and Task History Updates โ Find out how ClaudeDevโs timeline and history features make reverting edits and tracking task progress easier, without needing Git! ๐ป The Future of AI Development with ClaudeDev โ Get ahead in AI development with ClaudeDevโs growing support for advanced models, including Gemini, Sonnet, and OpenAIโs O1. Perfect for developers looking to stay ahead! ----- Timestamps: 00:00 - Introduction 00:08 - About OpenAI new o1 & o1 Mini Model 00:22 - ClaudeDev Upgrades with OpenAI's new o1 Models Support & Gemini Support etc. 03:35 - Testing out New ClaudeDev Upgrades along with Gemini 07:52 - Testing ClaudeDev with OpenAI's new O1 & O1 Mini 12:20 - Ending
2024. 9. 15.