Last updated

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

    git push -u origin master

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