Tutorial introduction

What are we building?

In this tutorial, we start to customize FTW-daily template and turn it into a cottage-rental marketplace called CottageDays.

The first part of this tutorial is about branding the template. However, we will add new articles later about features that go beyond FTW-daily template and its default behaviour.

Part 1: Branding
Learn to make changes that are necessary to turn Saunatime marketplace to CottageDays marketplace. At the end of this part, we deploy CottageDays marketplace to Render.

Part 2: Extend the data model
Learn how to extend listing entity with marketplace specific data. Then we show the new info on listing page and we also add a search filter for it.

Part 3: Modifying the transaction process
Here, we start by showing how to customize the pricing. Then the rest of the articles are more focused on making modifications to the transaction process and email notifications.

Prerequisites

FTW-daily is created on top of React, Redux, and styles are creted with CSS Modules. You should be familiar with those libraries.

You should also have completed the Getting started guide and as a result, you have the FTW-daily repository cloned to your local development environment and the app is available in http://localhost:3000.

After that you could set up a Github repository for code changes. You could either Fork the FTW-daily repository or create your own Github repository and push your locally cloned Git repository there.

Even though the first option is easier (i.e. just click the "fork" button in FTW-daily Github repo), the latter is the recommended approach for the actual customization work. Here's a rough guide on how to set it up:

1. Create a Github repository.

   Note: do not initialize the repo with anything. You are importing an existing repository.

2. On the command line, check your remote repositories:

   git remote -v

   It should print this:

   origin  https://github.com/sharetribe/ftw-daily.git (fetch)
   origin  https://github.com/sharetribe/ftw-daily.git (push)

3. Rename the FTW-daily repository (current 'origin') as 'upstream'

   git remote rename origin upstream

   › Check what your remote repositories should print at this point

   Check your remote repositories:

   git remote -v

   It should print this:

   upstream  https://github.com/sharetribe/ftw-daily.git (fetch)
   upstream  https://github.com/sharetribe/ftw-daily.git (push)

4. Add your newly created repository as 'origin':

   git remote add origin https://github.com/<your-github-account>/<the-name-of-your-new-repo>.git

   › Check what your remote repositories should print at this point

   Check your remote repositories:

   git remote -v

   It should print something like this:

   origin  https://github.com/<your-github-account>/<the-name-of-your-new-repo>.git (fetch)
   origin  https://github.com/<your-github-account>/<the-name-of-your-new-repo>.git (push)
   upstream  https://github.com/sharetribe/ftw-daily.git (fetch)
   upstream  https://github.com/sharetribe/ftw-daily.git (push)

5. Rename your local default branch as main

   If you have cloned FTW-daily or FTW-hourly repository, the default branch is following an old Github naming pattern.

   git checkout master
   git branch -m master main

   FTW-product uses the new naming pattern - you just need to checkout the correct branch.

   git checkout main

1. Push an existing repository from the command line

   git push -u origin main

   › What's the difference between master and main?

   Git is one of the most popular version control systems. It creates a tree structure where each commit (of code changes) creates a new node in that tree. The default branch (trunk) has been traditionally called as master, but Github has moved away from that naming convention and has started to call the default branch as main.

   FTW-daily and FTW-hourly have been created long time before that naming convention changed, so they still use master as the name of the default branch. However, Github is pushing the new naming convention into use throughout their service and it's better if new repositories follow that naming pattern.

Note: the examples above, used HTTPS remote URLs instead of SSH remote URLs.
Read more about remote URLs.

Now you are ready to make code changes and save those to Github!

The first part of this tutorial starts with changing the marketplace color.
› Go to the next article