strict typing + more screenshots

README.md

@@ -9,21 +9,22 @@ This project won the **"User Experience Excellence Award"** in the hackathon
 
 
 
-## Screenshots & Relevant stuff
-
-### UI Screenshots
+## UI Screenshots
 
 ![](./assets/ss1.jpeg)
 ![](./assets/ss2.jpeg)
+![](./assets/ss4.png)
+![](./assets/ss5.png)
+![](./assets/ss3.png)
 
-### Certificate
+## Certificate
 
 ![](./assets/cert.jpeg)
 
-### Platform architecture
+## Platform architecture
 ![platform architecture](./assets/arch.png)
 
-### Technologies Used
+## Technologies Used
 - Django
 - Django Ninja
 - Sveltekit
@@ -37,5 +38,5 @@ This project won the **"User Experience Excellence Award"** in the hackathon
 
 [Hackathon Presentation](./assets/presentation.pdf)
 
-### Special thanks
+## Special thanks
 Thanks a lot to the Colossus organisers for managing the hackathon so well. It was their first time organising a hackathon, and they did amazing <3.

frontend/package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",

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

@@ -2,13 +2,29 @@
 	import { goto } from '$app/navigation';
 	import { getUserToken } from '$lib/frontendUtils';
 
+	type FoodItemData = {
+		food: string;
+		calories: number;
+		protein: number;
+		fat: number;
+		carbs: number;
+		vitamins: string;
+		fiber: number;
+		sodium: number;
+	};
+
+	type PredictionResult = { name: string; confidence: number; food_info: FoodItemData };
+
 	let files: FileList;
-	let result: object;
-	let avatar;
+	let result: {
+		ind: PredictionResult[];
+		us: PredictionResult[];
+	};
+	let avatar: string;
 	let activeTab: 'IN' | 'US' = 'IN';
 	let tabViewMore = false;
 	let selectedFood: string;
-	let meal: object;
+	let meal: FoodItemData;
 
 	const formSubmit = async () => {
 		const formData = new FormData();
@@ -17,7 +33,7 @@
 		let reader = new FileReader();
 		reader.readAsDataURL(files[0]);
 		reader.onload = (e) => {
-			avatar = e.target?.result;
+			avatar = e.target?.result as string;
 		};
 
 		try {
@@ -33,7 +49,7 @@
 	};
 
 	const addFoodToDiet = async () => {
-		const formData = new FormData(document.querySelector('#add_food_form'));
+		const formData = new FormData(document.querySelector('#add_food_form') as HTMLFormElement);
 
 		try {
 			const res = await fetch('http://localhost:8000/cc/api/add-food', {
@@ -58,7 +74,7 @@
 		return Math.round(num * 100) / 100;
 	}
 
-	function setSelectedFood(food: string) {
+	function setSelectedFood(food: PredictionResult) {
 		selectedFood = food.name;
 		meal = food.food_info;
 	}
@@ -213,7 +229,7 @@
 			<h2 class="mt-4 text-2xl font-bold">{selectedFood}</h2>
 
 			{#if meal}
-				<h3 class="mt-4 text-md font-semibold">Per serving:</h3>
+				<h3 class="text-md mt-4 font-semibold">Per serving:</h3>
 				<ul class="ml-4 mt-2 list-disc">
 					<li>{meal.calories} calories</li>
 					<li>{meal.protein}g Protein</li>

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

@@ -4,7 +4,25 @@
 	import { formatDistance } from 'date-fns';
 	import 'chart.js/auto'; // Ensure you import this to auto-register all components
 
-	let pastMeals = [];
+	type FoodItemData = {
+		food: string;
+		calories: number;
+		protein: number;
+		fat: number;
+		carbs: number;
+		vitamins: string;
+		fiber: number;
+		sodium: number;
+	};
+
+	type FoodItem = {
+		food: string;
+		quantity: number;
+		created_at: string;
+		food_data: FoodItemData;
+	};
+
+	let pastMeals: FoodItem[] = [];
 	let sums = {
 		protein: 0,
 		fat: 0,
@@ -87,8 +105,7 @@
 			</a>
 		</div>
 
-		<h2 class="mt-6 mb-4 text-lg">Today's Nutrition</h2>
-
+		<h2 class="mb-4 mt-6 text-lg">Today's Nutrition</h2>
 
 		<div class="flex items-center gap-8">
 			<div class="flex flex-col items-center">

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

@@ -3,7 +3,7 @@
 	import Progress from './Progress.svelte';
 	import SvelteMarkdown from 'svelte-markdown';
 
-	let weight = 70;
+	let weight: number | string = 70;
 	let goal = '';
 	let activity_level = '';
 	let suggestion = '';
@@ -45,7 +45,7 @@
 
 	const handleSubmit = async () => {
 		const formData = {
-			weight: Number.parseInt(weight),
+			weight: typeof weight === 'number' ? weight : parseInt(weight),
 			goal,
 			activity_level
 		};
@@ -90,7 +90,9 @@
 <div class="mx-auto max-w-screen-xl p-4">
 	<h1 class="text-2xl font-bold">EatSmart Dietician</h1>
 
-	<SvelteMarkdown source={suggestion} />
+	<div class="prose">
+		<SvelteMarkdown source={suggestion} />
+	</div>
 
 	<p>Please answer the following questions to get a personalised diet recommendation</p>
 	<form method="post" on:submit|preventDefault={handleSubmit}>

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

@@ -3,8 +3,8 @@
 	import { getUserToken } from '$lib/frontendUtils';
 
 	let files: FileList;
-	let result: object;
-	let avatar;
+	let result: { name: string; count: number }[];
+	let avatar: string;
 	let activeTab: 'IN' | 'US' = 'IN';
 	let tabViewMore = false;
 	let selectedFood: string;
@@ -59,7 +59,7 @@
 	};
 
 	const addFoodToDiet = async () => {
-		const formData = new FormData(document.querySelector('#add_food_form'));
+		const formData = new FormData(document.querySelector('#add_food_form') as HTMLFormElement);
 
 		try {
 			const res = await fetch('http://localhost:8000/cc/api/add-food', {

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

@@ -25,5 +25,7 @@
 <div class="mx-auto max-w-screen-xl p-4">
 	<h1 class="text-2xl font-bold mb-6">RecipeRevolution suggestion:</h1>
 
-	<SvelteMarkdown source={suggestion} />
+	<div class="prose">
+		<SvelteMarkdown source={suggestion} />
+	</div>
 </div>

frontend/tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss';
 import daisyui from 'daisyui';
+import typographyPlugin from '@tailwindcss/typography';
 import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default {
@@ -14,6 +15,7 @@ export default {
 	},
 
 	plugins: [
+		typographyPlugin,
 		daisyui,
 	],