codepanion
codepanion
  • 22
  • 86 821
Flutter Tutorial - Learn by making a real mobile app
In this Flutter tutorial you will learn how to use flutter and dart for making cross platform apps. In this course we will cover:
- how to use StatefulWidget and StatelessWidget,
- how to use http package and make API calls with flutter,
- how to create widgets and different screens,
- how to use navigation,
- how to make simple app state management with provider package,
- how to preserve data in the app's file system
Project code:
github.com/codepanion/flutter-beers-app
Timestamps:
0:00 - Project Demo
0:49 - Init boilerplate project
3:38 - Home Screen (Scaffold, AppBar and BottomNavigationBar)
11:10 - Beers List (http package & api call, json)
26:00 - GridView with Cards
37:35 - SearchInput (TextField with InputDecoration)
41:10 - SizedBox
43:50 - BoxDecoration for TextField
45:36 - styling with Flutter
49:30 - Data Storage (ChangeNotifier & Consumer)
1:01:00 - controlled TextField
1:03:40 - Details Screen
1:04:59 - GestureDetector
1:08:11 - Fetch and display beer details
1:17:30 - CustomScrollView (SliverAppBar, SliverList)
1:31:50 - Use file system to store data
1:51:00 - List of Favorites
2:06:03 - Outro
มุมมอง: 577

วีดีโอ

Vue.js | TypeScript - Tutorial - Build a simple todo app
มุมมอง 5K2 ปีที่แล้ว
In this video you are going to learn: - how to use Vue.js and typeScript, - how to use Vue composition api by creating composable functions, - how to use ref & reactive variables, - how to use css in Vue.js (flexbox), - how to use vue.draggable (for draggable components). github repo: github.com/codepanion/vue-todo-app Timestamps: 0:00 - App that we are going to build 0:40 - Vue project preset ...
React Lazy Loading & Suspense - code splitting for better performance
มุมมอง 4102 ปีที่แล้ว
In this simple video example I will show you how to use react lazy loading and suspense in order to split code into multiple chunks and reduce the bundle size and improve performance of the web application.
Typescript | Type Casting & Type Guards
มุมมอง 1.4K2 ปีที่แล้ว
In this short tutorial about typescript we will cover why you should avoid type casting and how to use type guards instead.
Redux Toolkit - Tutorial
มุมมอง 2942 ปีที่แล้ว
In this tutorial, we are going to build a simple todo app by using redux toolkit and typescript. You will learn basics of the state management with redux, how to configure redux store, how create reducers, how to create actions, how to dispatch actions, how to create selectors. github.com/codepanion/react-redux-toolkit-tutorial Timestamps: 0:00 - Intro 0:59 - Redux Toolkit quick start, configur...
Mock Service Worker & React Testing Library
มุมมอง 4.8K2 ปีที่แล้ว
Learn how to use Mock Service Worker in order to test network requests more accurate. In this example I will show you how to use it together with React Testing Library and how you can setup a server to return a proper handler for each endpoint. git repo: github.com/codepanion/msw-testing-library If you want to learn more about jest and testing library, you can watch this tutorial: th-cam.com/vi...
useTransition hook - concurrent rendering in React
มุมมอง 2622 ปีที่แล้ว
In this tutorial, you will learn how to use useTransition and startTransition in order to mark specific updates of the states as a lower priority which might help you optimizing heavy rendering tasks in your React app. git repo: github.com/codepanion/react-use-transition-practice Timestamps: 0:00 - Intro 0:21 - Mouse position state 3:54 - Creating a mouse preview (mirror) 6:54 - Render a large ...
React Hook Form - Tutorial
มุมมอง 3.8K2 ปีที่แล้ว
In this short tutorial you will learn how to use useForm hook and how to manage forms in you React web apps. We will also cover FormProvider and useFormContext in order to achieve nested structure of your components. git repo: github.com/codepanion/react-hook-form-tutorial
React Query - Can we use it as a state management library?
มุมมอง 8K2 ปีที่แล้ว
In this tutorial I will go through some of react-query features and explain you how you can share query data across different components. I will show you how how to use useQuery and useMutation hooks. You can also check how to handle global state with zustand in this video: th-cam.com/video/gz4NgSWjHoY/w-d-xo.html git repo: github.com/codepanion/react-query-state-management-tutorial Timestamps:...
Zustand - React State Management - Simple redux alternative
มุมมอง 5K2 ปีที่แล้ว
In this tutorial we are going to cover how you can use zustand, a simple yet powerful library to manage state in your react app. I will show you examples of how you can create slices for the global store and combine different entities in there. At the end of the video I will show you how can you have a reactive state which is going to be updated when other states are changed. Git repo: github.c...
Puppeteer & Express - Build a website crawler
มุมมอง 4.8K2 ปีที่แล้ว
In this video I will show you how you can use Puppeteer to build a website crawler that will scrape data from website pages and serve it in the json format. Web crawler will collect all textual content on each webpage and store it in the registry that will be served later as a server response. You will have the complete registry of pages visited by the crawler. For running the server we will us...
Learn React Context API - build a todo app tutorial
มุมมอง 5K3 ปีที่แล้ว
In this short tutorial, I will show you how you can use React context and provider in order to store some common data and functionalities that will be shared among components. We will create a custom hook from "useContext" hook that will provide the context value to children components.
Electron Tutorial - Build a custom text editor app
มุมมอง 16K3 ปีที่แล้ว
In this video we are going to build a desktop application with Electron. My focus was creating the app for macOS, but with few adjustments it can be easily adapted for windows or linux. Git repo: github.com/codepanion/simple-text-editor-electron You are going to learn: - how to create a custom title bar, - how to make a communication between renderer and main process with ipcRenderer and ipcMai...
React | Typescript | Emotion | Chart.js - Web app that shows number of new COVID-19 cases
มุมมอง 12K3 ปีที่แล้ว
In this video I will show you how to build a web app by using React, Typescript, Emotion (CSS-in-JS library) for writing styles, and Chart.js for displaying relevant COVID-19 data. I'm using create-react-app with typescript template. I will also use flexbox styles, so if you want to learn more about flexbox you can check my video: th-cam.com/video/cKJYaB7QPB0/w-d-xo.html If you want to learn ho...
Learn React memo and useMemo - optimize components
มุมมอง 7233 ปีที่แล้ว
In this short tutorial I will show you few practical examples on how you can optimize performance of React components by using useMemo hook and memo higher order component.
Vue State Management with Composition API - No need for vuex & vuex-persist?
มุมมอง 10K3 ปีที่แล้ว
Vue State Management with Composition API - No need for vuex & vuex-persist?
Javascript DOM Event listeners - bubbling & capturing propagation, event delegation
มุมมอง 1273 ปีที่แล้ว
Javascript DOM Event listeners - bubbling & capturing propagation, event delegation
Build a Responsive CSS Layout with Flexbox
มุมมอง 1.7K3 ปีที่แล้ว
Build a Responsive CSS Layout with Flexbox
Test React components with React Testing library & Jest
มุมมอง 4.9K3 ปีที่แล้ว
Test React components with React Testing library & Jest
HTML Tutorial - Beginner to Advanced Crash Course
มุมมอง 1493 ปีที่แล้ว
HTML Tutorial - Beginner to Advanced Crash Course
How to use Ajax with Vuejs & Vuex - [Part 2]
มุมมอง 2044 ปีที่แล้ว
How to use Ajax with Vuejs & Vuex - [Part 2]
How to use Ajax with Vue.js & Vuex - [Part 1]
มุมมอง 1.3K4 ปีที่แล้ว
How to use Ajax with Vue.js & Vuex - [Part 1]

ความคิดเห็น

  • @communistka
    @communistka 29 วันที่ผ่านมา

    Amazing video, thank you a lot for your job!💞 Please continue teaching us programming and Vue.js🙏

  • @xarzu
    @xarzu 3 หลายเดือนก่อน

    Great video. Does the github differ from the video description?

  • @vinayak_hegde
    @vinayak_hegde 6 หลายเดือนก่อน

    i am getting ReferenceError: TextEncoder is not defined and docs suggests to create jest.polyfills.js file next to your jest.config.js. But i don't have jest.config.js. and i have used create-react-app to create my app and i only have setupTests.js. I created jest.polyfills.js at the same level of setupTests.js, But still i get the same error. How can i resolve it and set it up

  • @welearnarabic
    @welearnarabic 8 หลายเดือนก่อน

    thanks for this video,it is really helpful you respond to many question in my mind about react-query and state management

  • @kashmirtechtv2948
    @kashmirtechtv2948 9 หลายเดือนก่อน

    great brother

  • @aouadicharaf1038
    @aouadicharaf1038 ปีที่แล้ว

    After learning flutter basics i'm coming back to this ❤❤❤

  • @htmlfivedev
    @htmlfivedev ปีที่แล้ว

    Amazing work! This is the best one on youtube on the topic ... I was looking for something like this for a while ... thanx a bunch ... wish the fonts were larger though ... thanx anyway!!

  • @spreadjoys1709
    @spreadjoys1709 ปีที่แล้ว

    Your video is so helpful. Thank u!

  • @MisterX-hu3pt
    @MisterX-hu3pt ปีที่แล้ว

    👍

  • @tonightisgoodnight-js3rm
    @tonightisgoodnight-js3rm ปีที่แล้ว

    i hite typescript

  • @viqtorione
    @viqtorione ปีที่แล้ว

    A crystal clear explanation. Thank you.

  • @babutechmbr4860
    @babutechmbr4860 ปีที่แล้ว

    my work is done thanks

  • @elmarguluzade
    @elmarguluzade ปีที่แล้ว

    terse thank you 👍

  • @juhandvan
    @juhandvan ปีที่แล้ว

    thanks a lot

  • @snake1625b
    @snake1625b ปีที่แล้ว

    Great video! Never knew about the is word until now

  • @TITAN-sv5eg
    @TITAN-sv5eg ปีที่แล้ว

    you are the best thanx

  • @anazi
    @anazi ปีที่แล้ว

    Best explanation and examples. I was wondering would it make sense to use zustand and react query together to manage the same user ? Or it's a stupid overkill.

  • @TITAN-sv5eg
    @TITAN-sv5eg ปีที่แล้ว

    Thanks so much

  • @DioArsya
    @DioArsya ปีที่แล้ว

    Wow love it!

  • @kinshukroy4843
    @kinshukroy4843 ปีที่แล้ว

    How to submit login form by enter button and using this hook??

  • @danielotienoke
    @danielotienoke ปีที่แล้ว

    Amazing Job! well done

  • @meowmix9135
    @meowmix9135 2 ปีที่แล้ว

    I don't know if it's outdated but I typed the exact code and halfway, when you started the part about opening a file (35:00), I started getting this error that said module not found: path, and referencing renderer.js. So I downloaded your repo, did npm install and etc., and your repo doesn't work either but no errors are console logged.

  • @bassam.2023
    @bassam.2023 2 ปีที่แล้ว

    Thanks for a great tutorial! 😀

  • @bassam.2023
    @bassam.2023 2 ปีที่แล้ว

    Excellent tutorial! Thanks😀

    • @codepanion
      @codepanion 2 ปีที่แล้ว

      Glad it was helpful!

  • @luisalbertogarciaibarra9852
    @luisalbertogarciaibarra9852 2 ปีที่แล้ว

    I passed the setTodoList from useState as a property in the contextValue object, a few tweaks to the code and it also works in case you want to avoid a lot of functions in your context file

  • @szabolcsjobbagy30
    @szabolcsjobbagy30 2 ปีที่แล้ว

    Thanks a lot!! I have watched several videos on creating a Todo List app, and this was the most understandable of them, and I can also see that this useContext method is the easiest way to solve it, passing props method is too complicated as props should be passed to children components, and the useReducer method is too complicated, as I see. Great video!

  • @d4nisback3lbz
    @d4nisback3lbz 2 ปีที่แล้ว

    its kinda funny how you made n Electron Text editor in an Electron IDE

  • @sanjukris1
    @sanjukris1 2 ปีที่แล้ว

    You nailed it. Thanks for the great tutorial. Enjoyed it.

    • @codepanion
      @codepanion 2 ปีที่แล้ว

      Glad you enjoyed it!

  • @shk151987
    @shk151987 2 ปีที่แล้ว

    I don't get any data as it shows <!DOCTYPE ...is not valid JSON. how can i resolve the error

  • @PodDropBits
    @PodDropBits 2 ปีที่แล้ว

    great tutorial I got it to work as you showed- but how do I pick out these two certain elements like AUTHOR ".author" and (ABOUT) "span a" elements only? I cannot figure it out without breaking your code.

  • @ludwigvillalba1886
    @ludwigvillalba1886 2 ปีที่แล้ว

    thanks for sharing!

  • @caloriecoin_ceo7847
    @caloriecoin_ceo7847 2 ปีที่แล้ว

    Beutiful tutorial

  • @ganeshkanade6230
    @ganeshkanade6230 2 ปีที่แล้ว

    Too Good

  • @maxpain3294
    @maxpain3294 2 ปีที่แล้ว

    thanks

  • @Storge06
    @Storge06 2 ปีที่แล้ว

    How do I get my Puppeteer code to run when the client touches a button?

  • @vitaliiverdiiev7272
    @vitaliiverdiiev7272 2 ปีที่แล้ว

    Nice!!! Thank you! ❤

  • @harununal218
    @harununal218 2 ปีที่แล้ว

    hi i've a problem which is i dont want to launch the puppeteer browser everytime just one launch and conitnue the newpages for every new url what can i do for this problem do you have any idea?

  • @mahmudrafid3910
    @mahmudrafid3910 2 ปีที่แล้ว

    Great video.

  • @remongrabu
    @remongrabu 2 ปีที่แล้ว

    Cool trick with the reactor hook!

  • @youneshenni5417
    @youneshenni5417 2 ปีที่แล้ว

    Great video. Subscribed. Hope to see more usage of typescript in the future to match commercial apps.

  • @youneshenni5417
    @youneshenni5417 2 ปีที่แล้ว

    Great video.

  • @dijup
    @dijup 2 ปีที่แล้ว

    I am using react query to fetch data in my reactnative app and I want to combine it will some kind of offline storage. What will be the best way to do it? Should I use asyncstorage or SQLite and how can I combine it for better control on data.

  • @unjinjang2234
    @unjinjang2234 2 ปีที่แล้ว

    Nice video! This video was really helpful from a beginner's point of view 😌 I just have one question, why did you decide to modularize your zustand store? Is it because you wanted to follow the react flux pattern? or is it because of just pure readability?! I've been trying to find a video like this but not many seem to do like the way you did! Hope you have a good day and thanks for this video. I refactored my entire store code haha

  • @nanonkay5669
    @nanonkay5669 2 ปีที่แล้ว

    Awesome video man, you are so good at this, I could watch you all day. If you can, can you also cover RTK Query? That'll be super

  • @alaaal-khater8034
    @alaaal-khater8034 2 ปีที่แล้ว

    React Query will really enhance the user experience

  • @maximus4510
    @maximus4510 2 ปีที่แล้ว

    I LIKE how neat it is! Keep it comiing 🔥🔥

  • @enriquearias3423
    @enriquearias3423 2 ปีที่แล้ว

    Excelent! My only problem was the version of react charjs, but I learnt a lot! Thanks!

  • @funcomedy2
    @funcomedy2 2 ปีที่แล้ว

    🧑‍💻 👍🏻 👍🏻 👍🏻 👍🏻

  • @mf2810
    @mf2810 2 ปีที่แล้ว

    Great video - really useful - thank you

  • @fal8202
    @fal8202 2 ปีที่แล้ว

    Nice work Codepanion, loved your presentation; a proper tempo and a decent amount of explanations but more description of your steps would improve your tutorials - for me at least.