Dog Sitting Website

Turbo 360

Welcome to a 7-part tutorial series on building a web application using Node JS, Express and Turbo 360 . This series is perfect for teaching you how to build your startup MVP. We walk through the basics of setting up a Vertex, running your development server, and deploying. We go over the architecture that comes out of the box with Turbo 360 - a Node JS app built on Express. The Vertex scaffold also comes with Mustache templating built in, which makes it very easy to build partial templates like a navigation bar. We show how easy it is to use HTML5 and CSS3 to build a simple landing page and also how easy it is to use Turbo360 for user management such as logging in and signing up. We also build a dashboard for the user as well as a REST API which we can interface with to store and retrieve data, in a CRUD fashion. Building on a sample startup of a “DogSitter” web app, we show how you can create a resource in your database and list that resource on a page on the site. We also showed that you can classify users with different types, giving certain abilities to certain class of users. In our case it was Dog Sitters and Dog Owners. We allowed a dog owner to create a reservation and a dog sitter to accept that reservation. Each reservation resource was made up of an image, the name of the dog, and a date. We showed these on the listing page, which only displayed reservations which have not been accepted yet. This set of features gives us enough to work with for a cursory web app, but can be easily expanded to cover your MVP’s needs. This tutorial series shows how easy a Turbo 360 Vertex makes it to build user management and an API to create, read, update and delete resources!

Getting Started

In this video, we install and set up the Turbo360 environment on your computer. Then, I go through the basics of setting up a landing page, with a header image, a call to action, and a form on your Vertex by modifying the scaffold that is provided by Turbo360. Finally, we set up the authentication route for user creation using the Turbo360 API and then connect a form on the landing page which allows users to sign up. Next time we will hook up a dashboard page which can only be accessed when the user logs in and also set up an API so that we can save a resource to the datastore.

Dashboard Page

In this video, we continue with the project, showing you how to build a dashboard page which can only be accessed when the user logs in. We connect the user data to the dashboard page, so that it can show some dynamic data about the user such as their name. We also discussed proper architecture for an API and implemented a “Reservations” resource for the API. We also connected it to the dashboard page, allowing a user to create a new reservation from the dashboard. Finally, we also retrieved reservations created by the user and displayed them on the dashboard page. Next time, we will create a listing page, showing all available reservations. We will also add a “type” property to the user object, to differentiate between Dog Sitters and Dog Owners.

Listings Page

In this video, we built on our progress from the last installment of the series. We built a listing page for reservations so that users could see the available reservations on the site. We showed how you can add a “type” property to the user object to enable different behaviors on the site. Also, if you are signed in as a dog sitter, you can accept a reservation via the reservations page. We extended the API by allowing a put request on the reservations route, to allow updates to a specific reservation.

Updating Your Profile

In this video, we worked off of the idea of updating a resource and built a form which allowed the user to update the user object, changing their name or email. We also built additional functionality to allow a user to upload a photo to their profile. Next, we focused on further implementing the main feature of the site (the reservations) and making it so that only a sitter or an owner can take certain actions on the site.

User Interface

In this video, we continued to expand upon the functionality that we already learned, and also started to clean up the User Interface of our web app, in order to make it a little more user friendly. We focused on the key feature of our web app in this tutorial. Next time, we will build a user profile page, so that dog owners can see their dog sitters and vice-versa.

Browsing Available Dog Sitters

Today, we built out the user profile page, so that dog owners can see the sitters who accept their reservation. We also excluded accepted reservations from the “Reservations” Page, so that they cannot be double-booked. And finally, we set up a navbar template that can be used across the site.

Landing Page

This is the final video in the series. We fixed up the home page and added a nice parallax effect to it, so that it looks much more visually appealing. We also added an additional page for listing dog sitters, showing how easily we can add pages that query for some resource and display them. Finally, we added a logout button on the site using the Turbo user management

Join Free

Join for free today and deploy your site in seconds

Already have an account? Sign in HERE