Site Clone - Slack

Turbo 360

A great way to learn best practices and techniques for web development is to see how the professionals do it. In this series, we do exactly that by re-creating the landing page and on-boarding process of Slack.com. We will create the landing page and register new users through our backend on Turbo, then redirect to another page which shows the new user. Throughout, we discuss the key tools and techniques used by Slack to develop the site and employ the same in our local project. Finally, we will publish the site to a staging environment for free.


Landing Page

In this video, we set up the initial landing page and import the CSS to our local asset pipeline. In doing so, we see that Slack uses a CDN for static asset delivery and explain the main benefits of this approach. We compile our CSS files using Gulp which leads to a single, minified style sheet which is more efficient for download speed.

User Registration

In this video, we connect the local project to our Turbo remote backend then register a couple sample users to the the backend. We set up the build task for Javascript imports and use JQuery to interface with the Slack landing page buttons and inputs. Once a user registers, we then navigate to the 'get-started' page which will show the email of the current user.

Deployment

In this video, we show the email of the registered user on the confirmation page to esnure that it worked. Finally, we deploy to a staging environment on Turbo and test the sign-up process on a live deployment.

Membership Options