How to Save React State to Local Storage (with Context API)
Nikita Dev
2023. 1. 18.
In this video you'll learn how to save your react app state to local storage so that relevant data will be persisted. Codesandbox: https://codesandbox.io/p/sandbox/react-context-with-local-storage-oonpvx?file=%2Fsrc%2FApp.jsx Context API Explanation: https://www.youtube.com/watch?v=bJMwH1FWSmU Github: https://github.com/nikitapryymak Support Me: https://www.buymeacoffee.com/nikitadev Contact Me: nikitadev292@gmail.com
Recommanded Videos
IT 회사 대표가 개발자 뽑는 기준 (대표 개인 취향 입니다.)
개발자 상담은 매주 토요일 10시에 진행됩니다. 리눅스 커널 강의 인프런 오픈 ▷ https://inf.run/n47Uy OJ TUBE에서 진행된 강의들 ▷ 임베디드 유료 강의 (맛보기) https://www.youtube.com/watch?v=8JebKNKx6G4&list=PLz--ENLG_8TMQ1HKzZKiRkaeL4jeSYVsx ▷ 임베디드 인프런 강의 링크 : https://inf.run/WAbM 15만원 할인 쿠폰 : 17442-182d7818702b (쿠폰은 항상 최신 영상을 참조해주세요. 바뀔 수 있습니다.) ▷ C언어 강의 (완료) https://youtube.com/playlist?list=PLz--ENLG_8TMdMJIwyqDIpcEOysvNoonf
2024. 10. 21.
Ditto : This CODING Agent can Generate Applications with Flask in Seconds! (w/ Ollama Support)
Join this channel to get access to perks: https://www.youtube.com/@aicodeking/join In this video, I'll be talking about Ditto. Ditto is an AI Coding Agent or Text To Application tool that allows you to General Applications with Flask in seconds. It can generate code with Ollama, OpenAI, Claude-3.5-Sonnet and generate whole applications within seconds. It's very similar to Aider & ClaudeDev. I'll be generating some simple applications but you can also use it to generate Games, Applications, Web Applications, Websites, Frontend, Backend and multiple other things. You can also do Text-To-Frontend, Text-To-Application, Text-To-Game and other things with this. This Agent can also be used with any opensource LLM, OpenAI models or the other Claude models such as GPT-4O, Claude-3, CodeQwen, Mixtral 8x22b, Mixtral 8x7b, GPT-4, Grok-1.5 & Gemini ----- Key Takeaways: 🎯 Discover Ditto: Learn how Ditto, a self-building coding agent created by the developer of BabyAGI, helps you generate Flask apps from natural language using a no-code interface. 🛠️ Automated Code Generation: See how Ditto simplifies development with automated code generation, turning simple instructions into functional web applications without needing any coding experience. 💡 Modular Structure for Easy Customization: Dive into Ditto's clean, modular structure that organizes code into separate directories, making it easy to customize your Flask projects. ⚡ Single Python File Simplicity: With just one Python file and 461 lines of code, Ditto is perfect for building AI coding agents tailored to your specific needs—no complex setup required. 🔗 Integrate with LiteLLM: Use Ditto with various AI models like GPT-4, Claude, or Ollama through LiteLLM, and connect seamlessly with providers like OpenAI or Anthropic. 🎮 Generate Apps Like Minesweeper: Watch Ditto in action as it creates everything from simple to-do apps to fun games like Minesweeper—showcasing its versatility and ease of use. 🚀 Super Portable & Lightweight: Perfect for developers, Ditto is portable, lightweight, and easy to configure, making it a must-have tool for AI development and web app creation. ------ Timestamps: 00:00 - Introduction 00:47 - About Ditto AI Coding Agent 02:45 - Setup & Usage 08:01 - Ending
2024. 10. 18.
🚀 Full-Stack AI Trip Planner: React, Gemini AI, Firebase & TailwindCSS
🚀 Full-Stack AI Trip Planner: React, Gemini AI, Firebase & TailwindCSS Explore the world of AI with this full-stack trip planner app! 🌐 In this tutorial, you'll learn to combine the power of React, Gemini AI, Firebase, and TailwindCSS to create a smart and stylish trip planning application. Perfect for developers looking to enhance their skills! 💻✨ ⭐ TubeGuruji : https://tubeguruji.com 🌟 App Demo : https://aitrip.tubeguruji.com ⭐ Support me on : https://www.buymeacoffee.com/tubegurujiw 🌟 React Native AI Trip Planner (Androud-Ios) : https://youtu.be/ZcZu1NYx-WE 📚 Materials/References: GitHub Repository For Application (give it a star ⭐): https://dcmk.short.gy/source-code-ai-travel-web Free Members Access : https://www.tubeguruji.com/course-preview/full-stack-ai-travel-planner-react-app 🌟 Free Source Code for Members: https://www.tubeguruji.com Join this channel to get access to perks: https://www.youtube.com/channel/UC33Tc4FCgd_to314_b2hNTg/join 00:00:00 Introduction 00:05:16 Project Setup 00:18:41 React Routing 00:24:22 Landing Page 00:31:57 Trip Basic Info Form 01:03:27 Generate Trip From AI 01:20:35 Google Authentication 01:38:05 Save Trip in DB 01:55:57 View Trip Details 02:43:01 Display Place Photo using Google Photo API 03:02:51 Header Update 03:17:22 Users Trip History 03:36:35 Deploy App
2024. 7. 15.
Why eventual consistency is important to learn
Become a YT Members to get extra perks! https://www.youtube.com/@webdevcody/join My Products 🎥 Video Crafter: https://thevideocrafter.com/?utm=wdc 💀 Scary Story Generator: https://scarystorygenerator.com/?utm=wdc 🏗️ WDC StarterKit: https://wdcstarterkit.com 📖 ProjectPlannerAI: https://projectplannerai.com 🤖 IconGeneratorAI: https://icongeneratorai.com Useful Links 💬 Discord: https://discord.gg/4kGbBaa 🔔 Newsletter: https://newsletter.webdevcody.com/ 📁 GitHub: https://github.com/webdevcody 📺 Twitch: https://www.twitch.tv/webdevcody 🤖 Website: https://webdevcody.com 🐦 Twitter: https://twitter.com/webdevcody
2024. 10. 6.
이상형과 연락하는데 약속이 안 잡혀요.
------------------------------------------- [OJ TUBE 정보] ▷ 인프런 강의 링크 : https://inf.run/WAbM 15만원 할인 쿠폰 : 15043-fa6e9a370f96 (쿠폰는 바뀔수 있으니 최신 영상을 참조 해주세요.) ▷ 은근한 개발자 티셔츠 출시! https://flatcode.shop ▷ 임베디드 강의 (맛보기) https://www.youtube.com/watch?v=8JebKNKx6G4&list=PLz--ENLG_8TMQ1HKzZKiRkaeL4jeSYVsx 기존에 서비스하던 클래스유는 3달 수강과, 영구 구매가 가능합니다 ▷ 임베디드 강의 (클래스유 10%할인) https://me2.do/G6iscSrg 1. C언어 강의 (완료) https://youtube.com/playlist?list=PLz--ENLG_8TMdMJIwyqDIpcEOysvNoonf 2. 매주 토요일 오후 9시 상담 방송 진행 - 종료 시간에 매주 책 추첨 및 무료배송. (풀영상 다시보기) https://youtube.com/playlist?list=PLz--ENLG_8TMJgICZ4qSMGZmhpQcmzHT3 3. 매주 화, 금 오후 8시 영상 업로드 4. 오제이 스토어 (임베디드 교육 물품, 자율 강의료, 자율 후원, 면접 피드백 서비스) https://smartstore.naver.com/oj-store -------------------------------------------
2024. 7. 17.
Build Full Stack Social Media App in React Native #8 - Post Details
Hello everyone 👋, In this video you will learn how to fetch post details from Supabase and show in our app, we will learn about reading, creating and deleting comments in the post details screen. Visit the live website for more cool projects: https://codewithnomi.com Source Code: https://codewithnomi.com/projects/social-media-app 🏞️ Assets: https://drive.google.com/uc?export=download&id=1gfAgQEF38zKe91fvkGm0hTHWA0oSx6QR Supabase User Management (function and trigger): https://supabase.com/docs/guides/auth/managing-user-data Supabase React Native Auth: https://supabase.com/docs/guides/auth/quickstarts/react-native Learn Expo Router: https://youtu.be/jJl-DZ3d8k8 If you appreciate my work and you would like to support my channel: https://www.buymeacoffee.com/codewithnomi 🚨 more videos on react native: Wallpaper App: https://youtu.be/Feqq9e04svw Firebase Auth & Chat: https://youtu.be/wncM96HYcxw Fitness App: https://youtu.be/asMSo4DLq6s Food Recipe App : https://youtu.be/cdnneQjsoT0 Movie App : https://youtu.be/Q1xQuCpYIFE Onboarding UI with Lottie Animations: https://youtu.be/4-GKgqIUBNo AI Voice Assistant with ChatGPT & DALL-E : https://youtu.be/nf3t5p2a5Dg Travel App UI : https://youtu.be/vV9zIDgT4Ik Weather App : https://youtu.be/953vyZMO4cM Coffee App UI : https://youtu.be/mhyuMy4aI-M Food Delivery App : https://youtu.be/v-zxqkz1T8E Youtube Clone App: https://youtu.be/AVovt3gFmsg Login | SignUp UI : https://youtu.be/RhF4iUCiwSs Fast Food App : https://youtu.be/x5hX06YdRvI App Store UI : https://youtu.be/Wp6JtHj4lyM Fruit Shop UI : https://youtu.be/UwW__s37agw Firebase Authentication React Native: https://youtu.be/idPGWpVLHP0 Food Delivery App : https://www.youtube.com/playlist?list=PLKWMD009Q4qReQz5FOcvBik9WBJanJVZd Learn React Native: https://www.youtube.com/playlist?list=PLKWMD009Q4qTGuqXxRq51f8OoDaIoJ1yo #Hashtags #expo #reactnative #javascript #tailwindcss #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
2024. 8. 20.