The Scout-A-Route project is now initialized and the basic setup is complete. I'll go through the steps I took to get here.

GitHub Repository & Project

Nothing fancy here, I just created a GitHub repository and added a short description. The repository has a main branch that will eventually be used for production and a develop branch which will be used for, well, development. Any features that I work on will happen on a separate branch which will be merged into develop, and eventually into main. I also set up a simple GitHub Project with a Kanban board, a Backlog and a Roadmap (these are all pre-existing templates). I also added a first Milestone to my GitHub repository (called "Project setup") and a few tasks to get started. Feel free to check out the repository and the project.

Project Initialization

Since I'm using Svelte for this app, the project initialization was very simply done using npm create svelte@latest. As you can see from the screenshot below, the CLI tool guides you through the process step-by-step and asks if you want to use Typescript, linting, testing, and so on. When I ran npm install I actually encountered an issue with a dependency conflict between eslint and typescript-eslint. After some googling I found out that this is a known issue with a few temporary fixes available. I chose to manually downgrade eslint to ^8.56.0 but I imagine this issue will be fixed in the near future.

Setting up linting

I opted to add ESLint and Prettier to my project during the create svelte process, as you can see above. I have not messed with the ESLint configuration yet since the default options usually work fine for me. I will add rules and whatnot as I go along and notice a need for them. My Prettier config is also quite basic and mostly a matter of personal preference (i.e. single vs double quotes, trailing commas, etc.)

Setting up testing

Same as linting, I opted to add testing tools to my project during the create svelte process. Specifically, I will be using Vitest for unit testing and Playwright for end-to-end testing. Upon installation, one simple test is automatically created for both of them. I haven't added any additional tests for now but I plan to test the app thoroughly once I implement some features.

// Vitest
import { describe, it, expect } from "vitest";
​
describe("sum test", () => {
  it("adds 1 + 2 to equal 3", () => {
    expect(1 + 2).toBe(3);
  });
});

// Playwright
import { expect, test } from "@playwright/test";
​
test("index page has expected h1", async ({ page }) => {
  await page.goto("/");
  await expect(page.getByRole("heading", 
    { name: "Welcome to SvelteKit" })).toBeVisible();
});

Setting up husky

husky is a tool that basically allows you to run certain commands when you make a commit or push your code to a repository. In my case, I have a pre-commit hook that runs npm run lint, which is a script equivalent to prettier --check . && eslint . . This command will run whenever I make a commit, and it will check that my code is formatted properly. If not, it won't allow me to make my commit until I fix the issues. I also have a pre-push hook that runs npm run test, which runs the commands playwright test and vitest run. This means that whenever I try to push my code, all unit and end-to-end tests will be run to make sure that I haven't broken anything. If a test doesn't pass, the push doesn't go through and I'll have to fix my code.

Setting up Tailwind and DaisyUI

I followed this guide for setting up DaisyUI with Svelte and it was a breeze. Usually when I try to add Tailwind and/or DaisyUI to a project, some kind of issue pops up that I have to spend time sorting out, but this time everything went very smoothly and no issues were encountered. I will probably customize my theme at some point, but for now I'll be going forward with just the default Daisy theme.

Setting up Google Maps API

This one was a bit tricky since I've never worked with this particular API before. Most of the setting up was done in the Google Cloud console as I had to set up my project, billing, restrictions, usage limits and so on. Once I had my API key I used the Google Maps API documentation to learn how to display a map on my page, and after some trial and error it worked! I'll have to experiment with the API quite a lot to figure out what I need and how to get the results I want.

Next steps

First and foremost I need to do some planning. I'll try to split the work that needs to be done into small tasks and add them to my Project board. I also have lots to learn about the Google Maps API and I expect it will take some time to figure out how to do what I want to do. Anyway, I'm excited about the journey ahead. Thanks for reading and see you next time!