Home
Videos uploaded by user “Andre Madarang”
Tailwind CSS with Vue CLI 3
 
09:05
We take a look at how to use Tailwind CSS with Vue CLI 3. I was confused when it came to configuring PostCSS and whether to use a .postcssrc.js file or to use package.json. I wanted to make a quick video in case anybody else has the same confusion as I did. # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 7347 Andre Madarang
Vue.js Todo App - Laravel Passport  - Part 9
 
27:25
In this video, we begin building the authentication layer for our application. We make use of Laravel Passport for username/email and password authentication. This is a password grant type for auth which is token-based using JWT. We also test out our authentication using the Insomnia Rest client. Insomnia: https://insomnia.rest/ GitHub Repo: https://github.com/drehimself/todo-laravel # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 21809 Andre Madarang
Laravel PDF Export - Useful Laravel Packages
 
09:05
http://usefullaravelpackages.com We take a look at how to export our Laravel views to a PDF using this Laravel dompdf package. We take a look at a practical invoice layout and the limitations of CSS that we are faced with. Laravel PDF Package: https://github.com/barryvdh/laravel-dompdf GitHub Repo: https://github.com/drehimself/ulp-laravel-pdf # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 6728 Andre Madarang
Laravel Socialite - Useful Laravel Packages
 
20:16
http://usefullaravelpackages.com We take a look at Laravel Socialite to add the ability to login to our web application using third-party services like GitHub or Twitter. We start from the auth scaffolding provided by Laravel and make the necessary changes to allow for our users to log in using GitHub. GitHub repo: https://github.com/drehimself/ulp-laravel-socialite # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 5890 Andre Madarang
Laravel Horizon from Scratch
 
24:46
In this video, we take a look at how to install and how to use Laravel Horizon. Taylor Otwell launches Horizon: https://streamacon.com/video/laracon-us-2017/day-1-taylor-otwell # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 15999 Andre Madarang
Google Maps API with Laravel
 
17:08
http://usefullaravelpackages.com We take a look at how to use the Google Maps JavaScript API within Laravel. More importantly, we take a look at how to utilize caching in order to minimize the amount of geocode requests we have to make. Traversy Media Google Maps JavaScript API tutorial: https://www.youtube.com/watch?v=Zxf1mnP5zcw # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 29085 Andre Madarang
Tailwind CSS w/ React (Create React App)
 
05:53
In this quick video, we take a look at how to use Tailwind CSS with a Create React App without the need for ejecting. Article: https://medium.com/@mikeeeeeeey/create-react-app-tailwind-css-feat-postcss-631d9e33ba8c # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 1957 Andre Madarang
NativeScript Vue Basics
 
20:55
In this video, we'll take a look at the basics of using NativeScript Vue to build mobile apps using Vue.js. We'll make use of NativeScript Playground to instantly see our code running on a real mobile device. We'll explore the UI components available to us, and make use of the Vue.js code that we're already familiar with. We'll then make a mini clone of Reddit using its available JSON API. Code: https://play.nativescript.org/?template=play-vue&id=mXVZOy&v=1 Comparison video of React Native, Ionic, and NativeScript: https://www.youtube.com/watch?v=rb8smP_xTTY Another video to get you excited about NativeScript Vue: https://www.youtube.com/watch?v=LDqsuLQqLrQ # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 26369 Andre Madarang
Vue.js Scoped Slots & Renderless Components
 
22:19
As of Vue 2.6 (Feb 2019), Scoped Slots has a slightly different syntax. Check the docs: https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots We take a look at how to make our Vue.js components more flexible and reusable using scoped slots and renderless components. We go through an example of a video game listing component and incrementally make it more reusable along the way. https://github.com/drehimself/vue-scoped-slots-example Check out Adam's video here: https://www.youtube.com/watch?v=GWdOucfAzTo And his course: http://advancedvue.com # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 2749 Andre Madarang
Electron with Vue.js
 
28:48
We take a look at using Electron with Vue.js. We make use of a Vue CLI 3 plugin and re-create the Reddit clone that we built in the previous video. Vue CLI 3 Electron plugin: https://github.com/nklayman/vue-cli-plugin-electron-builder GitHub Repo: https://github.com/drehimself/electron-vue-example Electron Basics: https://www.youtube.com/watch?v=nW4Qe4QBWow # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 25796 Andre Madarang
Ionic 4 + Vue Basics - Reddit Clone
 
19:36
We take a look at using Ionic 4 with Vue.js. We take a look at some of the basic web components available to us and build out a mini Reddit clone in the process. Note that Ionic Vue is still in alpha, so a lot of changes may happen in the near future. GitHub Repo: https://github.com/drehimself/ionic-vue-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 8299 Andre Madarang
Netlify Basics - Build & Deploy modern websites
 
21:25
We take a look at using Netlify to build, deploy and host modern websites. Netlify makes deploying websites a breeze with awesome features like git integration, automatic deployment, builds on the server, easy https, custom domains, contact forms and much more. We deploy four projects; a static site on our local machine, a static site from a GitHub repo, a Vue CLI app, and a React CLI app. # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 8744 Andre Madarang
Vue.js Todo App - Authentication  - Part 10
 
31:05
In this video, we work on all the Authentication parts that need to happen on the front end. We make AJAX requests to our API and retrieve a valid token. We store that token using Local Storage in order to make subsequent requests as a logged in user. We then take a look at navigation guards to prevent users from accessing endpoints that are meant for logged in users. Local Storage vs Cookies ======================= Video: https://www.youtube.com/watch?v=g21uHNIIewM Article: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Article: https://dev.to/rdegges/please-stop-using-local-storage-1i04 GitHub: https://github.com/drehimself/todo-vue/tree/10-vue-auth # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 32413 Andre Madarang
Laravel Excel - Useful Laravel Packages
 
24:44
http://usefullaravelpackages.com We take a look at using the Laravel Excel package which allows you to export your Laravel collections to Excel format. We take a look at some of its export options as well some basic formatting features for the underlying PHP Spreadsheet package. Laravel Excel: https://github.com/maatwebsite/Laravel-Excel GitHub Repo: https://github.com/drehimself/ulp-laravel-excel # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 13347 Andre Madarang
Bootstrap with Vue.js
 
29:58
We take a look at using Bootstrap with Vue.js. Bootstrap is the most popular CSS framework out there but still relies on jQuery to make its interactive components work. The Bootstrap Vue library allows you to use all Bootstrap elements as reusable Vue components. If you're already familiar with using Bootstrap and have the basics of Vue down, you'll feel right at home. GitHub Repo: https://github.com/drehimself/bootstrap-vue-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 33855 Andre Madarang
GraphQL w/ Laravel & Vue - Overview - Part 1
 
37:14
We take a look at using GraphQL with Laravel and Vue.js. In this first part, we take a look at the GitHub API to see some of the problems that GraphQL solves over a traditional REST API. We then take a look at the Lighthouse PHP package to work with GraphQL within Laravel. We take a look at the tutorial app which implements a blog. We get familiar with GraphQL tools like GraphiQL and GraphQL Playground. We then take a look at Vue Apollo for our GraphQL client on the front-end. We take a look at the basics and start communicating with our backend. Lighthouse PHP: https://lighthouse-php.com Vue Apollo: https://github.com/Akryum/vue-apollo Entire Playlist: https://www.youtube.com/playlist?list=PLEhEHUEU3x5qsA5JnRzhgOghrH9Vqz4cg # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 10820 Andre Madarang
Netlify CMS - Content Management System (using Gridsome)
 
20:37
We take a look at Netlify CMS as a content management system. Netlify CMS allows us to take our statically generated site and add CMS functionality. This allows users who do not know how to code and use version control to update a website with a user interface. In this example, we take a static site generated using Gridsome and add Netlify CMS to it. GitHub Repo: https://github.com/drehimself/gridsome-example Netlify CMS: https://www.netlifycms.org CMS vs Static Sites: https://www.youtube.com/watch?v=STpqh2fBtS0 # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3767 Andre Madarang
Laravel Mix Outside Laravel
 
16:03
How to use Laravel Mix Outside of Laravel in your own stand alone projects. Laravel Mix is a great wrapper around webpack for basic tasks like compiling sass, concatenating files and using VueJS. Laravel Mix Documentation: https://laravel.com/docs/mix # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3175 Andre Madarang
Vue Native Basics
 
31:23
We take a look at the basics of creating mobile apps with Vue Native. Vue Native is a wrapper around React Native and gets compiled down to React Native code. We take a look at the components available to us, the basics of styling and build out a mini clone of Reddit that pulls from the Reddit API. This project is a great option if you prefer to use Vue.js instead of React Native. Vue Native: https://vue-native.io GitHub Repo: https://github.com/drehimself/vuenative-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 37082 Andre Madarang
Quasar Framework for Vue.js
 
43:58
We take a look at version 1 of the Quasar framework for Vue.js. We go through the installation, some of the components available to use and then build out a mini Reddit clone using what we've learned. We then learn how to deploy the app onto different platforms including Single Page Apps (SPA), Server Side Rendered Apps (SSR), Progressive Web Apps (PWAs), Mobile Apps (Cordova) and Desktop Apps (Electron). GitHub Repo: https://github.com/drehimself/quasar-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 13293 Andre Madarang
Laravel and Paypal Checkout API
 
28:40
We take a look at using Laravel and Paypal Checkout. Paypal is the most widely known online payment gateway so it's a good idea to accept it as payment if you run an online business. Unfortunately, Paypal does not have the greatest reputation in the developer community as its known for bad documentation and a confusing API. Nonetheless, we'll take a look at how to integrate the Paypal Checkout API in a Laravel application using the PHP SDK. GitHub Repo: https://github.com/drehimself/laravel-paypal-example Premium Course on Useful Laravel Packages: http://usefullaravelpackages.com # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 7272 Andre Madarang
React Render Props
 
18:42
We take a look at how to use Render Props in React. Render props allow you to share code between React components using a prop whose value is a function. It is a powerful pattern that makes your components more flexible and more reusable. We go through an example here and incrementally make changes using render props. GitHub Repo: https://github.com/drehimself/react-render-props-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 2104 Andre Madarang
Laravel E-Commerce - Testing w/ Laravel Dusk - Part 30
 
17:56
We take a look at testing our application using Laravel Dusk. When testing applications, sometimes feature and unit tests don't give you enough confidence that a feature is being thoroughly tested. Browser tests (or end to end tests) simulate a real user going through the flow of your application. You can then make assertions about what is shown on the page. Laravel dusk makes this easy with its expressive API. GitHub Repo: https://github.com/drehimself/laravel-ecommerce-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3858 Andre Madarang
NativeScript Vue - Login Screen Styling/CSS
 
20:12
We take a look at styling a Login screen with CSS in NativeScript Vue. With NativeScript, only a subset of CSS is available to us. Furthermore, we are also limited by the native mobile components available to us. Coming from the web world, I was unsure of what I could or could not use. Building and re-creating screens is the best way to find out! GitHub Repo: https://github.com/drehimself/nativescript-vue-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 10776 Andre Madarang
Gridsome - Static Site Generator for Vue
 
45:27
We take a look at building a static site in Vue using Gridsome. Gridsome is heavily inspired by Gatsby which is the most popular static site generator in the React ecosystem. We take a look at the basics of Gridsome, then make use of a few plugins to demonstrate the GraphQL data store. We also take a look at pulling external data from the Reddit API and making use of it in our application. GitHub Repo: https://github.com/drehimself/gridsome-example Gridsome Starter Template for Blog: https://github.com/gridsome/gridsome-starter-blog Gridsome Portfolio Starter (created by me): https://github.com/drehimself/gridsome-portfolio-starter # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 7720 Andre Madarang
Electron with React
 
33:08
We take a look at using Electron with React. We scaffold out an electron app built with the Create React App CLI and rebuild the Reddit clone we've built in previous videos. Article I used: https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 GitHub Repo: https://github.com/drehimself/electron-react-example Electron Basics: https://www.youtube.com/watch?v=nW4Qe4QBWow # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 20164 Andre Madarang
Vue.js Todo App - Basics - Part 1
 
53:44
In this video, we build a Todo app using Vue.js. This will give us a practical approach to learning how to use Vue.js and its core concepts. We scaffold our app using Vue CLI and build out our todo functionality while borrowing some features from the official Vue todo MVC. Full playlist: https://www.youtube.com/playlist?list=PLEhEHUEU3x5q-xB1On4CsLPts0-rZ9oos GitHub Repo: https://github.com/drehimself/todo-vue/tree/01-basics Excellent resources to learn Vue from scratch: Laracasts: https://laracasts.com/series/learn-vue-2-step-by-step Same above but on YouTube: https://www.youtube.com/playlist?list=PL3VM-unCzF8iRyPotjFsgy7EfuCITvr_3 Net Ninja: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa Traversy Media: https://www.youtube.com/watch?v=z6hQqgvGI4Y Academind: https://www.youtube.com/playlist?list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07 # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 44414 Andre Madarang
Vue.js Todo App - Component Communication - Part 2
 
27:00
In this video, we extend our Vue.js Todo App and look at component communication and managing state at a basic level. We extract out a TodoItem component and use props and custom events to communicate between child and parent components. BUG NOTICE @ 18:29 You should NOT pass in the index to update (and delete) the todo in the array. This will lead to an incorrect index when you filter the todos. Instead, pass in the id from the todo.id and find the correct index based on that id. See this commit that fixes it: https://github.com/drehimself/todo-vue/commit/cb64779596b2853bc151eb1b713a6a5a35f98954 GitHub Repo: https://github.com/drehimself/todo-vue/tree/02-communication # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 8857 Andre Madarang
Laravel E-Commerce - Admin Backend w/ Laravel Voyager - Part 10
 
31:51
In this video, we start the backend admin management of our application using Laravel Voyager. Voyager allows us to quickly setup BREAD (CRUD) for all of our models and includes a slick looking UI interface on top of it. Saves A TON of time in writing all the admin functionality ourselves. 3:56 - You have to change the migration file name and class name as well or it will have naming conflicts with Voyager. GitHub Repo: https://github.com/drehimself/laravel-ecommerce-example Voyager: https://laravelvoyager.com # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 25531 Andre Madarang
Inertia.js for Laravel & Vue - Server Driven Single Page Apps
 
42:01
Inertia.js is a framework created by Jonathan Reinink for creating server-driven single page apps. It combines the best parts of building SPAs, while keeping the conveniences of server-driven apps. For a typical Laravel and Vue app, Inertia replaces all your blade templates with Vue Single File components allowing your application to be more interactive. We take a look at the basics of Inertia.js and build out a simple CRUD application in Laravel and Vue. Johnathan's Blog: https://reinink.ca/articles Full Stack Radio Episode: http://www.fullstackradio.com/108 Inertia GitHub: https://github.com/inertiajs GitHub Repo for this example: https://github.com/drehimself/inertia-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 8054 Andre Madarang
Vue.Draggable with Laravel - Example 1
 
41:13
An example of how to use VueJS, Vue Draggable and Laravel to sort a collection of items and persist them to the database. Code: https://github.com/drehimself/vue-draggable-with-laravel # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 15794 Andre Madarang
Nuxt.js Basics - Video Game Site & API
 
45:27
We take a look at the basics of Nuxt.js by building out a video game site using the IGDB API. Nuxt.js is a framework on top of Vue.js which allows your app to be server-side rendered. It also adds some conveniences and structure to your application which makes building medium to large sized Vue apps even easier. IGDB VIdeo Game API: https://api.igdb.com/ GitHub Repo: https://github.com/drehimself/nuxt-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 9765 Andre Madarang
Element Vue Basics
 
33:44
In this video, we take a look at the Element UI library for Vue. Element is a component library for Vue.js that allows you to scaffold out your application interface quickly with pre-built Vue components. We play around with some of the available components and then build an admin dashboard layout. GitHub Repo: https://github.com/drehimself/element-vue-example Element: https://element.eleme.io/#/en-US # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 16509 Andre Madarang
Disney+ Clone w/ Tailwind CSS v1.0
 
26:38
We make a Disney+ clone with Tailwind CSS v1.0 and Vue.js. We focus on the basic layout and utilize Tailwind's default color scheme. GitHub Repo: https://github.com/drehimself/disneyplus-clone Example URL: https://disneyplusclone.netlify.com DIsney+ Demo Video: https://www.youtube.com/watch?v=FrXNtj84owc Part 2: https://www.youtube.com/watch?v=CeAEcVfqBaM # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3082 Andre Madarang
Realtime Pizza Order Tracker - Laravel, Vue & Pusher
 
56:06
A look at how to build a realtime application using Laravel, VueJS and Pusher. We re-create the functionality of the Domino's Pizza order status tracker. We make use of Laravel Echo, which makes the communication between Pusher and our front end very easy. GitHub repo (Upgraded to Laravel 5.8): https://github.com/drehimself/laravel-realtime-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 36519 Andre Madarang
Laravel Nova Overview
 
59:27
We take a look at Laravel Nova, a beautifully designed Admin Panel for Laravel. Nova is the latest product in the Laravel ecosystem and makes building admin panels a breeze. We use our Laravel E-Commerce application as an example and build out an admin panel that allows us to control our data and models. We take a look at Nova's features including resources, search, relationships, filters, metrics, and tools. 47:09 - See this comment to convert to dollars: https://github.com/laravel/nova-issues/issues/151#issuecomment-419090853 Part 2: https://www.youtube.com/watch?v=RaEpHTuGp04 Taylor announcing Nova at Laracon: https://www.youtube.com/watch?v=pLcM3mpZSV0 Nova: https://nova.laravel.com Nova Packages: https://novapackages.com/ GitHub repo: https://github.com/drehimself/laravel-ecommerce-example/tree/nova # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 28312 Andre Madarang
Stripe Elements with Laravel (and Vue)
 
39:19
We take a look at how to use Stripe Elements (JavaScript API v3) to generate a token on the front end. We take that token to our back-end code using Laravel, allowing us to securely charge a credit card. We also go through the process of extracting our JavaScript code to a Vue Component. GitHub Repo: https://github.com/drehimself/stripe-elements-with-laravel # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 11140 Andre Madarang
Rebuilding Mac App Store - Tailwind CSS, Electron & Vue
 
44:43
We rebuild Mojave's redesigned App Store using Tailwind CSS, Electron and Vue.js. Mojave introduced an awesome dark mode and I thought it would be fun to re-create the app using Tailwind, Electron, and Vue. Part 2 - Interactivity: https://www.youtube.com/watch?v=ZCCoP4DW11k GitHub Repo: https://github.com/drehimself/app-store-tailwind # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 9918 Andre Madarang
Laravel E-Commerce - Allow Guest Checkout - Part 15
 
11:50
In this video, we add the ability for users to checkout as a guest. Although our goal is to have users sign up and login to make purchases, there are users that may want to skip that process to quickly checkout. Ecommerce Checkout Flow article: https://econsultancy.com/blog/65457-be-our-guest-a-guide-to-ecommerce-guest-checkout-best-practice GitHub Repo: https://github.com/drehimself/laravel-ecommerce-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3395 Andre Madarang
DigitalOcean Spaces with Laravel
 
18:49
An overview of how to use DigitalOcean Spaces (Object Storage) with Laravel. We build an app that uploads to our local file storage, then setup DigitalOcean Spaces to upload files to the cloud. GitHub repo: https://github.com/drehimself/laravel-spaces-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 5383 Andre Madarang
NativeScript Vue - Installing Locally
 
12:27
In this video, we'll take a look at installing NativeScript Vue locally. This will allow us to make use of Vue Single File Components and also install 3rd party external libraries from npm. We'll go through the NativeScript CLI installation and then port over the Reddit clone we made in the last video. GitHub Repo: https://github.com/drehimself/nativescript-vue-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 9552 Andre Madarang
Laravel E-Commerce - Staging & Production Environments - Part 9
 
17:30
In this video, we take a look at how to incorporate a staging server with our existing production environment. We also take a look at the corresponding git workflow I use, gitflow. Git Workflows: https://www.atlassian.com/git/tutorials/comparing-workflows # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3719 Andre Madarang
Laravel E-Commerce - Zero Downtime Deployment w/ Envoyer - Part 8
 
09:59
In this video, we switch our application over to use Envoyer for deployments. Envoyer allows for zero downtime deployment, allowing you to push code to your server without disrupting your users. Check out more features of Envoyer in this Laracasts series: https://laracasts.com/series/envoyer GitHub repo: https://github.com/drehimself/laravel-ecommerce-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3381 Andre Madarang
Laravel Websockets - Package Usage & Demos
 
34:09
http://usefullaravelpackages.com We take a look at the Laravel Websockets package by Freek from Spatie and Marcel from beyondcode. This package is a websockets server written in PHP and can be used as a replacement for Pusher. We take a look at getting the demo chat application running and we also convert one of my projects using Pusher to use this package instead. We then take some time to get it running on a real production server, set up supervisor and make sure everything is encrypted. Try out the chat: https://chat.laravelecommerceexample.ca GitHub Repo: https://github.com/drehimself/laravel-websockets-demo Real-Time Laravel with Pusher/Echo: https://www.youtube.com/watch?v=pjK0VMTCtVg GitHub Repo: https://github.com/drehimself/laravel-realtime-example/tree/laravel-websockets In-depth blog post by Freek: https://murze.be/introducing-laravel-websockets-an-easy-to-use-websocket-server-implemented-in-php # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 6065 Andre Madarang
React Native Basics
 
35:50
We take a look at the basics of React Native for building mobile apps using web technologies. We use Create React Native App (CRNA) with Expo and make use of some of the components available to us. We then make a mini clone of Reddit using its available API. GitHub Repo: https://github.com/drehimself/reactnative-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 6327 Andre Madarang
Tailwind CSS - Rebuilding Twitter
 
01:09:57
In this video, we take a look at how to install, customize and use Tailwind CSS. We build a clone of Twitter using Tailwind's utility classes, add some customizations and make it responsive along the way. CodePen: https://codepen.io/drehimself/full/vpeVMx/ GitHub Repo: https://github.com/drehimself/tailwind-examples Adam Rebuilds Coinbase: https://www.youtube.com/watch?v=7gX_ApBeSpQ Adam Rebuilds Laravel.io: https://www.youtube.com/watch?v=ZrRRMBaz5Z0 Tailwind Docs: https://tailwindcss.com/ # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 13852 Andre Madarang
VuePress - Static Site Generator
 
28:30
We take a look at using VuePress, a Vue powered static site generator focused on building documentation sites in markdown. We take a look at VuePress version 1, which added support for plugins. We build a basic documentation site that has all the essentials and we take a look at using a few plugins along the way. We then deploy it to a live netlify server. GitHub Repo: https://github.com/drehimself/vuepress-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 2796 Andre Madarang
Vue.js Todo App - Vue Router  - Part 8
 
18:33
In this video, we take a look routing with vue-router. We set up our application routes and separate them into marketing pages and authentication routes. This is essential in making our app function more like a single page application. GitHub Repo: https://github.com/drehimself/todo-vue/tree/08-vue-router # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 3456 Andre Madarang
Laravel E-Commerce - Customizing Views and Controllers in Voyager - Part 16
 
49:48
In this video, we take a look at how to customize views and controllers in the Laravel Voyager admin backend. We allow for categories to be added from within the products dashboard and we also change our views to show the price in dollars instead of cents. This is all done through overriding Voyager's views and controllers. This allows us to customize Voyager's functionality and make it work with what we need in our application. GitHub Repo: https://github.com/drehimself/laravel-ecommerce-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 10998 Andre Madarang
Laravel E-Commerce - Checkout with Stripe - Part 3
 
37:28
In this video, we add Checkout integration with Stripe. We go over how to use Stripe Elements to generate a token on our front-end and pass it to our backend to charge a credit card. We run into a few minor issues, and fix them along the way. I apologize for the microphone/audio issues in the first half of the video. Had to reboot my computer halfway through my recording session! GitHub repo: https://github.com/drehimself/laravel-ecommerce-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Views: 14580 Andre Madarang