Last updated

Tutorial introduction

This guide describes how to customize the FTW-daily template.

Table of Contents

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 Heroku.

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 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 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
  6. Push an existing repository from the command line

    git push -u origin 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