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.
This Series Has Been Archived
You are viewing an archived course. Some of the concepts in this video may no longer be relevant in 2026.
Progress
Series Info
- Episodes
- 19
- Run Time
- 2h 47m
- Difficulty
- Intermediate
- Last Updated
- Nov 11, 2015
- Version
- Latest
Series Episodes
- Episodes (19)
Purchasing the Domain
To begin our series, we'll purchase the ProjectFlyer.com domain name from Hover.Initial Setup
We have the typical work to do first, such as initializing Git, creating our database, and other similar tasks.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.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.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.Migrations and Models
We have our form, but we've haven't built up our migrations or models just yet. Let's tackle that.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.Validating and Persisting Flyers
Let's process the main flyer form. We'll need to apply some validation, persist the flyer, and redirect.Elegant Flash Messaging
Let's write an elegant flash messaging API that leverages the Sweet Alert JavaScript library.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.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!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!Thumbnails
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.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.Refactoring Makes Perfect
Let's continue refactoring our code, as we examine alternative possibilities for structuring things.Service Classes and Alternative Approaches
Let's continue our review of various ways to structure our code, while making a number of tweaks.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.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.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.
