
Welcome to Source Compare!

Whether you are a designer, developer, project manager or someone else interested in the assets of a project, Source Compare allows you to keep track of all of them in one place using version control and voting to keep everyone on the same page.

Source Compare allows you to keep track of all the images that you use in the lifecycle of a project all in one place.

## Getting Started with Source Compare

When you log in, the projects page is the first thing that you will see. This will have a list of all the projects that you have created or been invited to. You may create a new project or click on an existing one to move to the project page.

### Project Page

<div class="grid grid-cols-6 gap-4 ">
  <img class="w-full h-24 col-span-6 sm:col-span-3" src="getting-started/one-project.png" />
  <div class="col-span-6 sm:col-span-3">
    <h3>One project</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">A</span> Project author/owner
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">B</span> Project items
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">C</span> Project followers
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">D</span> Edit project name or followers
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">E</span> Delete project
      </p>
    </div>
  </div>
</div>

#### Create a new Project

You can create a new project by clicking the new project button. In addition to the name, you also can add other followers to the project that will be able to create new items, commits, and vote on your favorites. By default, the permissions are relatively open so only invite people you trust and who you'd like to have access to all of the assets in the project.

To add a follower search for their name. You will only see matches for people that you have confirmed friendships with. See the profile section below to learn how to make new confirmed friends.

Alternatively, if there is not a friend match found, there will be a button that will allow you to see non-friends who can be added. In that case they will be added as a pending follower and sent a friend request. It is only once they confirm their friendship that they will be able to see the projects. The same goes for inviting someone by email- they will only see the projects once they create an account, confirm the same email address on the profile page that they were invited with and then confirm you as a friend.

The followers list can be updated at any time and once someone is removed, they will not be able to see the project anymore. Note- it is not currently possible for the creator to remove themselves from a project.

### Project Detail Page

When you click on a particular project, you are brought to the project detail page. This shows all of the items that belong to a particular project.

<div class="grid grid-cols-6 gap-4">
  <img class="w-full h-24 col-span-6" src="getting-started/finished-items.png" />
  <div class="col-span-6">
    <h3>Approved Items</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">A</span> Create new item
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">B</span> Approved item selector
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">C</span> Edit item name
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">D</span> Delete item
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">E</span> Highest version thumbnail gallery
      </p>
    </div>
  </div>
</div>

By default, the finished items will be displayed (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">B</span>). These are items that have been previously approved by clicking the approve button on the item's detail page. For a new project, this will be empty until you start creating and approving items.

#### Create a new item

You can create a item using the create new item button (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>). If you ever have to edit (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) or delete those items (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>), there are individual buttons for each of them on the item cards. For each item, there will be a thumbnail gallery (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">E</span>).

<div class="grid grid-cols-6 gap-x-4">
  <img class="w-full h-24 col-span-6" src="getting-started/in-progress-items.png" />
  <div class="col-span-6">
    <h3>In-progress Items</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">A</span> In-progress item selector
      </p>
    </div>
  </div>
</div>

If you flip over to the in progress items, you can see all the ones which have not been approved. To see detailed information about an item, click on it.

### Item Detail Page

<div class="grid grid-cols-6 gap-x-4">
  <img class="w-full h-24 col-span-6" src="getting-started/item-view.png" />
  <div class="col-span-6">
    <h3>Item View</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">A</span> Approval button
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">B</span> Project hierarchy
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">C</span> Currently selected commit
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">D</span> Thumbnail gallery for currently selected
        version
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">E</span> Navigation to traverse items, iterations
        and versions
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">F</span> Upload replacement image
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">G</span> Download current commit
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">H</span> Vote on current commit
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-3 py-1 text-white ">I</span> Delete current commit
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">J</span> Currently selected version
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">K</span> Create new version
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">L</span> Create new iteration
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">M</span> Currently selected commit
      </p>
    </div>
  </div>
</div>

The item detail page is where all the magic happens- this is where you manage all the aspects of the project. First, let's get a few definitions out of the way:

- **Commit:** a particular image within an item.
- **Version:** think of a version as a round of edits, each version may have multiple iterations within it in order to test out a variety of options for that round. The most current version will always have a blue box around it (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">J</span>).
- **Iteration:** a specific commit within a version (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">M</span>).

So as an example, in the item view above, we see a total of 6 commits on the left item timeline section. The first version will be the lowest on the list and we can see that version 1 has 1 iteration. The second version inspired 3 different iterations and the latest version has 2 iterations (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">J</span>). The leftmost item has a purple border around it which means that it is selected (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">M</span>).

On the right, we can see an item detail section which shows the currently selected commit (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) and a version thumbnail gallery (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>) for all of the other iterations within the selected version. Here you can see that the plant nursery was testing 2 versions of a cacti asset in 2 different types of containers.

Below the currently selected commit (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>) and version thumbnail gallery (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>), there is a navigation and action panel. The navigation buttons (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">E</span>) allow for traversing in 3 ways:

#### Navigation Buttons:

- Navigate within iterations in the current version using < and > buttons
- Navigate between versions using the &and; and &or; buttons
- Navigate between items in a project using the << and >> buttons

For the navigation buttons we have a upload new image (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">F</span>), download current image (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">G</span>), vote on current iteration (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">H</span>) and delete iteration button (<span class="rounded-full bg-green-400 font-bold text-md px-2 text-white ">I</span>).

#### Voting

Voting is used to determine the favorite iteration for each version among the people who follow the project. You can only vote on one iteration so if you pick another in the same version, it will switch automatically. You can tell which iterations that other people have picked by hovering over a particular one on the left timeline section.

The left timeline section will calculate which iterations have the most votes per version and attempt to draw a straight path from the first version to the most recent version. In the event of a tie, you will see yellow dotted lines going to the iterations that are currently tied and if someone switches their votes around, the arrows will be redrawn accordingly. In the example above, we can see that:

**v1 iteration 1 &#8594; v2 iteration 2 &#8594; v3 iteration 1**

#### Creating a new Commit

Now that we've run over the layout of the page, let's actually create some new commits. The first thing to do is create a new version (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">K</span>). This will create a new version and a single iteration. You can now upload your version using the upload button (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">F</span>).

You may continue to add new iterations to the version by pressing the add iteration button (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">L</span>). Once your followers vote on their favorite for this round, create a new version and add new iterations just like before.

You can create as many iterations and versions as you'd like until you create a final commit. Then, you can click the approve button (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>) and you are done!

### Profile Page

<div class="grid grid-cols-6 gap-4">
  <img class="w-full h-24 col-span-6" src="getting-started/profile-page.png" />
  <div class="col-span-6">
    <h3>Profile page</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">A</span> Enter and verify your email
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">B</span> New friend search
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">C</span> Send friend request
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">D</span> Incoming friend request
      </p>
    </div>
  </div>
</div>

The profile page allows you to verify your settings and manage friendships. You should verify your email because it allows the system to link any pending project invitations to your account (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">A</span>). To verify your email type it in to send a verification email to that address. You will receive an email with a verification code that you can enter in and provided that it is correct, the text will switch from not-verified to verified.

You must confirm a friendship with someone before you are allowed to invite each other to projects. This is true both for inviting them to a new project and also for any pending projects that they might have invited you to.

To send a friend request, enter their name into the search bar (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">B</span>) and you will see matches based on that name. Click the green plus button to add them as a friend (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">C</span>). In your friend's profile, your request will show up and they will need to press the green check mark to approve it (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>).

<div class="grid grid-cols-6 gap-4">
  <img class="w-full h-24 col-span-6" src="getting-started/profile-page-pending.png" />
  <div class="col-span-6">
    <h3>Profile page pending</h3>
    <div>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">E</span> Friend requests section
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">F</span> Friends section
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">G</span> Pending friend
      </p>
      <p>
        <span class="rounded-full bg-green-400 font-bold text-xl px-2 py-1 text-white ">H</span> Confirmed friend
      </p>
    </div>
  </div>
</div>

Once the friend has been requested, they will show up as pending (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">G</span>) on your end and a request on their end (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">D</span>).

Both when friends confirm your requests or when you confirm a friend's request, they show up as confirmed friends (<span class="rounded-full bg-green-400 font-bold text-md px-1 text-white ">H</span>) and you both may add each other to any of your projects.


Learn something new