Build "ProjectFlyer" With Me

In this series, from scratch, you'll come along with me as I build a web app, called "Project Flyer." We'll tackle everything from the domain name purchase, to the deployment.

Start Series

Share this series on:

This series has been archived.

  • 01

    Episode 1 Run Time 1:28

    Purchasing the Domain Free

    To begin our series, we'll purchase the domain name from Hover.

  • 02

    Episode 2 Run Time 3:26

    Initial Setup Free

    We have the typical work to do first, such as initializing Git, creating our database, and other similar tasks.

  • 03

    Episode 3 Run Time 3:14

    Basic Gulp Housekeeping

    We'll naturally be making use of Laravel Elixir and Gulp in this series, so let's get all of that setup.

  • 04

    Episode 4 Run Time 4:23

    Initial Scaffolding and Routing

    Let's a do a quick bit of "design" on the home page, and then figure out the correct resources for representing our flyers.

  • 05

    Episode 5 Run Time 9:13

    The Flyer Form

    Let's get started on the main flyer form. This is what users will fill out to generate their home landing page.

  • 06

    Episode 6 Run Time 7:26

    Migrations and Models

    We have our form, but we've haven't built up our migrations or models just yet. Let's tackle that.

  • 07

    Episode 7 Run Time 3:32

    The Flyer and Photos Relationship

    If we can't store "photo" as a column on our flyers table, then we'll need to use a "has many" relationship instead. Let's setup that relationship with Eloquent in this episode.

  • 08

    Episode 8 Run Time 9:10

    Validating and Persisting Flyers

    Let's process the main flyer form. We'll need to apply some validation, persist the flyer, and redirect.

  • 09

    Episode 9 Run Time 20:15

    Elegant Flash Messaging

    Let's write an elegant flash messaging API that leverages the Sweet Alert JavaScript library.

  • 10

    Episode 10 Run Time 8:07

    Preparing the Flyer Page

    We're about ready to start working on the actual flyer page. Let's begin getting that setup, while preparing the proper URI.

  • 11

    Episode 11 Run Time 25:08

    Bulk File Uploads

    Let's start tackling the process of allowing users to upload photos for their flyers. It would be great if they could drag and drop a series of images onto the page, so let's make that happen, using Dropzone.js!

  • 12

    Episode 12 Run Time 8:20

    The Authentication Layer

    We've decided that you can't create a new flyer, until you've registered. Fair enough. Let's enforce that in this lesson!

  • 13

    Episode 13 Run Time 14:34


    Currently, when a user uploads a set of images, we immediately display them on the main flyer page - regardless of how large they are. Instead, let's use the Intervention library to create a 200x200 thumbnail for each upload.
  • 14

    Episode 14 Run Time 22:20

    Guards and Authorization

    At the moment, we haven't written any logic to protect users from others uploading photos to their flyer. We can't have that! In this lesson, I'll demonstrate a number of ways to authorize users.
  • 15

    Episode 15 Run Time 13:13

    Refactoring Makes Perfect

    Let's continue refactoring our code, as we examine alternative possibilities for structuring things.
  • 16

    Episode 16 Run Time 20:11

    Service Classes and Alternative Approaches

    Let's continue our review of various ways to structure our code, while making a number of tweaks.
  • 17

    Episode 17 Run Time 11:23

    Unit Testing

    The truth is that we have to take shortcuts sometimes in these videos. To cram the entire process of building an app down to a few hours is a fairly difficult task. Nonetheless, it's implied that you're testing your code. Let's review what that might look like, using the class we built in the previous episode.
  • 18

    Episode 18 Run Time 2:31

    Lightbox It

    Right now, we can view the thumbnails for our homes, but clearly we need to see the full-sized versions, too! Let's opt for a drop-in lightbox to solve this.
  • 19

    Episode 19 Run Time 11:13

    Deleting Photos

    We can successfully drag and drop any number of photos onto the page, but we don't yet have a way to remove them. Let's fix that in this video, while also creating a helper function to simplify the tedious process of creating forms for the sole purpose of submitting "PATCH" and "DELETE" requests.