migration to new backend

frontend/.env.example

@@ -0,0 +1,2 @@
+PUBLIC_SERVER_URL=http://127.0.0.1:8000
+BODY_SIZE_LIMIT=Infinity

frontend/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

frontend/Dockerfile

@@ -0,0 +1,35 @@
+# Use this image as the platform to build the app
+FROM node:18-alpine AS external-website
+
+# A small line inside the image to show who made it
+LABEL Developers="Sean Morley"
+
+# The WORKDIR instruction sets the working directory for everything that will happen next
+WORKDIR /app
+
+# Copy all local files into the image
+COPY . .
+
+# Remove the development .env file if present
+RUN rm -f .env
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Clean install all node modules using pnpm
+RUN pnpm install
+
+# Build SvelteKit app
+RUN pnpm run build
+
+# Expose the port that the app is listening on
+EXPOSE 3000
+
+# Run the app
+RUN chmod +x ./startup.sh
+
+# The USER instruction sets the user name to use as the default user for the remainder of the current stage
+USER node:node
+
+# Run startup.sh instead of the default command
+CMD ["./startup.sh"]

frontend/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

frontend/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "adventurelog-frontend",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"django": "cd .. && cd backend/server && python3 manage.py runserver",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@iconify-json/mdi": "^1.1.67",
+		"@sveltejs/adapter-auto": "^3.2.2",
+		"@sveltejs/adapter-node": "^5.2.0",
+		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@tailwindcss/typography": "^0.5.13",
+		"autoprefixer": "^10.4.19",
+		"daisyui": "^4.12.6",
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.5",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.1",
+		"tailwindcss": "^3.4.4",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2",
+		"unplugin-icons": "^0.19.0",
+		"vite": "^5.3.1"
+	},
+	"type": "module",
+	"dependencies": {
+		"svelte-maplibre": "^0.9.8"
+	}
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.d.ts

@@ -0,0 +1,24 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			user: {
+				pk: number;
+				username: string;
+				first_name: string | null;
+				last_name: string | null;
+				email: string | null;
+				date_joined: string | null;
+				is_staff: boolean;
+				profile_pic: string | null;
+			} | null;
+		}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

frontend/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

frontend/src/hooks.server.ts

@@ -0,0 +1,104 @@
+import type { Handle } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import { fetchCSRFToken, tryRefreshToken } from '$lib/index.server';
+
+export const authHook: Handle = async ({ event, resolve }) => {
+	try {
+		let authCookie = event.cookies.get('auth');
+
+		if (!authCookie) {
+			event.locals.user = null;
+			const token = await tryRefreshToken(event.cookies.get('refresh') || '');
+			if (token) {
+				authCookie = token;
+				event.cookies.set('auth', authCookie, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return await resolve(event);
+			}
+		}
+
+		const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+		let userFetch = await event.fetch(`${serverEndpoint}/auth/user/`, {
+			headers: {
+				Cookie: `${authCookie}`
+			}
+		});
+
+		if (!userFetch.ok) {
+			console.log('Refreshing token');
+			const refreshCookie = event.cookies.get('refresh');
+
+			if (refreshCookie) {
+				const csrfToken = await fetchCSRFToken();
+				if (!csrfToken) {
+					console.error('Failed to fetch CSRF token');
+					event.locals.user = null;
+					return await resolve(event);
+				}
+
+				const refreshFetch = await event.fetch(`${serverEndpoint}/auth/token/refresh/`, {
+					method: 'POST',
+					headers: {
+						'X-CSRFToken': csrfToken,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({ refresh: refreshCookie })
+				});
+
+				if (refreshFetch.ok) {
+					const refresh = await refreshFetch.json();
+					event.cookies.set('auth', 'auth=' + refresh.access, {
+						httpOnly: true,
+						sameSite: 'lax',
+						expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+						path: '/'
+					});
+
+					userFetch = await event.fetch(`${serverEndpoint}/auth/user/`, {
+						headers: {
+							'X-CSRFToken': csrfToken,
+							Cookie: `auth=${refresh.access}`
+						}
+					});
+				}
+			}
+		}
+
+		if (userFetch.ok) {
+			const user = await userFetch.json();
+			event.locals.user = user;
+		} else {
+			event.locals.user = null;
+			event.cookies.delete('auth', { path: '/' });
+			event.cookies.delete('refresh', { path: '/' });
+		}
+	} catch (error) {
+		console.error('Error in authHook:', error);
+		event.locals.user = null;
+		event.cookies.delete('auth', { path: '/' });
+		event.cookies.delete('refresh', { path: '/' });
+	}
+
+	return await resolve(event);
+};
+
+export const themeHook: Handle = async ({ event, resolve }) => {
+	let theme = event.url.searchParams.get('theme') || event.cookies.get('colortheme');
+
+	if (theme) {
+		return await resolve(event, {
+			transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`)
+		});
+	}
+
+	return await resolve(event);
+};
+
+export const handle = sequence(authHook, themeHook);

frontend/src/lib/components/AboutModal.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+	import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">About AdventureLog</h3>
+		<p class="py-1">
+			AdventureLog <a
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-primary-500 underline"
+				href={versionChangelog}>{appVersion}</a
+			>
+		</p>
+		<p class="py-1">
+			© {copyrightYear}
+			<a
+				href="https://github.com/seanmorley15"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-primary-500 underline">Sean Morley</a
+			>
+		</p>
+		<p class="py-1">Liscensed under the GPL-3.0 License.</p>
+		<p class="py-1">
+			<a
+				href="https://github.com/seanmorley15/AdventureLog"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-primary-500 underline">Source Code</a
+			>
+		</p>
+		<p class="py-1">Made with ❤️ in the United States.</p>
+		<div
+			class="modal-action items-center"
+			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+		></div>
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/components/AdventureCard.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { goto } from '$app/navigation';
+	import type { Adventure } from '$lib/types';
+	const dispatch = createEventDispatcher();
+
+	import Launch from '~icons/mdi/launch';
+	import FileDocumentEdit from '~icons/mdi/file-document-edit';
+	import TrashCan from '~icons/mdi/trash-can-outline';
+	import Calendar from '~icons/mdi/calendar';
+	import MapMarker from '~icons/mdi/map-marker';
+	import { addToast } from '$lib/toasts';
+
+	export let type: string;
+
+	export let adventure: Adventure;
+
+	async function deleteAdventure() {
+		let res = await fetch(`/adventures/${adventure.id}?/delete`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded'
+			}
+		});
+		if (res.ok) {
+			console.log('Adventure deleted');
+			addToast('info', 'Adventure deleted successfully!');
+			dispatch('delete', adventure.id);
+		} else {
+			console.log('Error deleting adventure');
+		}
+	}
+
+	function editAdventure() {
+		dispatch('edit', adventure);
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+	<figure>
+		<!-- svelte-ignore a11y-img-redundant-alt -->
+		{#if adventure.image && adventure.image !== ''}
+			<img
+				src={adventure.image}
+				alt="Adventure Image"
+				class="w-full h-48 object-cover"
+				crossorigin="anonymous"
+			/>
+		{:else}
+			<img
+				src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
+				alt="No image available"
+				class="w-full h-48 object-cover"
+			/>
+		{/if}
+	</figure>
+
+	<div class="card-body">
+		<h2 class="card-title break-words text-wrap">
+			{adventure.name}
+		</h2>
+		{#if adventure.location && adventure.location !== ''}
+			<div class="inline-flex items-center">
+				<MapMarker class="w-5 h-5 mr-1" />
+				<p class="ml-.5">{adventure.location}</p>
+			</div>
+		{/if}
+		{#if adventure.date && adventure.date !== ''}
+			<div class="inline-flex items-center">
+				<Calendar class="w-5 h-5 mr-1" />
+				<p>{new Date(adventure.date).toLocaleDateString()}</p>
+			</div>
+		{/if}
+		{#if adventure.activity_types && adventure.activity_types.length > 0}
+			<ul class="flex flex-wrap">
+				{#each adventure.activity_types as activity}
+					<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
+						{activity}
+					</div>
+				{/each}
+			</ul>
+		{/if}
+		<div class="card-actions justify-end mt-2">
+			{#if type == 'visited'}
+				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
+					><Launch class="w-6 h-6" /></button
+				>
+				<button class="btn btn-primary" on:click={editAdventure}>
+					<FileDocumentEdit class="w-6 h-6" />
+				</button>
+				<button class="btn btn-secondary" on:click={deleteAdventure}
+					><TrashCan class="w-6 h-6" /></button
+				>
+			{/if}
+			{#if type == 'planned'}
+				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
+					><Launch class="w-6 h-6" /></button
+				>
+				<button class="btn btn-primary" on:click={editAdventure}>
+					<FileDocumentEdit class="w-6 h-6" />
+				</button>
+				<button class="btn btn-secondary" on:click={deleteAdventure}
+					><TrashCan class="w-6 h-6" /></button
+				>
+			{/if}
+			{#if type == 'featured'}
+				<!-- TODO: option to add to visited or featured -->
+				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
+					><Launch class="w-6 h-6" /></button
+				>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/components/Avatar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	export let user: any;
+
+	let letter: string = user.first_name[0];
+
+	if (user && !user.first_name && user.username) {
+		letter = user.username[0];
+	}
+</script>
+
+<div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
+	<div class="avatar placeholder">
+		<div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
+			{#if user.profile_pic}
+				<img src={user.profile_pic} alt="" />
+			{:else}
+				<span class="text-2xl -mt-1">{letter}</span>
+			{/if}
+		</div>
+	</div>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<ul
+		tabindex="0"
+		class="dropdown-content z-[1] menu p-2 shadow bg-primary-content mt-2 rounded-box w-52"
+	>
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
+		<li><button on:click={() => goto('/profile')}>Profile</button></li>
+		<li><button on:click={() => goto('/visited')}>My Log</button></li>
+		<li><button on:click={() => goto('/settings')}>User Settings</button></li>
+		<form method="post">
+			<li><button formaction="/?/logout">Logout</button></li>
+		</form>
+	</ul>
+</div>

frontend/src/lib/components/CountryCard.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getFlag } from '$lib';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	export let countryName: string | undefined = undefined;
+	export let countryCode: string;
+
+	async function nav() {
+		goto(`/worldtravel/${countryCode}`);
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+	<figure>
+		<!-- svelte-ignore a11y-img-redundant-alt -->
+		<img
+			src={getFlag(240, countryCode) ||
+				'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
+			alt="No image available"
+			class="w-full h-48 object-cover"
+		/>
+	</figure>
+	<div class="card-body">
+		<h2 class="card-title overflow-ellipsis">{countryName}</h2>
+		<div class="card-actions justify-end">
+			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
+			<button class="btn btn-primary" on:click={nav}>Open</button>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/EditAdventure.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	export let adventureToEdit: Adventure;
+	import { createEventDispatcher } from 'svelte';
+	import type { Adventure } from '$lib/types';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	import { addToast } from '$lib/toasts';
+	let modal: HTMLDialogElement;
+
+	console.log(adventureToEdit.id);
+
+	let originalName = adventureToEdit.name;
+
+	let isPointModalOpen: boolean = false;
+
+	import MapMarker from '~icons/mdi/map-marker';
+	import Calendar from '~icons/mdi/calendar';
+	import Notebook from '~icons/mdi/notebook';
+	import ClipboardList from '~icons/mdi/clipboard-list';
+	import Image from '~icons/mdi/image';
+	import Star from '~icons/mdi/star';
+	import Attachment from '~icons/mdi/attachment';
+	import PointSelectionModal from './PointSelectionModal.svelte';
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function submit() {}
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			close();
+		}
+	}
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		const form = event.target as HTMLFormElement;
+		const formData = new FormData(form);
+
+		const response = await fetch(form.action, {
+			method: form.method,
+			body: formData
+		});
+
+		if (response.ok) {
+			const result = await response.json();
+			const data = JSON.parse(result.data);
+			console.log(data);
+
+			if (data) {
+				if (typeof adventureToEdit.activity_types === 'string') {
+					adventureToEdit.activity_types = (adventureToEdit.activity_types as string)
+						.split(',')
+						.map((activity_type) => activity_type.trim())
+						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
+
+					// Remove duplicates
+					adventureToEdit.activity_types = Array.from(new Set(adventureToEdit.activity_types));
+				}
+
+				adventureToEdit.image = data[1];
+				adventureToEdit.link = data[2];
+				addToast('success', 'Adventure edited successfully!');
+				dispatch('saveEdit', adventureToEdit);
+				close();
+			} else {
+				addToast('warning', 'Error editing adventure');
+				console.log('Error editing adventure');
+			}
+		}
+	}
+	function setLongLat(event: CustomEvent<[number, number]>) {
+		console.log(event.detail);
+		adventureToEdit.latitude = event.detail[1];
+		adventureToEdit.longitude = event.detail[0];
+		isPointModalOpen = false;
+	}
+</script>
+
+{#if isPointModalOpen}
+	<PointSelectionModal
+		longitude={adventureToEdit.longitude}
+		latitude={adventureToEdit.latitude}
+		on:close={() => (isPointModalOpen = false)}
+		on:submit={setLongLat}
+	/>
+{/if}
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">Edit Adventure: {originalName}</h3>
+		<div
+			class="modal-action items-center"
+			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+		>
+			<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/adventures?/edit">
+				<div class="mb-2">
+					<input
+						type="text"
+						id="adventureId"
+						name="adventureId"
+						hidden
+						readonly
+						bind:value={adventureToEdit.id}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<input
+						type="text"
+						id="type"
+						name="type"
+						hidden
+						readonly
+						bind:value={adventureToEdit.type}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<label for="name">Name</label><br />
+					<input
+						type="text"
+						name="name"
+						id="name"
+						bind:value={adventureToEdit.name}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+					><br />
+					<input
+						type="text"
+						id="location"
+						name="location"
+						bind:value={adventureToEdit.location}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
+					<input
+						type="date"
+						id="date"
+						name="date"
+						bind:value={adventureToEdit.date}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+					><br />
+					<div class="flex">
+						<input
+							type="text"
+							id="description"
+							name="description"
+							bind:value={adventureToEdit.description}
+							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+						/>
+						<!-- <button
+                class="btn btn-neutral ml-2"
+                type="button"
+                on:click={generate}
+                ><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
+                ></iconify-icon>Generate Description</button
+              > -->
+					</div>
+				</div>
+				<div class="mb-2">
+					<label for="activityTypes"
+						>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+					><br />
+					<input
+						type="text"
+						id="activity_types"
+						name="activity_types"
+						bind:value={adventureToEdit.activity_types}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="image">Image <Image class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
+					<input
+						type="file"
+						id="image"
+						name="image"
+						bind:value={adventureToEdit.image}
+						class="file-input file-input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
+					/>
+					<input
+						type="url"
+						id="link"
+						name="link"
+						bind:value={adventureToEdit.link}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="rating">Rating <Star class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
+					<input
+						type="number"
+						min="0"
+						max="5"
+						name="rating"
+						id="rating"
+						bind:value={adventureToEdit.rating}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<input
+					type="text"
+					id="latitude"
+					hidden
+					name="latitude"
+					bind:value={adventureToEdit.latitude}
+					class="input input-bordered w-full max-w-xs mt-1"
+				/>
+				<input
+					type="text"
+					id="longitude"
+					hidden
+					name="longitude"
+					bind:value={adventureToEdit.longitude}
+					class="input input-bordered w-full max-w-xs mt-1"
+				/>
+				<div class="mb-2">
+					<button
+						type="button"
+						class="btn btn-secondary"
+						on:click={() => (isPointModalOpen = true)}
+					>
+						{adventureToEdit.latitude && adventureToEdit.longitude ? 'Change' : 'Select'}
+						Location</button
+					>
+				</div>
+
+				<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</button>
+				<!-- if there is a button in form, it will close the modal -->
+				<button class="btn mt-4" on:click={close}>Close</button>
+			</form>
+			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
+		</div>
+	</div>
+</dialog>

frontend/src/lib/components/Navbar.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	export let data: any;
+	import type { SubmitFunction } from '@sveltejs/kit';
+
+	import DotsHorizontal from '~icons/mdi/dots-horizontal';
+	import WeatherSunny from '~icons/mdi/weather-sunny';
+	import WeatherNight from '~icons/mdi/weather-night';
+	import Forest from '~icons/mdi/forest';
+	import Flower from '~icons/mdi/flower';
+	import Water from '~icons/mdi/water';
+	import AboutModal from './AboutModal.svelte';
+	import Avatar from './Avatar.svelte';
+
+	let isAboutModalOpen: boolean = false;
+
+	const submitUpdateTheme: SubmitFunction = ({ action }) => {
+		const theme = action.searchParams.get('theme');
+		console.log('theme', theme);
+		if (theme) {
+			document.documentElement.setAttribute('data-theme', theme);
+		}
+	};
+</script>
+
+{#if isAboutModalOpen}
+	<AboutModal on:close={() => (isAboutModalOpen = false)} />
+{/if}
+
+<div class="navbar bg-base-100">
+	<div class="navbar-start">
+		<div class="dropdown">
+			<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					><path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h8m-8 6h16"
+					/></svg
+				>
+			</div>
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<ul
+				tabindex="0"
+				class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 gap-2"
+			>
+				{#if data.user}
+					<li>
+						<button on:click={() => goto('/visited')}>Visited</button>
+					</li>
+					<li>
+						<button on:click={() => goto('/planner')}>Planner</button>
+					</li>
+					<li>
+						<button on:click={() => goto('/worldtravel')}>World Travel</button>
+					</li>
+					<li>
+						<button on:click={() => goto('/featured')}>Featured</button>
+					</li>
+				{/if}
+
+				{#if !data.user}
+					<li>
+						<button class="btn btn-primary" on:click={() => goto('/login')}>Login</button>
+					</li>
+					<li>
+						<button class="btn btn-primary" on:click={() => goto('/signup')}>Signup</button>
+					</li>
+				{/if}
+			</ul>
+		</div>
+		<a class="btn btn-ghost text-xl" href="/"
+			>AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-8" /></a
+		>
+	</div>
+	<div class="navbar-center hidden lg:flex">
+		<ul class="menu menu-horizontal px-1 gap-2">
+			{#if data.user}
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/visited')}>Visited</button>
+				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/planner')}>Planner</button>
+				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button
+					>
+				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/featured')}>Featured</button>
+				</li>
+			{/if}
+
+			{#if !data.user}
+				<li>
+					<button class="btn btn-primary" on:click={() => goto('/login')}>Login</button>
+				</li>
+				<li>
+					<button class="btn btn-primary" on:click={() => goto('/signup')}>Signup</button>
+				</li>
+			{/if}
+		</ul>
+	</div>
+	<div class="navbar-end">
+		{#if data.user}
+			<Avatar user={data.user} />
+		{/if}
+		<div class="dropdown dropdown-bottom dropdown-end">
+			<div tabindex="0" role="button" class="btn m-1 ml-4">
+				<DotsHorizontal class="w-6 h-6" />
+			</div>
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+				<button class="btn" on:click={() => (isAboutModalOpen = true)}>About AdventureLog</button>
+				<p class="font-bold m-4 text-lg">Theme Selection</p>
+				<form method="POST" use:enhance={submitUpdateTheme}>
+					<li>
+						<button formaction="/?/setTheme&theme=light"
+							>Light<WeatherSunny class="w-6 h-6" />
+						</button>
+					</li>
+					<li>
+						<button formaction="/?/setTheme&theme=dark">Dark<WeatherNight class="w-6 h-6" /></button
+						>
+					</li>
+					<li>
+						<button formaction="/?/setTheme&theme=night"
+							>Night<WeatherNight class="w-6 h-6" /></button
+						>
+					</li>
+					<li>
+						<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
+						<button formaction="/?/setTheme&theme=garden">Garden<Flower class="w-6 h-6" /></button>
+						<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
+					</li>
+				</form>
+			</ul>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/NewAdventure.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { Adventure, Point } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { enhance } from '$app/forms';
+	import { addToast } from '$lib/toasts';
+	import PointSelectionModal from './PointSelectionModal.svelte';
+
+	export let type: string = 'visited';
+
+	let newAdventure: Adventure = {
+		id: NaN,
+		type: type,
+		name: '',
+		location: '',
+		date: '',
+		description: '',
+		activity_types: [],
+		rating: NaN,
+		link: '',
+		image: '',
+		user_id: NaN,
+		latitude: null,
+		longitude: null,
+		is_public: false
+	};
+
+	let image: File;
+
+	let isPointModalOpen: boolean = false;
+
+	const dispatch = createEventDispatcher();
+	let modal: HTMLDialogElement;
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			close();
+		}
+	}
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		const form = event.target as HTMLFormElement;
+		const formData = new FormData(form);
+
+		const response = await fetch(form.action, {
+			method: form.method,
+			body: formData
+		});
+
+		if (response.ok) {
+			const result = await response.json();
+			const data = JSON.parse(result.data); // Parsing the JSON string in the data field
+
+			if (data[1] !== undefined) {
+				// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
+				console.log(data);
+				let id = data[1];
+				let user_id = data[2];
+				let image_url = data[3];
+				let link = data[4];
+				newAdventure.image = image_url;
+				newAdventure.id = id;
+				newAdventure.user_id = user_id;
+				newAdventure.link = link;
+				// turn the activity_types string into an array by splitting it at the commas
+				if (typeof newAdventure.activity_types === 'string') {
+					newAdventure.activity_types = (newAdventure.activity_types as string)
+						.split(',')
+						.map((activity_type) => activity_type.trim())
+						.filter((activity_type) => activity_type !== '' && activity_type !== ',');
+
+					// Remove duplicates
+					newAdventure.activity_types = Array.from(new Set(newAdventure.activity_types));
+				}
+				console.log(newAdventure);
+				dispatch('create', newAdventure);
+				addToast('success', 'Adventure created successfully!');
+				close();
+			}
+		}
+	}
+
+	function setLongLat(event: CustomEvent<[number, number]>) {
+		console.log(event.detail);
+		newAdventure.latitude = event.detail[1];
+		newAdventure.longitude = event.detail[0];
+		isPointModalOpen = false;
+	}
+</script>
+
+{#if isPointModalOpen}
+	<PointSelectionModal on:close={() => (isPointModalOpen = false)} on:submit={setLongLat} />
+{/if}
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">New {type} Adventure</h3>
+		<div
+			class="modal-action items-center"
+			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+		>
+			<form
+				method="post"
+				style="width: 100%;"
+				on:submit={handleSubmit}
+				action="/adventures?/create"
+			>
+				<input
+					type="text"
+					name="type"
+					id="type"
+					value={type}
+					hidden
+					readonly
+					class="input input-bordered w-full max-w-xs mt-1"
+				/>
+				<div class="mb-2">
+					<label for="name">Name</label><br />
+					<input
+						type="text"
+						id="name"
+						name="name"
+						bind:value={newAdventure.name}
+						class="input input-bordered w-full max-w-xs mt-1"
+						required
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="location"
+						>Location<iconify-icon icon="mdi:map-marker" class="text-lg ml-0.5 -mb-0.5"
+						></iconify-icon></label
+					><br />
+					<input
+						type="text"
+						id="location"
+						name="location"
+						bind:value={newAdventure.location}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="date"
+						>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
+						></iconify-icon></label
+					><br />
+					<input
+						type="date"
+						id="date"
+						name="date"
+						bind:value={newAdventure.date}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="description"
+						>Description<iconify-icon icon="mdi:notebook" class="text-lg ml-1 -mb-0.5"
+						></iconify-icon></label
+					><br />
+					<div class="flex">
+						<input
+							type="text"
+							id="description"
+							name="description"
+							bind:value={newAdventure.description}
+							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+						/>
+					</div>
+				</div>
+				<div class="mb-2">
+					<label for="activity_types"
+						>Activity Types <iconify-icon icon="mdi:clipboard-list" class="text-xl -mb-1"
+						></iconify-icon></label
+					><br />
+					<input
+						type="text"
+						name="activity_types"
+						id="activity_types"
+						bind:value={newAdventure.activity_types}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="rating"
+						>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+					><br />
+					<input
+						type="number"
+						min="0"
+						max="5"
+						bind:value={newAdventure.rating}
+						id="rating"
+						name="rating"
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="link"
+						>Link <iconify-icon icon="mdi:link" class="text-xl -mb-1"></iconify-icon></label
+					><br />
+					<input
+						type="text"
+						id="link"
+						name="link"
+						bind:value={newAdventure.link}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="image"
+						>Image <iconify-icon icon="mdi:image" class="text-xl -mb-1"></iconify-icon></label
+					><br />
+					<input
+						type="file"
+						id="image"
+						name="image"
+						bind:value={image}
+						class="file-input file-input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<input
+						type="text"
+						id="latitude"
+						hidden
+						name="latitude"
+						bind:value={newAdventure.latitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<input
+						type="text"
+						id="longitude"
+						name="longitude"
+						hidden
+						bind:value={newAdventure.longitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<div class="mb-2">
+						<button
+							type="button"
+							class="btn btn-secondary"
+							on:click={() => (isPointModalOpen = true)}>Define Location</button
+						>
+					</div>
+					<button type="submit" class="btn btn-primary mr-4 mt-4">Create</button>
+					<button type="button" class="btn mt-4" on:click={close}>Close</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</dialog>

frontend/src/lib/components/PointSelectionModal.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	// @ts-nocheck
+	import type { Point } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+
+	let markers: Point[] = [];
+
+	export let longitude: number | null = null;
+	export let latitude: number | null = null;
+
+	function addMarker(e: CustomEvent<MouseEvent>) {
+		markers = [];
+		markers = [...markers, { lngLat: e.detail.lngLat, name: 'Marker 1' }];
+		console.log(markers);
+	}
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+		if (longitude && latitude) {
+			markers = [{ lngLat: { lng: longitude, lat: latitude }, name: 'Marker 1' }];
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+
+	function submit() {
+		if (markers.length === 0) {
+			alert('Please select a point on the map');
+			return;
+		}
+		let coordArray: [number, number] = [markers[0].lngLat.lng, markers[0].lngLat.lat];
+		console.log(coordArray);
+		dispatch('submit', coordArray);
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
+		<MapLibre
+			style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+			class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+			standardControls
+		>
+			<!-- MapEvents gives you access to map events even from other components inside the map,
+  where you might not have access to the top-level `MapLibre` component. In this case
+  it would also work to just use on:click on the MapLibre component itself. -->
+			<MapEvents on:click={addMarker} />
+
+			{#each markers as marker}
+				<DefaultMarker lngLat={marker.lngLat} />
+			{/each}
+		</MapLibre>
+
+		<div class="mb-4 mt-4"></div>
+		<button class="btn btn-primary" on:click={submit}>Submit</button>
+		<button class="btn btn-neutral" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/components/RegionCard.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { addToast } from '$lib/toasts';
+	import type { Region, VisitedRegion } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	export let region: Region;
+	export let visited: boolean;
+
+	export let visit_id: number | undefined | null;
+
+	console.log(visit_id);
+
+	async function markVisited() {
+		let res = await fetch(`/worldtravel?/markVisited`, {
+			method: 'POST',
+			body: JSON.stringify({ regionId: region.id })
+		});
+		if (res.ok) {
+			// visited = true;
+			const result = await res.json();
+			const data = JSON.parse(result.data);
+			if (data[1] !== undefined) {
+				console.log('New adventure created with id:', data[3]);
+				let visit_id = data[3];
+				let region_id = data[5];
+				let user_id = data[4];
+
+				let newVisit: VisitedRegion = {
+					id: visit_id,
+					region: region_id,
+					user_id: user_id
+				};
+				addToast('success', `Visit to ${region.name} marked`);
+				dispatch('visit', newVisit);
+			}
+		} else {
+			console.error('Failed to mark region as visited');
+		}
+	}
+	async function removeVisit() {
+		let res = await fetch(`/worldtravel?/removeVisited`, {
+			method: 'POST',
+			body: JSON.stringify({ visitId: visit_id })
+		});
+		if (res.ok) {
+			visited = false;
+			addToast('info', `Visit to ${region.name} removed`);
+		} else {
+			console.error('Failed to remove visit');
+		}
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+	<div class="card-body">
+		<h2 class="card-title overflow-ellipsis">{region.name}</h2>
+		<p>{region.id}</p>
+		<div class="card-actions justify-end">
+			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
+			{#if !visited}
+				<button class="btn btn-primary" on:click={markVisited}>Mark Visited</button>
+			{/if}
+			{#if visited}
+				<button class="btn btn-warning" on:click={removeVisit}>Remove</button>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/components/Toast.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { toasts } from '$lib/toasts';
+
+	let toastList: any[] = [];
+
+	toasts.subscribe((value) => {
+		toastList = value;
+		console.log(toastList);
+	});
+</script>
+
+<div class="toast toast-top toast-end z-50 min-w-20">
+	{#each toastList as { type, message, id, duration }}
+		<div class="alert alert-{type}">
+			<span>{message}</span>
+		</div>
+	{/each}
+</div>

frontend/src/lib/config.ts

@@ -0,0 +1,4 @@
+export let appVersion = 'Web v0.3.0';
+export let versionChangelog = 'https://github.com/seanmorley15/AdventureLog/releases/tag/v0.3.0';
+export let appTitle = 'AdventureLog';
+export let copyrightYear = '2024';

frontend/src/lib/index.server.ts

@@ -0,0 +1,36 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const fetchCSRFToken = async () => {
+	const csrfTokenFetch = await fetch(`${serverEndpoint}/csrf/`);
+	if (csrfTokenFetch.ok) {
+		const csrfToken = await csrfTokenFetch.json();
+		return csrfToken.csrfToken;
+	} else {
+		return null;
+	}
+};
+
+export const tryRefreshToken = async (refreshToken: string) => {
+	const csrfToken = await fetchCSRFToken();
+	const refreshFetch = await fetch(`${serverEndpoint}/auth/token/refresh/`, {
+		method: 'POST',
+		headers: {
+			'X-CSRFToken': csrfToken,
+			'Content-Type': 'application/json' // Corrected header name
+		},
+		body: JSON.stringify({ refresh: refreshToken })
+	});
+
+	if (refreshFetch.ok) {
+		const refresh = await refreshFetch.json();
+		const token = `auth=${refresh.access}`;
+		return token;
+		// event.cookies.set('auth', `auth=${refresh.access}`, {
+		// 	httpOnly: true,
+		// 	sameSite: 'lax',
+		// 	expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+		// 	path: '/'
+		// });
+	}
+};

frontend/src/lib/index.ts

@@ -0,0 +1,21 @@
+import inspirationalQuotes from './json/quotes.json';
+
+export function getRandomQuote() {
+	const quotes = inspirationalQuotes.quotes;
+	const randomIndex = Math.floor(Math.random() * quotes.length);
+	let quoteString = quotes[randomIndex].quote;
+	let authorString = quotes[randomIndex].author;
+	return '"' + quoteString + '" - ' + authorString;
+}
+
+export function getFlag(size: number, country: string) {
+	return `https://flagcdn.com/h${size}/${country}.png`;
+}
+
+export function checkLink(link: string) {
+	if (link.startsWith('http://') || (link.startsWith('https://') && link.indexOf('.') !== -1)) {
+		return link;
+	} else {
+		return 'http://' + link + '.com';
+	}
+}

frontend/src/lib/json/quotes.json

@@ -0,0 +1,56 @@
+{
+	"quotes": [
+		{
+			"quote": "A journey of a thousand miles begins with a single step.",
+			"author": "Lao Tzu"
+		},
+		{
+			"quote": "If we were meant to stay in one place, we’d have roots instead of feet.",
+			"author": "Rachel Wolchin"
+		},
+		{
+			"quote": "Adventure isn’t hanging on a rope off the side of a mountain. Adventure is an attitude that we must apply to the day to day obstacles in life.",
+			"author": "John Amatt"
+		},
+		{
+			"quote": "Wherever you go, go with all your heart.",
+			"author": "Confucius"
+		},
+		{
+			"quote": "Until you step into the unknown, you don’t know what you’re made of.",
+			"author": "Roy T. Bennett"
+		},
+		{
+			"quote": "You can’t control the past, but you can control where you go next.",
+			"author": "Kirsten Hubbard"
+		},
+		{
+			"quote": "Life isn’t about finding yourself. Life is about creating yourself.",
+			"author": "George Bernard Shaw"
+		},
+		{
+			"quote": "It is not the mountain we conquer, but ourselves.",
+			"author": "Edmund Hillary"
+		},
+		{
+			"quote": "I am not the same, having seen the moon shine on the other side of the world.",
+			"author": "Mary Anne Radmacher"
+		},
+		{
+			"quote": "A mind that is stretched by a new experience can never go back to its old dimensions.",
+			"author": "Oliver Wendell Holmes"
+		},
+		{
+			"quote": "Life is short and the world is wide.",
+			"author": "Simon Raven"
+		},
+		{
+			"quote": "Only those who risk going too far can possibly find out how far they can go.",
+			"author": "T.S. Eliot"
+		},
+		{
+			"quote": "Believe you can and you're halfway there.",
+			"author": "Theodore Roosevelt"
+		}
+	]
+}

frontend/src/lib/toasts.ts

@@ -0,0 +1,19 @@
+import { writable } from 'svelte/store';
+
+export const toasts = writable<{ type: any; message: any; id: number }[]>([]);
+
+export const addToast = (type: any, message: any, duration = 5000) => {
+	const id = Date.now();
+	toasts.update((currentToasts) => {
+		return [...currentToasts, { type, message, id, duration }];
+	});
+	setTimeout(() => {
+		removeToast(id);
+	}, duration);
+};
+
+export const removeToast = (id: number) => {
+	toasts.update((currentToasts) => {
+		return currentToasts.filter((toast) => toast.id !== id);
+	});
+};

frontend/src/lib/types.ts

@@ -0,0 +1,55 @@
+export type User = {
+	pk: number;
+	username: string;
+	email: string | null;
+	first_name: string | null;
+	last_name: string | null;
+	date_joined: string | null;
+	is_staff: boolean;
+	profile_pic: string | null;
+};
+
+export type Adventure = {
+	id: number;
+	user_id: number;
+	type: string;
+	name: string;
+	location?: string | null;
+	activity_types?: string[] | null;
+	description?: string | null;
+	rating?: number | null;
+	link?: string | null;
+	image?: string | null;
+	date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
+	trip_id?: number | null;
+	latitude: number | null;
+	longitude: number | null;
+	is_public: boolean;
+};
+
+export type Country = {
+	id: number;
+	name: string;
+	country_code: string;
+	continent: string;
+};
+
+export type Region = {
+	id: number;
+	name: string;
+	country_id: number;
+};
+
+export type VisitedRegion = {
+	id: number;
+	region: number;
+	user_id: number;
+};
+
+export type Point = {
+	lngLat: {
+		lat: number;
+		lng: number;
+	};
+	name: string;
+};

frontend/src/routes/+layout.server.ts

@@ -0,0 +1,12 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async (event) => {
+	if (event.locals.user) {
+		return {
+			user: event.locals.user
+		};
+	}
+	return {
+		user: null
+	};
+};

frontend/src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Navbar from '$lib/components/Navbar.svelte';
+	import Toast from '$lib/components/Toast.svelte';
+	import 'tailwindcss/tailwind.css';
+	export let data;
+</script>
+
+<Navbar {data} />
+<Toast />
+
+<slot></slot>

frontend/src/routes/+page.server.ts

@@ -0,0 +1,44 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import { redirect, type Actions } from '@sveltejs/kit';
+
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const actions: Actions = {
+	setTheme: async ({ url, cookies }) => {
+		const theme = url.searchParams.get('theme');
+		// change the theme only if it is one of the allowed themes
+		if (
+			theme &&
+			['light', 'dark', 'night', 'retro', 'forest', 'aqua', 'forest', 'garden', 'emerald'].includes(
+				theme
+			)
+		) {
+			cookies.set('colortheme', theme, {
+				path: '/',
+				maxAge: 60 * 60 * 24 * 365
+			});
+		}
+	},
+	logout: async ({ cookies }: { cookies: any }) => {
+		const cookie = cookies.get('auth') || null;
+
+		if (!cookie) {
+			return;
+		}
+
+		const res = await fetch(`${serverEndpoint}/auth/logout/`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Cookie: cookies.get('auth')
+			}
+		});
+		if (res.ok) {
+			cookies.delete('auth', { path: '/' });
+			cookies.delete('refresh', { path: '/' });
+			return redirect(302, '/login');
+		} else {
+			return redirect(302, '/');
+		}
+	}
+};

frontend/src/routes/+page.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	import AdventureOverlook from '$lib/assets/AdventureOverlook.webp';
+	import MapWithPins from '$lib/assets/MapWithPins.webp';
+
+	export let data;
+</script>
+
+<section class="flex items-center justify-center w-full py-12 md:py-24 lg:py-32">
+	<div class="container px-4 md:px-6">
+		<div class="grid gap-6 lg:grid-cols-[1fr_550px] lg:gap-12 xl:grid-cols-[1fr_650px]">
+			<div class="flex flex-col justify-center space-y-4">
+				<div class="space-y-2">
+					{#if data.user}
+						{#if data.user.first_name && data.user.first_name !== null}
+							<h1
+								class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pb-4"
+							>
+								{data.user.first_name.charAt(0).toUpperCase() + data.user.first_name.slice(1)},
+								Discover the World's Most Thrilling Adventures
+							</h1>
+						{:else}
+							<h1
+								class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pb-4"
+							>
+								Discover the World's Most Thrilling Adventures
+							</h1>
+						{/if}
+					{:else}
+						<h1
+							class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pb-4"
+						>
+							Discover the World's Most Thrilling Adventures
+						</h1>
+					{/if}
+					<p class="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400">
+						Discover and plan your next epic adventure with our cutting-edge travel app. Explore
+						breathtaking destinations, create custom itineraries, and stay connected on the go.
+					</p>
+				</div>
+				<div class="flex flex-col gap-2 min-[400px]:flex-row">
+					<button on:click={() => goto('/visited')} class="btn btn-primary">
+						Go To AdventureLog
+					</button>
+				</div>
+			</div>
+			<img
+				src={AdventureOverlook}
+				width="550"
+				height="550"
+				alt="Hero"
+				class="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full lg:order-last"
+			/>
+		</div>
+	</div>
+</section>
+<section
+	class="flex items-center justify-center w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800"
+>
+	<div class="container px-4 md:px-6">
+		<div class="flex flex-col items-center justify-center space-y-4 text-center">
+			<div class="space-y-2">
+				<div
+					class="inline-block rounded-lg bg-gray-100 px-3 py-1 text-md dark:bg-gray-800 dark:text-gray-400"
+				>
+					Key Features
+				</div>
+				<h2
+					class="text-3xl font-bold tracking-tighter sm:text-5xl bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
+				>
+					Discover, Plan, and Explore with Ease
+				</h2>
+				<p
+					class="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400"
+				>
+					Our adventure travel app is designed to simplify your journey, providing you with the
+					tools and resources to plan, pack, and navigate your next epic adventure.
+				</p>
+			</div>
+		</div>
+		<div class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
+			<!-- svelte-ignore a11y-img-redundant-alt -->
+			<img
+				src={MapWithPins}
+				width="550"
+				height="310"
+				alt="Image"
+				class="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
+			/>
+			<div class="flex flex-col justify-center space-y-4">
+				<ul class="grid gap-6">
+					<li>
+						<div class="grid gap-1">
+							<h3 class="text-xl font-bold dark:text-gray-400">Trip Planning</h3>
+							<p class="text-gray-500 dark:text-gray-400">
+								Easily create custom itineraries and get real-time updates on your trip.
+							</p>
+						</div>
+					</li>
+					<li>
+						<div class="grid gap-1">
+							<h3 class="text-xl font-bold dark:text-gray-400">Packing Lists</h3>
+							<p class="text-gray-500 dark:text-gray-400">
+								Never forget a thing with our comprehensive packing lists.
+							</p>
+						</div>
+					</li>
+					<li>
+						<div class="grid gap-1">
+							<h3 class="text-xl font-bold dark:text-gray-400">Destination Guides</h3>
+							<p class="text-gray-500 dark:text-gray-400">
+								Discover the best attractions, activities, and hidden gems in your destination.
+							</p>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</section>
+
+<svelte:head>
+	<title>Home | AdventureLog</title>
+	<meta name="description" content="AdventureLog is a platform to log your adventures." />
+</svelte:head>

frontend/src/routes/add/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	// @ts-nocheck
+
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	function addMarker(e: CustomEvent<MapMouseEvent>) {
+		markers = [];
+		markers = [...markers, { lngLat: e.detail.lngLat }];
+		console.log(markers);
+	}
+	let markers = [];
+</script>
+
+<MapLibre
+	style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+	class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+	standardControls
+>
+	<!-- MapEvents gives you access to map events even from other components inside the map,
+  where you might not have access to the top-level `MapLibre` component. In this case
+  it would also work to just use on:click on the MapLibre component itself. -->
+	<MapEvents on:click={addMarker} />
+
+	{#each markers as marker}
+		<DefaultMarker lngLat={marker.lngLat} />
+	{/each}
+</MapLibre>

frontend/src/routes/adventures/+page.server.ts

@@ -0,0 +1,312 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+import type { Actions } from '@sveltejs/kit';
+import { fetchCSRFToken, tryRefreshToken } from '$lib/index.server';
+import { checkLink } from '$lib';
+
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const actions: Actions = {
+	create: async (event) => {
+		const formData = await event.request.formData();
+
+		const type = formData.get('type') as string;
+		const name = formData.get('name') as string;
+		const location = formData.get('location') as string | null;
+		let date = (formData.get('date') as string | null) ?? null;
+		const description = formData.get('description') as string | null;
+		const activity_types = formData.get('activity_types')
+			? (formData.get('activity_types') as string).split(',')
+			: null;
+		const rating = formData.get('rating') ? Number(formData.get('rating')) : null;
+		let link = formData.get('link') as string | null;
+		let latitude = formData.get('latitude') as string | null;
+		let longitude = formData.get('longitude') as string | null;
+
+		// check if latitude and longitude are valid
+		if (latitude && longitude) {
+			if (isNaN(Number(latitude)) || isNaN(Number(longitude))) {
+				return {
+					status: 400,
+					body: { error: 'Invalid latitude or longitude' }
+				};
+			}
+		}
+
+		// round latitude and longitude to 6 decimal places
+		if (latitude) {
+			latitude = Number(latitude).toFixed(6);
+		}
+		if (longitude) {
+			longitude = Number(longitude).toFixed(6);
+		}
+
+		const image = formData.get('image') as File;
+
+		if (!type || !name) {
+			return {
+				status: 400,
+				body: { error: 'Missing required fields' }
+			};
+		}
+
+		if (date == null || date == '') {
+			date = null;
+		}
+
+		if (link) {
+			link = checkLink(link);
+		}
+
+		const formDataToSend = new FormData();
+		formDataToSend.append('type', type);
+		formDataToSend.append('name', name);
+		formDataToSend.append('location', location || '');
+		formDataToSend.append('date', date || '');
+		formDataToSend.append('description', description || '');
+		formDataToSend.append('latitude', latitude || '');
+		formDataToSend.append('longitude', longitude || '');
+		if (activity_types) {
+			// Filter out empty and duplicate activity types, then trim each activity type
+			const cleanedActivityTypes = Array.from(
+				new Set(
+					activity_types
+						.map((activity_type) => activity_type.trim())
+						.filter((activity_type) => activity_type !== '' && activity_type !== ',')
+				)
+			);
+
+			// Append each cleaned activity type to formDataToSend
+			cleanedActivityTypes.forEach((activity_type) => {
+				formDataToSend.append('activity_types', activity_type);
+			});
+		}
+		formDataToSend.append('rating', rating ? rating.toString() : '');
+		formDataToSend.append('link', link || '');
+		formDataToSend.append('image', image);
+
+		let auth = event.cookies.get('auth');
+
+		if (!auth) {
+			const refresh = event.cookies.get('refresh');
+			if (!refresh) {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+			let res = await tryRefreshToken(refresh);
+			if (res) {
+				auth = res;
+				event.cookies.set('auth', auth, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+		}
+
+		if (!auth) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		const csrfToken = await fetchCSRFToken();
+
+		if (!csrfToken) {
+			return {
+				status: 500,
+				body: { message: 'Failed to fetch CSRF token' }
+			};
+		}
+
+		const res = await fetch(`${serverEndpoint}/api/adventures/`, {
+			method: 'POST',
+			headers: {
+				'X-CSRFToken': csrfToken,
+				Cookie: auth
+			},
+			body: formDataToSend
+		});
+
+		let new_id = await res.json();
+
+		if (!res.ok) {
+			const errorBody = await res.json();
+			return {
+				status: res.status,
+				body: { error: errorBody }
+			};
+		}
+
+		let id = new_id.id;
+		let user_id = new_id.user_id;
+		let image_url = new_id.image;
+		let link_url = new_id.link;
+
+		return { id, user_id, image_url, link };
+	},
+	edit: async (event) => {
+		const formData = await event.request.formData();
+
+		const adventureId = formData.get('adventureId') as string;
+		const type = formData.get('type') as string;
+		const name = formData.get('name') as string;
+		const location = formData.get('location') as string | null;
+		let date = (formData.get('date') as string | null) ?? null;
+		const description = formData.get('description') as string | null;
+		let activity_types = formData.get('activity_types')
+			? (formData.get('activity_types') as string).split(',')
+			: null;
+		const rating = formData.get('rating') ? Number(formData.get('rating')) : null;
+		let link = formData.get('link') as string | null;
+		let latitude = formData.get('latitude') as string | null;
+		let longitude = formData.get('longitude') as string | null;
+
+		// check if latitude and longitude are valid
+		if (latitude && longitude) {
+			if (isNaN(Number(latitude)) || isNaN(Number(longitude))) {
+				return {
+					status: 400,
+					body: { error: 'Invalid latitude or longitude' }
+				};
+			}
+		}
+
+		// round latitude and longitude to 6 decimal places
+		if (latitude) {
+			latitude = Number(latitude).toFixed(6);
+		}
+		if (longitude) {
+			longitude = Number(longitude).toFixed(6);
+		}
+
+		const image = formData.get('image') as File;
+
+		console.log(activity_types);
+
+		if (!type || !name) {
+			return {
+				status: 400,
+				body: { error: 'Missing required fields' }
+			};
+		}
+
+		if (date == null || date == '') {
+			date = null;
+		}
+
+		if (link) {
+			link = checkLink(link);
+		}
+
+		const formDataToSend = new FormData();
+		formDataToSend.append('type', type);
+		formDataToSend.append('name', name);
+		formDataToSend.append('location', location || '');
+		formDataToSend.append('date', date || '');
+		formDataToSend.append('description', description || '');
+		formDataToSend.append('latitude', latitude || '');
+		formDataToSend.append('longitude', longitude || '');
+		if (activity_types) {
+			// Filter out empty and duplicate activity types, then trim each activity type
+			const cleanedActivityTypes = Array.from(
+				new Set(
+					activity_types
+						.map((activity_type) => activity_type.trim())
+						.filter((activity_type) => activity_type !== '' && activity_type !== ',')
+				)
+			);
+
+			// Append each cleaned activity type to formDataToSend
+			cleanedActivityTypes.forEach((activity_type) => {
+				formDataToSend.append('activity_types', activity_type);
+			});
+		}
+		formDataToSend.append('rating', rating ? rating.toString() : '');
+		formDataToSend.append('link', link || '');
+
+		if (image && image.size > 0) {
+			formDataToSend.append('image', image);
+		}
+
+		let auth = event.cookies.get('auth');
+
+		if (!auth) {
+			const refresh = event.cookies.get('refresh');
+			if (!refresh) {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+			let res = await tryRefreshToken(refresh);
+			if (res) {
+				auth = res;
+				event.cookies.set('auth', auth, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+		}
+
+		if (!auth) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		const csrfToken = await fetchCSRFToken();
+
+		if (!csrfToken) {
+			return {
+				status: 500,
+				body: { message: 'Failed to fetch CSRF token' }
+			};
+		}
+
+		const res = await fetch(`${serverEndpoint}/api/adventures/${adventureId}/`, {
+			method: 'PATCH',
+			headers: {
+				'X-CSRFToken': csrfToken,
+				Cookie: auth
+			},
+			body: formDataToSend
+		});
+
+		if (!res.ok) {
+			const errorBody = await res.json();
+			return {
+				status: res.status,
+				body: { error: errorBody }
+			};
+		}
+
+		let adventure = await res.json();
+
+		let image_url = adventure.image;
+		let link_url = adventure.link;
+		return { image_url, link_url };
+	}
+};

frontend/src/routes/adventures/[id]/+page.server.ts

@@ -0,0 +1,99 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		const id = event.params as { id: string };
+		let request = await fetch(`${endpoint}/api/adventures/${id.id}/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!request.ok) {
+			console.error('Failed to fetch adventure ' + id.id);
+			return {
+				props: {
+					adventure: null
+				}
+			};
+		} else {
+			let adventure = (await request.json()) as Adventure;
+			if (!adventure.is_public && adventure.user_id !== event.locals.user.pk) {
+				return redirect(302, '/');
+			}
+			return {
+				props: {
+					adventure
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;
+
+import type { Actions } from '@sveltejs/kit';
+import { tryRefreshToken } from '$lib/index.server';
+
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const actions: Actions = {
+	delete: async (event) => {
+		const id = event.params as { id: string };
+		const adventureId = id.id;
+
+		if (!event.locals.user) {
+			const refresh = event.cookies.get('refresh');
+			let auth = event.cookies.get('auth');
+			if (!refresh) {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+			let res = await tryRefreshToken(refresh);
+			if (res) {
+				auth = res;
+				event.cookies.set('auth', auth, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+		}
+		if (!adventureId) {
+			return {
+				status: 400,
+				error: new Error('Bad request')
+			};
+		}
+
+		let res = await fetch(`${serverEndpoint}/api/adventures/${event.params.id}`, {
+			method: 'DELETE',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(res);
+		if (!res.ok) {
+			return {
+				status: res.status,
+				error: new Error('Failed to delete adventure')
+			};
+		} else {
+			return {
+				status: 204
+			};
+		}
+	}
+};

frontend/src/routes/adventures/[id]/+page.svelte

@@ -0,0 +1,100 @@
+<!-- <script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import type { Adventure } from '$lib/types';
+
+	export let data;
+	console.log(data);
+	let adventure: Adventure | null = data.props.adventure;
+</script>
+
+{#if !adventure}
+	<p>Adventure not found</p>
+{:else}
+	<AdventureCard {adventure} type={adventure.type} />
+{/if} -->
+
+<script lang="ts">
+	import type { Adventure } from '$lib/types';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+
+	export let data: PageData;
+
+	let adventure: Adventure;
+
+	onMount(() => {
+		if (data.props.adventure) {
+			adventure = data.props.adventure;
+		} else {
+			goto('/404');
+		}
+	});
+</script>
+
+{#if !adventure}
+	<div class="flex justify-center items-center w-full mt-16">
+		<span class="loading loading-spinner w-24 h-24"></span>
+	</div>
+{:else}
+	{#if adventure.name}
+		<h1 class="text-center font-extrabold text-4xl mb-2">{adventure.name}</h1>
+	{/if}
+	{#if adventure.location}
+		<p class="text-center text-2xl">
+			<iconify-icon icon="mdi:map-marker" class="text-xl -mb-0.5"
+			></iconify-icon>{adventure.location}
+		</p>
+	{/if}
+	{#if adventure.date}
+		<p class="text-center text-lg mt-4 pl-16 pr-16">
+			Visited on: {adventure.date}
+		</p>
+	{/if}
+	{#if adventure.rating !== undefined && adventure.rating !== null}
+		<div class="flex justify-center items-center">
+			<div class="rating" aria-readonly="true">
+				{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
+					<input
+						type="radio"
+						name="rating-1"
+						class="mask mask-star"
+						checked={star <= adventure.rating}
+						disabled
+					/>
+				{/each}
+			</div>
+		</div>
+	{/if}
+	{#if adventure.description}
+		<p class="text-center text-lg mt-4 pl-16 pr-16">{adventure.description}</p>
+	{/if}
+	{#if adventure.link}
+		<div class="flex justify-center items-center mt-4">
+			<a href={adventure.link} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
+				Visit Website
+			</a>
+		</div>
+	{/if}
+	{#if adventure.activity_types && adventure.activity_types.length > 0}
+		<div class="flex justify-center items-center mt-4">
+			<p class="text-center text-lg">Activities:&nbsp</p>
+			<ul class="flex flex-wrap">
+				{#each adventure.activity_types as activity}
+					<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
+						{activity}
+					</div>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+	{#if adventure.image}
+		<div class="flex content-center justify-center">
+			<img
+				src={adventure.image}
+				alt={adventure.name}
+				class="w-1/2 mt-4 align-middle rounded-lg shadow-lg"
+			/>
+		</div>
+	{/if}
+{/if}

frontend/src/routes/featured/+page.server.ts

@@ -0,0 +1,28 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let visitedFetch = await fetch(`${endpoint}/api/adventures/featured/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!visitedFetch.ok) {
+			console.error('Failed to fetch featured adventures');
+			return redirect(302, '/login');
+		} else {
+			let featured = (await visitedFetch.json()) as Adventure[];
+			return {
+				props: {
+					featured
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/featured/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import type { Adventure } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	console.log(data);
+
+	let adventures: Adventure[] = data.props.featured;
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Featured Adventures</h1>
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each adventures as adventure}
+		<AdventureCard type="featured" {adventure} />
+	{/each}
+</div>
+
+{#if adventures.length === 0}
+	<div class="flex justify-center items-center h-96">
+		<p class="text-2xl text-primary-content">No visited adventures yet!</p>
+	</div>
+{/if}

frontend/src/routes/login/+page.server.ts

@@ -0,0 +1,75 @@
+import { fail, redirect } from '@sveltejs/kit';
+
+import type { Actions, PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/');
+	}
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const formData = await event.request.formData();
+		const formUsername = formData.get('username');
+		const formPassword = formData.get('password');
+
+		let username = formUsername?.toString().toLocaleLowerCase();
+
+		const password = formData.get('password');
+
+		const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+		const csrfTokenFetch = await event.fetch(`${serverEndpoint}/csrf/`);
+
+		if (!csrfTokenFetch.ok) {
+			console.error('Failed to fetch CSRF token');
+			event.locals.user = null;
+			return fail(500, {
+				message: 'Failed to fetch CSRF token'
+			});
+		}
+
+		const tokenPromise = await csrfTokenFetch.json();
+		const csrfToken = tokenPromise.csrfToken;
+
+		const loginFetch = await event.fetch(`${serverEndpoint}/auth/login/`, {
+			method: 'POST',
+			headers: {
+				'X-CSRFToken': csrfToken,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				username,
+				password
+			})
+		});
+		const loginResponse = await loginFetch.json();
+		if (!loginFetch.ok) {
+			// get the value of the first key in the object
+			const firstKey = Object.keys(loginResponse)[0] || 'error';
+			const error = loginResponse[firstKey][0] || 'Invalid username or password';
+			return fail(400, {
+				message: error
+			});
+		} else {
+			const token = loginResponse.access;
+			const tokenFormatted = `auth=${token}`;
+			const refreshToken = `${loginResponse.refresh}`;
+			event.cookies.set('auth', tokenFormatted, {
+				httpOnly: true,
+				sameSite: 'lax',
+				expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+				path: '/'
+			});
+			event.cookies.set('refresh', refreshToken, {
+				httpOnly: true,
+				sameSite: 'lax',
+				expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
+				path: '/'
+			});
+
+			return redirect(302, '/');
+		}
+	}
+};

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { getRandomQuote } from '$lib';
+	import { redirect, type SubmitFunction } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	export let data;
+	console.log(data);
+
+	import { page } from '$app/stores';
+
+	let quote: string = '';
+	let backgroundImageUrl =
+		'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+	onMount(async () => {
+		quote = getRandomQuote();
+	});
+</script>
+
+<div
+	class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+	style="background-image: url('{backgroundImageUrl}')"
+>
+	<div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
+		<article class="text-center text-4xl font-extrabold">
+			<h1>Sign in</h1>
+		</article>
+
+		<div class="flex justify-center">
+			<form method="post" use:enhance class="w-full max-w-xs">
+				<label for="username">Username</label>
+				<input
+					name="username"
+					id="username"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<label for="password">Password</label>
+				<input
+					type="password"
+					name="password"
+					id="password"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<button class="py-2 px-4 btn btn-primary mr-2">Login</button>
+				<button
+					class="py-2 px-4 btn btn-neutral"
+					type="button"
+					on:click={() => goto('/settings/forgot-password')}>Forgot Password</button
+				>
+			</form>
+		</div>
+
+		{#if ($page.form?.message && $page.form?.message.length > 1) || $page.form?.type === 'error'}
+			<div class="text-center text-error mt-4">
+				{$page.form.message || 'Unable to login with the provided credentials.'}
+			</div>
+		{/if}
+
+		<div class="flex justify-center mt-12 mr-25 ml-25">
+			<blockquote class="w-80 text-center text-lg break-words">
+				{#if quote != ''}
+					{quote}
+				{/if}
+				<!-- <footer class="text-sm">- Steve Jobs</footer> -->
+			</blockquote>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<title>Login | AdventureLog</title>
+	<meta
+		name="description"
+		content="Login to your AdventureLog account to start logging your adventures!"
+	/>
+</svelte:head>

frontend/src/routes/map/+page.server.ts

@@ -0,0 +1,38 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let visitedFetch = await fetch(`${endpoint}/api/adventures/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!visitedFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let visited = (await visitedFetch.json()) as Adventure[];
+			console.log('VISITEDL ' + visited);
+			// make a long lat array like this { lngLat: [-20, 0], name: 'Adventure 1' },
+			let markers = visited
+				.filter((adventure) => adventure.latitude !== null && adventure.longitude !== null)
+				.map((adventure) => {
+					return {
+						lngLat: [adventure.longitude, adventure.latitude] as [number, number],
+						name: adventure.name
+					};
+				});
+			return {
+				props: {
+					markers
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/map/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+	// @ts-nocheck
+
+	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	export let data;
+
+	let markers = data.props.markers;
+	console.log(markers);
+</script>
+
+<MapLibre
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+	standardControls
+>
+	{#each data.props.markers as { lngLat, name }}
+		<!-- Unlike the custom marker example, default markers do not have mouse events,
+    and popups only support the default openOn="click" behavior -->
+		<DefaultMarker {lngLat}>
+			<Popup offset={[0, -10]}>
+				<div class="text-lg font-bold">{name}</div>
+			</Popup>
+		</DefaultMarker>
+	{/each}
+</MapLibre>
+
+<style>
+	:global(.map) {
+		height: 500px;
+	}
+</style>

frontend/src/routes/planner/+page.server.ts

@@ -0,0 +1,28 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let plannedFetch = await fetch(`${endpoint}/api/adventures/planned/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!plannedFetch.ok) {
+			console.error('Failed to fetch planned adventures');
+			return redirect(302, '/login');
+		} else {
+			let planned = (await plannedFetch.json()) as Adventure[];
+			return {
+				props: {
+					planned
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/planner/+page.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import type { Adventure } from '$lib/types';
+	import Plus from '~icons/mdi/plus';
+	import type { PageData } from './$types';
+	import EditAdventure from '$lib/components/EditAdventure.svelte';
+
+	export let data: PageData;
+	console.log(data);
+
+	let adventures: Adventure[] = data.props.planned;
+	let isShowingCreateModal: boolean = false;
+
+	let adventureToEdit: Adventure;
+	let isEditModalOpen: boolean = false;
+
+	function deleteAdventure(event: CustomEvent<number>) {
+		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
+	}
+
+	function createAdventure(event: CustomEvent<Adventure>) {
+		adventures = [event.detail, ...adventures];
+		isShowingCreateModal = false;
+	}
+
+	function editAdventure(event: CustomEvent<Adventure>) {
+		adventureToEdit = event.detail;
+		isEditModalOpen = true;
+	}
+
+	function saveEdit(event: CustomEvent<Adventure>) {
+		adventures = adventures.map((adventure) => {
+			if (adventure.id === event.detail.id) {
+				return event.detail;
+			}
+			return adventure;
+		});
+		isEditModalOpen = false;
+	}
+</script>
+
+{#if isShowingCreateModal}
+	<NewAdventure
+		type="planned"
+		on:create={createAdventure}
+		on:close={() => (isShowingCreateModal = false)}
+	/>
+{/if}
+
+{#if isEditModalOpen}
+	<EditAdventure
+		{adventureToEdit}
+		on:close={() => (isEditModalOpen = false)}
+		on:saveEdit={saveEdit}
+	/>
+{/if}
+
+<div class="fixed bottom-4 right-4 z-[999]">
+	<div class="flex flex-row items-center justify-center gap-4">
+		<div class="dropdown dropdown-top dropdown-end">
+			<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
+				<Plus class="w-8 h-8" />
+			</div>
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<ul
+				tabindex="0"
+				class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
+			>
+				<p class="text-center font-bold text-lg">Create new...</p>
+				<button class="btn btn-primary" on:click={() => (isShowingCreateModal = true)}
+					>Planned Adventure</button
+				>
+				<!-- <button
+			class="btn btn-primary"
+			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
+		  > -->
+			</ul>
+		</div>
+	</div>
+</div>
+
+<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each adventures as adventure}
+		<AdventureCard type="planned" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
+	{/each}
+</div>
+
+{#if adventures.length === 0}
+	<div class="flex justify-center items-center h-96">
+		<p class="text-2xl text-primary-content">No planned adventures yet!</p>
+	</div>
+{/if}

frontend/src/routes/settings/+page.server.ts

@@ -0,0 +1,145 @@
+import { fail, redirect, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from '../$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { User } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/');
+	}
+	if (!event.cookies.get('auth')) {
+		return redirect(302, '/');
+	}
+	let res = await fetch(`${endpoint}/auth/user/`, {
+		headers: {
+			Cookie: event.cookies.get('auth') || ''
+		}
+	});
+	let user = (await res.json()) as User;
+
+	if (!res.ok) {
+		return redirect(302, '/');
+	}
+
+	return {
+		props: {
+			user
+		}
+	};
+};
+
+export const actions: Actions = {
+	changeDetails: async (event) => {
+		if (!event.locals.user) {
+			return redirect(302, '/');
+		}
+		if (!event.cookies.get('auth')) {
+			return redirect(302, '/');
+		}
+
+		try {
+			const formData = await event.request.formData();
+
+			let username = formData.get('username') as string | null | undefined;
+			let first_name = formData.get('first_name') as string | null | undefined;
+			let last_name = formData.get('last_name') as string | null | undefined;
+			let profile_pic = formData.get('profile_pic') as File | null | undefined;
+
+			const resCurrent = await fetch(`${endpoint}/auth/user/`, {
+				headers: {
+					Cookie: event.cookies.get('auth') || ''
+				}
+			});
+
+			if (!resCurrent.ok) {
+				return fail(resCurrent.status, await resCurrent.json());
+			}
+
+			let currentUser = (await resCurrent.json()) as User;
+
+			if (username === currentUser.username) {
+				username = undefined;
+			}
+			if (first_name === currentUser.first_name) {
+				first_name = undefined;
+			}
+			if (last_name === currentUser.last_name) {
+				last_name = undefined;
+			}
+			if (currentUser.profile_pic && !profile_pic) {
+				profile_pic = undefined;
+			}
+
+			let formDataToSend = new FormData();
+			if (username) {
+				formDataToSend.append('username', username);
+			}
+			if (first_name) {
+				formDataToSend.append('first_name', first_name);
+			}
+			if (last_name) {
+				formDataToSend.append('last_name', last_name);
+			}
+			if (profile_pic) {
+				formDataToSend.append('profile_pic', profile_pic);
+			}
+
+			let res = await fetch(`${endpoint}/auth/user/`, {
+				method: 'PATCH',
+				headers: {
+					Cookie: event.cookies.get('auth') || ''
+				},
+				body: formDataToSend
+			});
+
+			let response = await res.json();
+
+			if (!res.ok) {
+				// change the first key in the response to 'message' for the fail function
+				response = { message: Object.values(response)[0] };
+				return fail(res.status, response);
+			}
+
+			let user = response as User;
+
+			return { success: true };
+		} catch (error) {
+			console.error('Error:', error);
+			return { error: 'An error occurred while processing your request.' };
+		}
+	},
+	changePassword: async (event) => {
+		if (!event.locals.user) {
+			return redirect(302, '/');
+		}
+		if (!event.cookies.get('auth')) {
+			return redirect(302, '/');
+		}
+		console.log('changePassword');
+		const formData = await event.request.formData();
+
+		const password1 = formData.get('password1') as string | null | undefined;
+		const password2 = formData.get('password2') as string | null | undefined;
+
+		if (password1 !== password2) {
+			return fail(400, { message: 'Passwords do not match' });
+		}
+
+		let res = await fetch(`${endpoint}/auth/password/change/`, {
+			method: 'POST',
+			headers: {
+				Cookie: event.cookies.get('auth') || '',
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				new_password1: password1,
+				new_password2: password2
+			})
+		});
+		if (!res.ok) {
+			return fail(res.status, await res.json());
+		}
+		return { success: true };
+	}
+};

frontend/src/routes/settings/+page.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { addToast } from '$lib/toasts';
+	import type { User } from '$lib/types.js';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	export let data;
+	let user: User;
+	if (data.user) {
+		user = data.user;
+	}
+
+	onMount(async () => {
+		if (browser) {
+			const queryParams = new URLSearchParams($page.url.search);
+			const pageParam = queryParams.get('page');
+
+			if (pageParam === 'success') {
+				addToast('success', 'Settings updated successfully!');
+				console.log('Settings updated successfully!');
+			}
+		}
+	});
+
+	$: {
+		if (browser && $page.form?.success) {
+			window.location.href = '/settings?page=success';
+		}
+		if (browser && $page.form?.error) {
+			addToast('error', 'Error updating settings');
+		}
+	}
+</script>
+
+<h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>
+
+<h1 class="text-center font-extrabold text-xl">User Account Settings</h1>
+<div class="flex justify-center">
+	<form
+		method="post"
+		action="?/changeDetails"
+		use:enhance
+		class="w-full max-w-xs"
+		enctype="multipart/form-data"
+	>
+		<label for="username">Username</label>
+		<input
+			bind:value={user.username}
+			name="username"
+			id="username"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/><br />
+		<label for="first_name">First Name</label>
+		<input
+			type="text"
+			bind:value={user.first_name}
+			name="first_name"
+			id="first_name"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/><br />
+
+		<label for="last_name">Last Name</label>
+		<input
+			type="text"
+			bind:value={user.last_name}
+			name="last_name"
+			id="last_name"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/><br />
+		<!-- <label for="first_name">Email</label>
+		<input
+			type="email"
+			bind:value={user.email}
+			name="email"
+			id="email"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/><br /> -->
+		<label for="profilePicture">Profile Picture</label>
+		<input
+			type="file"
+			name="profile_pic"
+			id="profile_pic"
+			class="file-input file-input-bordered w-full max-w-xs mb-2"
+		/><br />
+		<button class="py-2 mt-2 px-4 btn btn-primary">Update</button>
+	</form>
+</div>
+
+{#if $page.form?.message}
+	<div class="text-center text-error mt-4">
+		{$page.form?.message}
+	</div>
+{/if}
+
+<h1 class="text-center font-extrabold text-xl mt-4 mb-2">Password Change</h1>
+<div class="flex justify-center">
+	<form action="?/changePassword" method="post" class="w-full max-w-xs">
+		<input
+			type="password"
+			name="password1"
+			placeholder="New Password"
+			id="password1"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/>
+		<br />
+		<input
+			type="password"
+			name="password2"
+			id="password2"
+			placeholder="Confirm New Password"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/>
+		<button class="py-2 px-4 btn btn-primary mt-2">Change Password</button>
+		<br />
+	</form>
+</div>
+
+<small class="text-center"
+	><b>For Debug Use:</b> Server PK={user.pk} | Date Joined: {user.date_joined
+		? new Date(user.date_joined).toDateString()
+		: ''} | Staff user: {user.is_staff}</small
+>
+
+<svelte:head>
+	<title>User Settings | AdventureLog</title>
+	<meta
+		name="description"
+		content="Update your user account settings here. Change your username, first name, last name, and profile icon."
+	/>
+</svelte:head>

frontend/src/routes/settings/forgot-password/+page.server.ts

@@ -0,0 +1,30 @@
+import { fail, type Actions } from '@sveltejs/kit';
+
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const actions: Actions = {
+	forgotPassword: async (event) => {
+		const formData = await event.request.formData();
+
+		const email = formData.get('email') as string | null | undefined;
+
+		if (!email) {
+			return fail(400, { message: 'Email is required' });
+		}
+
+		let res = await fetch(`${endpoint}/auth/password/reset/`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				email
+			})
+		});
+		if (!res.ok) {
+			return fail(res.status, { message: await res.json() });
+		}
+		return { success: true };
+	}
+};

frontend/src/routes/settings/forgot-password/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
+</script>
+
+<h1 class="text-center font-extrabold text-4xl mb-6">Reset Password</h1>
+
+<div class="flex justify-center">
+	<form method="post" action="?/forgotPassword" class="w-full max-w-xs">
+		<label for="email">Email</label>
+		<input
+			name="email"
+			type="email"
+			id="email"
+			class="block mb-2 input input-bordered w-full max-w-xs"
+		/><br />
+		<button class="py-2 px-4 btn btn-primary mr-2">Reset Password</button>
+		{#if $page.form?.message}
+			<div class="text-center text-error mt-4">
+				{$page.form?.message}
+			</div>
+		{/if}
+		{#if $page.form?.success}
+			<div class="text-center text-success mt-4">
+				If the email address you provided is associated with an account, you will receive an email
+				with instructions to reset your password!
+			</div>
+		{/if}
+	</form>
+</div>

frontend/src/routes/signup/+page.server.ts

@@ -0,0 +1,80 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+
+import type { Actions, PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/');
+	}
+};
+
+export const actions: Actions = {
+	default: async (event) => {
+		const formData = await event.request.formData();
+		const formUsername = formData.get('username');
+		const password1 = formData.get('password1');
+		const password2 = formData.get('password2');
+		const email = formData.get('email');
+		const first_name = formData.get('first_name');
+		const last_name = formData.get('last_name');
+
+		let username = formUsername?.toString().toLocaleLowerCase();
+
+		const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+		const csrfTokenFetch = await event.fetch(`${serverEndpoint}/csrf/`);
+
+		if (!csrfTokenFetch.ok) {
+			event.locals.user = null;
+			return fail(500, { message: 'Failed to fetch CSRF token' });
+		}
+
+		const tokenPromise = await csrfTokenFetch.json();
+		const csrfToken = tokenPromise.csrfToken;
+
+		const loginFetch = await event.fetch(`${serverEndpoint}/auth/registration/`, {
+			method: 'POST',
+			headers: {
+				'X-CSRFToken': csrfToken,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				username: username,
+				password1: password1,
+				password2: password2,
+				email: email,
+				first_name,
+				last_name
+			})
+		});
+		const loginResponse = await loginFetch.json();
+
+		if (!loginFetch.ok) {
+			// get the value of the first key in the object
+			const firstKey = Object.keys(loginResponse)[0] || 'error';
+			const error =
+				loginResponse[firstKey][0] || 'Failed to register user. Check your inputs and try again.';
+			return fail(400, {
+				message: error
+			});
+		} else {
+			const token = loginResponse.access;
+			const tokenFormatted = `auth=${token}`;
+			const refreshToken = `${loginResponse.refresh}`;
+			event.cookies.set('auth', tokenFormatted, {
+				httpOnly: true,
+				sameSite: 'lax',
+				expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+				path: '/'
+			});
+			event.cookies.set('refresh', refreshToken, {
+				httpOnly: true,
+				sameSite: 'lax',
+				expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
+				path: '/'
+			});
+
+			return redirect(302, '/');
+		}
+	}
+};

frontend/src/routes/signup/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { getRandomQuote } from '$lib';
+	import { redirect, type SubmitFunction } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	export let data;
+	console.log(data);
+
+	import { page } from '$app/stores';
+
+	let quote: string = '';
+	let errors: { message?: string } = {};
+	let backgroundImageUrl =
+		'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+	onMount(async () => {
+		quote = getRandomQuote();
+	});
+</script>
+
+<div
+	class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+	style="background-image: url('{backgroundImageUrl}')"
+>
+	<div class="card card-compact w-96 bg-base-100 shadow-xl p-6 mt-4 mb-4">
+		<article class="text-center text-4xl font-extrabold">
+			<h1>Signup</h1>
+		</article>
+
+		<div class="flex justify-center">
+			<form method="post" use:enhance class="w-full max-w-xs">
+				<label for="username">Username</label>
+				<input
+					name="username"
+					id="username"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<label for="first_name">Email</label>
+				<input
+					name="email"
+					id="email"
+					type="email"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<label for="first_name">First Name</label>
+				<input
+					name="first_name"
+					id="first_name"
+					type="text"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<label for="first_name">Last Name</label>
+				<input
+					name="last_name"
+					id="last_name"
+					type="text"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<label for="password">Password</label>
+				<input
+					type="password"
+					name="password1"
+					id="password1"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br /><label for="password">Confirm Password</label>
+				<input
+					type="password"
+					name="password2"
+					id="password2"
+					class="block mb-2 input input-bordered w-full max-w-xs"
+				/><br />
+				<button class="py-2 px-4 btn btn-primary">Signup</button>
+				{#if $page.form?.message}
+					<div class="text-center text-error mt-4">{$page.form?.message}</div>
+				{/if}
+			</form>
+		</div>
+
+		{#if errors.message}
+			<div class="text-center text-error mt-4">
+				{errors.message}
+			</div>
+		{/if}
+
+		<div class="flex justify-center mt-12 mr-25 ml-25">
+			<blockquote class="w-80 text-center text-lg break-words">
+				{#if quote != ''}
+					{quote}
+				{/if}
+				<!-- <footer class="text-sm">- Steve Jobs</footer> -->
+			</blockquote>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<title>Login | AdventureLog</title>
+	<meta
+		name="description"
+		content="Login to your AdventureLog account to start logging your adventures!"
+	/>
+</svelte:head>

frontend/src/routes/toast/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { addToast } from '$lib/toasts';
+
+	const showToast = () => {
+		addToast('success', 'This is a success message!');
+		addToast('error', 'This is an error message!');
+		addToast('info', 'This is an info message!');
+		addToast('warning', 'This is a warning message!');
+	};
+</script>
+
+<button on:click={showToast}>Show Toast</button>

frontend/src/routes/visited/+page.server.ts

@@ -0,0 +1,28 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let visitedFetch = await fetch(`${endpoint}/api/adventures/visited/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!visitedFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let visited = (await visitedFetch.json()) as Adventure[];
+			return {
+				props: {
+					visited
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/visited/+page.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import type { Adventure } from '$lib/types';
+	import Plus from '~icons/mdi/plus';
+	import type { PageData } from './$types';
+	import EditAdventure from '$lib/components/EditAdventure.svelte';
+
+	export let data: PageData;
+	console.log(data);
+
+	let adventures: Adventure[] = data.props.visited;
+	let isShowingCreateModal: boolean = false;
+
+	let adventureToEdit: Adventure;
+	let isEditModalOpen: boolean = false;
+
+	function deleteAdventure(event: CustomEvent<number>) {
+		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
+	}
+
+	function createAdventure(event: CustomEvent<Adventure>) {
+		adventures = [event.detail, ...adventures];
+		isShowingCreateModal = false;
+	}
+
+	function editAdventure(event: CustomEvent<Adventure>) {
+		adventureToEdit = event.detail;
+		isEditModalOpen = true;
+	}
+
+	function saveEdit(event: CustomEvent<Adventure>) {
+		adventures = adventures.map((adventure) => {
+			if (adventure.id === event.detail.id) {
+				return event.detail;
+			}
+			return adventure;
+		});
+		isEditModalOpen = false;
+	}
+</script>
+
+{#if isShowingCreateModal}
+	<NewAdventure
+		type="visited"
+		on:create={createAdventure}
+		on:close={() => (isShowingCreateModal = false)}
+	/>
+{/if}
+
+{#if isEditModalOpen}
+	<EditAdventure
+		{adventureToEdit}
+		on:close={() => (isEditModalOpen = false)}
+		on:saveEdit={saveEdit}
+	/>
+{/if}
+
+<div class="fixed bottom-4 right-4 z-[999]">
+	<div class="flex flex-row items-center justify-center gap-4">
+		<div class="dropdown dropdown-top dropdown-end">
+			<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
+				<Plus class="w-8 h-8" />
+			</div>
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<ul
+				tabindex="0"
+				class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
+			>
+				<p class="text-center font-bold text-lg">Create new...</p>
+				<button class="btn btn-primary" on:click={() => (isShowingCreateModal = true)}
+					>Visited Adventure</button
+				>
+				<!-- <button
+			class="btn btn-primary"
+			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
+		  > -->
+			</ul>
+		</div>
+	</div>
+</div>
+
+<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each adventures as adventure}
+		<AdventureCard type="visited" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
+	{/each}
+</div>
+
+{#if adventures.length === 0}
+	<div class="flex justify-center items-center h-96">
+		<p class="text-2xl text-primary-content">No visited adventures yet!</p>
+	</div>
+{/if}

frontend/src/routes/worldtravel/+page.server.ts

@@ -0,0 +1,101 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Country } from '$lib/types';
+import { redirect, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		const res = await fetch(`${endpoint}/api/countries/`, {
+			method: 'GET',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!res.ok) {
+			console.error('Failed to fetch countries');
+			return { status: 500 };
+		} else {
+			const countries = (await res.json()) as Country[];
+			return {
+				props: {
+					countries
+				}
+			};
+		}
+	}
+
+	return {};
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	markVisited: async (event) => {
+		const body = await event.request.json();
+
+		if (!body || !body.regionId) {
+			return {
+				status: 400
+			};
+		}
+
+		if (!event.locals.user || !event.cookies.get('auth')) {
+			return redirect(302, '/login');
+		}
+
+		const res = await fetch(`${endpoint}/api/visitedregion/`, {
+			method: 'POST',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ region: body.regionId })
+		});
+
+		if (!res.ok) {
+			console.error('Failed to mark country as visited');
+			return { status: 500 };
+		} else {
+			return {
+				status: 200,
+				data: await res.json()
+			};
+		}
+	},
+	removeVisited: async (event) => {
+		const body = await event.request.json();
+
+		console.log(body);
+
+		if (!body || !body.visitId) {
+			return {
+				status: 400
+			};
+		}
+
+		const visitId = body.visitId as number;
+
+		if (!event.locals.user || !event.cookies.get('auth')) {
+			return redirect(302, '/login');
+		}
+
+		const res = await fetch(`${endpoint}/api/visitedregion/${visitId}/`, {
+			method: 'DELETE',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			}
+		});
+
+		if (res.status !== 204) {
+			console.error('Failed to remove country from visited');
+			return { status: 500 };
+		} else {
+			return {
+				status: 200
+			};
+		}
+	}
+};

frontend/src/routes/worldtravel/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import CountryCard from '$lib/components/CountryCard.svelte';
+	import type { Country } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	console.log(data);
+
+	const countries: Country[] = data.props?.countries || [];
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
+
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each countries as country}
+		<CountryCard countryCode={country.country_code} countryName={country.name} />
+		<!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
+	{/each}
+</div>
+
+<svelte:head>
+	<title>WorldTravel | AdventureLog</title>
+	<meta name="description" content="Explore the world and add countries to your visited list!" />
+</svelte:head>

frontend/src/routes/worldtravel/[id]/+page.server.ts

@@ -0,0 +1,45 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Region, VisitedRegion } from '$lib/types';
+import type { PageServerLoad } from './$types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	const id = event.params.id;
+
+	let regions: Region[] = [];
+	let visitedRegions: VisitedRegion[] = [];
+
+	let res = await fetch(`${endpoint}/api/${id}/regions/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch regions');
+		return { status: 500 };
+	} else {
+		regions = (await res.json()) as Region[];
+	}
+
+	res = await fetch(`${endpoint}/api/${id}/visits/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch visited regions');
+		return { status: 500 };
+	} else {
+		visitedRegions = (await res.json()) as VisitedRegion[];
+	}
+
+	return {
+		props: {
+			regions,
+			visitedRegions
+		}
+	};
+}) satisfies PageServerLoad;

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import RegionCard from '$lib/components/RegionCard.svelte';
+	import type { Region, VisitedRegion } from '$lib/types';
+	import type { PageData } from './$types';
+	export let data: PageData;
+	let regions: Region[] = data.props?.regions || [];
+	let visitedRegions: VisitedRegion[] = data.props?.visitedRegions || [];
+
+	console.log(data);
+</script>
+
+<h1 class="text-center font-bold text-4xl mb-4">Regions</h1>
+
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each regions as region}
+		<RegionCard
+			{region}
+			visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}
+			on:visit={(e) => {
+				visitedRegions = [...visitedRegions, e.detail];
+			}}
+			visit_id={visitedRegions.find((visitedRegion) => visitedRegion.region === region.id)?.id}
+		/>
+	{/each}
+</div>

frontend/startup.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+echo "The origin to be set is: $ORIGIN"
+# Start the application
+ORIGIN=$ORIGIN node build

frontend/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {}
+	},
+	plugins: [require('@tailwindcss/typography'), require('daisyui')],
+	daisyui: {
+		themes: ['light', 'dark', 'night', 'retro', 'forest', 'aqua', 'garden', 'emerald']
+	}
+};

frontend/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+		"types": ["unplugin-icons/types/svelte"] // add this line
+	}
+}

frontend/vite.config.ts

@@ -0,0 +1,13 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import Icons from 'unplugin-icons/vite';
+
+export default defineConfig({
+	plugins: [
+		sveltekit(),
+		Icons({
+			compiler: 'svelte'
+		})
+	]
+});