Sequence 21 Studios

Live At https://www.sequence21.com/


Published Jan 16, 2022

Decorative project banner

As a new production company, Sequence21 Studios has massive plans in mind, that require the surgical precision of our talented developers. Presenting this business and its respective works with the visual appeal befitting the film industry wasn't the only priority of this project; we were also tasked with developing a small scale CMS (content management system) named The Scene, where subscribed members can add/edit their own projects into a portfolio.

Features

Here's a list of goals for this project:

Since our client is a production company, they've already had substantial work done in branding and content creation. Therefore, we were able to partner with their own in-house designer William, who provided us with beautiful mockups for the majority of the pages we needed. In addition, we were given images and videos to add in key places, to bring the design to life. Rather than explaining it to you, we shall let you feast your eyes on it..

The Landing page

screenshot of fullscreen video on top of homepage
Video reel hero
company motto and logos of collaborator organizations
Synopsis and list of partner organizations
selectable projects produced in-house
Featured In House project and link to Our Work
banners for customizable film product, animation, and graphic design
Base services that link to service page
grid of users
List of some The Scene members and link to The Scene home page

Services page

services page slider
Lists of various services

Our Work page

grid of in-house projects
Gallery of In House projects on Our Work page

About page

introduction video above a short blurb on the about page
About page featuring a video

Let's go into more detail about The Scene; like we explained before this is a custom feature that allows users to showcase their own portfolios. This is a subscription based service, and since we want to leave room for other features such as Take One (coming soon) we separated the process of creating a user account and becoming a member. Registered users will have the option to edit their account information and manage subscriptions. New users will see the option to become a member of The Scene on their dashboard after registration, subscription payment processing is handled through Stripe.

login form with forgot password and register buttons
Log in form
profile information editor
Profile information that can be edited
dashboard
User dashboard showing subscriptions (and The Scene member project info)
user portfolio
User profile view

Subscribed users now have access to their own portfolio. Here they can add new projects that include inputs for a thumbnail, images, a video link (youtube or vimeo), categories for selecting genre, and a list of collaborators. They can also choose to make the project private or public so that it's visibility on the site is controlled.

project editor
Editing a project
grid of project images to add/delete
Editing a project - Image uploader
textboxes, one small and one large with extra controls
Editing a project - synopsis and description
collaborator name and role selector
Editing a project - Crew

This is what a published project looks like to visitors; it'll also be visible on The Scene's homepage.

project image above title, author, genre, etc.
Project view
a row of project pictures
Project view - Gallery
a row of project collaborators' names and pictures
Project view - Crew

Development

This project provided many unique challenges for our team.

On the front-end, we essentially replicated the designs given to us by the client using Tailwind CSS for the majority of the styling work, as well as our own CSS and some additional libraries where applicable. The Tailwind framework makes it easy to change the look of components directly on the tag without making a huge mess or scrolling to find class names constantly. For more complicated designs, such as this row of differently shaped thumbnails, we used conditional CSS classes with the help of Alpine.js. Not going to lie, it kind of felt like magic, and we're use to this stuff 😀!

grid of project names and pictures
Projects on member's page

Similar to the projects display above, there are many other custom containers for holding dynamic information. A lot of these lists are shown as carousels made using Swiper.js, such as the list of services or images for an individual project.

another example of a row of project pictures
Project images

Others, like the larger list of projects on The Scene home page, are shown in a grid and use pagination provided by Livewire.

a grid of project photos, with a page selector below
Projects on The Scene home

And of course, even though designs weren't made for the mobile version of the site, we had it covered, finding a way to stick to the spirit of the desktop site, with some additional niceties thrown in for visitors on the go 😉. Yes, that includes all project editors and admin dashboards - every page is as responsive as we could make it.

transluent mobile navigation on top of a video playing
Mobile navigation
contact form on mobile, firm and last name, email, and message
Mobile contact form
project and member selector on mobile
Mobile The Scene home

All in all, we are really pleased with how this turned out. It's the most-complicated web app we have created to date, but we were able to bring a unique flair and pragmatism to the project that resulted in a very nice-looking site that is also extremely functional for visitors, users, and administrators.

Tech We Used

Tailwind.CSS

Tailwind.CSS

Alpine.js

Alpine.js

Livewire

Livewire

Laravel

Laravel

Stripe

Stripe

PHP

PHP

Project Collaborators

Profile Picture

Evan Campbell-Weiner


  • Full-Stack Web Developer
  •  
  •  
Profile Picture

Joshua Rose


  • President
  • Graphic Designer
  • Front-End Developer
Profile Picture

Matthew Piercey


  • Director of Operations
  • Full-Stack Developer
  •