Cairn

Spring 2025

Cairn is a platform for travelers to plan trips without having to worry about their schedule. Cairn allows its users to add events they find interesting while recommending a schedule that works around their current constraints. Our goal is to create a streamlined experience that allows users to plan trips while focusing on the events themselves.

What does it do?

Cairn asks the user a few questions about their travel destination and their habits, then allows them to upload a calendar file from their computer. After this, it provides a tailored list of activities to do in their specific travel destination that they can then use to construct their plan on the website.

Through this, they can easily find activities that match their interests and can even fit them around their own calendars, if they decided to upload one. This can save significant time and reduce the stress of planning the trip.

After this, the user can export their itinerary, either as a regular that they can seamlessly merge with their own, or as a fun, memorable stack of rocks that marks their journey (also known as a cairn).

What even is a "Cairn"

A cairn (pronounced "kiern") is a stack of rocks, built by humans to mark a trail through which they have traveled. We liked this imagery of marking one's path through which they went, and remembering all the good times and experiences, rather than the stress of planning.

Tech stack

Frontend:

• TS
• React
• Tailwind CSS

Backend

• Express
• Cypress
• Vite

Usage

Welcome

After entering the app, you will be greeted by a landing page, displaying the most popular destinations available, as well as a search bar and a welcome message that will switch to different languages as time progresses.

By either clicking on the popular destinations on the cards below, or clicking and typing the name of a city, you can begin your plan. From the pop-up, click on the suggestion that matches your city's name and country, and you will be entered into the onboarding process.

Onboarding

Throughout the onboarding, you will be asked a number of questions that will help us understand what kind of traveller you are, through these questions, we will be able to tailor the experience specifically to you, saving you time and finding activities that match your interests. Simply answer the questions and click on "Next" to move on to the next question, click on "Previous" to go back if you would like to change anything.

After finishing the onboarding process, you can click "Proceed" on the last card to enter the Home Page.

Home page

Welcome to the Home Page, this is your trip's "Hub", where you can see all the activities we have chosen for you, or search some specific ones that you'd like, and adde them to your plan. More on that later.

You also have access to the sidebar, on the left. This sidebar contains a number of filters, all containing the same information that you provided during the Onboarding. On the sidebar, you can change, add and remove any information if you'd like to see different results for activities.

On the home page, you can see a list of activities and experiences, taken chosen from TripAdvisor, one of the most well-known and reliable travel platforms on the internet. From this curated list, however, you can add them directly to your travel plans and seamlessly remove them as you please.

The informality of it allows you to plan the trip with lower commitment, rather than booking everything first and trying to make it all fit later. On our platform, you can see a suggested time, and length for the experience, and fit it around your calendar without worrying that it will conflict with other activities you add later.

Calendar Page

Cairn Page

Contributing

first, ensure you have Docker installed, create an account if you haven't and, log in using these instructions, and in your terminal,

run

yarn install

To ensure all of the appropriate packages have been installed,

yarn run server

To run the backend, and

yarn run dev

To run the site locally, then right-click on the localhost link from the terminal, and it should open the page on your preferred browser.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});