Created styling standard

.vscode/settings.json

@@ -0,0 +1,62 @@
+{
+	"editor.insertSpaces": true,
+	// Ignores the warning when Git is missing
+	"git.ignoreMissingGitWarning": true,
+	// Disable crash reports being sent to Microsoft.
+	"telemetry.enableCrashReporter": false,
+	// Disable usage data and errors being sent to Microsoft.
+	"telemetry.enableTelemetry": false,
+	"editor.formatOnSave": true,
+	"cmake.configureOnOpen": false,
+	"[python]": {
+		"editor.defaultFormatter": "ms-python.autopep8",
+		"editor.formatOnSave": true
+	},
+	"autopep8.args": ["--max-line-length=200"],
+	"editor.detectIndentation": false,
+	"git.confirmSync": false,
+	"editor.rulers": [
+		{
+			"column": 120
+		}
+	],
+	"git.autofetch": true,
+	"files.autoSave": "onFocusChange",
+	"cSpell.language": "en-GB",
+	"C_Cpp.formatting": "disabled",
+	"cmake.showOptionsMovedNotification": false,
+	"diffEditor.renderSideBySide": false,
+	"terminal.integrated.commandsToSkipShell": ["matlab.interrupt"],
+	"[matlab]": {
+		"editor.defaultFormatter": "AffenWiesel.matlab-formatter"
+	},
+	"workbench.editorAssociations": {
+		"*.pdf": "latex-workshop-pdf-hook"
+	},
+	"notebook.output.textLineLimit": 50,
+	"prettier.printWidth": 130,
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"prettier.useTabs": true,
+    "editor.tabSize": 4,
+	"[json]": {
+		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[cpp]": {
+		"editor.defaultFormatter": "ms-vscode.cpptools"
+	},
+	"C_Cpp.default.cppStandard": "gnu++23",
+	"C_Cpp.default.cStandard": "gnu23",
+	"diffEditor.hideUnchangedRegions.enabled": true,
+    "python.createEnvironment.trigger": "off",
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "importSorter.generalConfiguration.sortOnBeforeSave": true,
+    "cSpell.words": [
+        "vars"
+    ]
+}
+
+

eslint.config.mjs

@@ -9,8 +9,9 @@ const compat = new FlatCompat({
 	baseDirectory: __dirname,
 });
 
-const eslintConfig = [
+export default tseslint.config([...compat.extends("next/core-web-vitals", "next/typescript")], {
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+	rules: {
-];
+		"no-unused-vars": "off",
-
+		"@typescript-eslint/no-unused-vars": "error",
-export default eslintConfig;
+	},
+});

src/app/api/earthquakes/route.ts

@@ -1,6 +1,6 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from "@prisma/client";
 
 const usingPrisma = false;
 let prisma: PrismaClient;

src/app/api/functions/csvReadWrite.ts

@@ -1,6 +1,6 @@
-import path from "path";
-import fs from "fs";
 import csv from "csv-parser";
+import fs from "fs";
+import path from "path";
 
 export type User = {
 	name: string;

src/app/api/login/route.ts

@@ -1,9 +1,9 @@
-import bcrypt from 'bcrypt';
+import bcrypt from "bcrypt";
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from "@prisma/client";
 
-import { findUserByEmail, readUserCsv, User } from '../functions/csvReadWrite';
+import { findUserByEmail, readUserCsv, User } from "../functions/csvReadWrite";
 
 const usingPrisma = false;
 let prisma: PrismaClient;

src/app/api/observatories/route.ts

@@ -1,6 +1,6 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from "@prisma/client";
 
 const usingPrisma = false;
 let prisma: PrismaClient;

src/app/api/signup/route.ts

@@ -1,11 +1,9 @@
-import bcrypt from 'bcrypt';
+import bcrypt from "bcrypt";
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from "@prisma/client";
 
-import {
+import { findUserByEmail, passwordStrengthCheck, readUserCsv, User, writeUserCsv } from "../functions/csvReadWrite";
-    findUserByEmail, passwordStrengthCheck, readUserCsv, User, writeUserCsv
-} from '../functions/csvReadWrite';
 
 const usingPrisma = false;
 let prisma: PrismaClient;

src/app/contact-us/page.tsx

@@ -1,6 +1,6 @@
 "use client";
-import Image from 'next/image';
+import Image from "next/image";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const ContactUs = () => {
 	const [formData, setFormData] = useState({

src/app/earthquakes/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState } from "react";
-import useSWR from 'swr';
+import useSWR from "swr";
 
-import Map from '@components/Map';
+import Map from "@components/Map";
-import Sidebar from '@components/Sidebar';
+import Sidebar from "@components/Sidebar";
-import { fetcher } from '@utils/fetcher';
+import { fetcher } from "@utils/fetcher";
 
 export default function Earthquakes() {
 	const [selectedEventId, setSelectedEventId] = useState("");

src/app/observatories/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState } from "react";
-import useSWR from 'swr';
+import useSWR from "swr";
 
-import Sidebar from '@/components/Sidebar';
+import Sidebar from "@/components/Sidebar";
-import Map from '@components/Map';
+import Map from "@components/Map";
-import { fetcher } from '@utils/fetcher';
+import { fetcher } from "@utils/fetcher";
 
 export default function Observatories() {
 	const [selectedEventId, setSelectedEventId] = useState("");

src/app/our-mission/page.tsx

@@ -11,61 +11,37 @@ const OurMission = () => {
 
 			{/* Content Area */}
 			<div className="relative z-10 max-w-4xl mx-auto p-5 bg-white bg-opacity-90 shadow-lg rounded-lg">
-        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
+				<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Our Mission</h1>
-          Our Mission
-        </h1>
 				<p className="text-lg text-gray-600 leading-relaxed mb-4">
-          At{" "}
+					At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
-          <span className="font-semibold text-blue-600">
+					worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
-            Earthquake Awareness Initiative
+					tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
-          </span>
-          , our mission is to help people worldwide prepare for and recover
-          from earthquakes. Through education, research, and innovative
-          technology, we work tirelessly to empower communities with the
-          knowledge they need to stay safe before, during, and after seismic
-          events.
 				</p>
 				<p className="text-lg text-gray-600 leading-relaxed mb-4">
-          We aim to bridge the gap between scientific research and community
+					We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
-          awareness by providing resources, tools, and real-time updates for
+					real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
-          earthquake preparedness. Together, we aspire to save lives, mitigate
+					resilience against nature's powerful forces.
-          impacts, and foster resilience against nature's powerful forces.
 				</p>
 				<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
 					<div className="flex flex-col items-center p-10">
-            <img
+						<img src="education.png" alt="Education Icon" className="h-20 w-20 mb-8" />
-              src="education.png"
-              alt="Education Icon"
-              className="h-20 w-20 mb-8"
-            />
 						<h3 className="text-xl font-bold text-gray-700 mb-2">Education</h3>
 						<p className="text-sm text-gray-500 text-center">
-              Providing accessible resources to educate people about earthquake
+							Providing accessible resources to educate people about earthquake preparedness.
-              preparedness.
 						</p>
 					</div>
 					<div className="flex flex-col items-center p-10">
-            <img
+						<img src="research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
-              src="research.jpg"
-              alt="Research Icon"
-              className="h-20 w-20 mb-4"
-            />
 						<h3 className="text-xl font-bold text-gray-700 mb-2">Research</h3>
 						<p className="text-sm text-gray-500 text-center">
-              Supporting scientific studies to enhance understanding of seismic
+							Supporting scientific studies to enhance understanding of seismic activity.
-              activity.
 						</p>
 					</div>
 					<div className="flex flex-col items-center p-10">
-            <img
+						<img src="tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-8" />
-              src="tech.jpg"
-              alt="Technology Icon"
-              className="h-20 w-20 mb-8"
-            />
 						<h3 className="text-xl font-bold text-gray-700 mb-2">Technology</h3>
 						<p className="text-sm text-gray-500 text-center">
-              Leveraging innovation to deliver real-time alerts and safety
+							Leveraging innovation to deliver real-time alerts and safety tools.
-              tools.
 						</p>
 					</div>
 				</div>

src/app/page.tsx

@@ -13,8 +13,6 @@ export default function Home() {
 				</div>
 			</div>
 
-      
-
 			<div className="mx-auto mt-20 w-4/6 px-2 border border-black divide-y">
 				{["Earthquake 1", "Earthquake 2", "Earthquake 3"].map((name) => (
 					<div className="px-5 py-5" key={name}>

src/app/shop/page.tsx

@@ -1,11 +1,11 @@
 "use client";
-import Image from 'next/image';
+import Image from "next/image";
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
 
-import Artifact from '@appTypes/Artifact';
+import Artifact from "@appTypes/Artifact";
-import { Currency } from '@appTypes/StoreModel';
+import { Currency } from "@appTypes/StoreModel";
-import Sidebar from '@components/Sidebar';
+import Sidebar from "@components/Sidebar";
-import { useStoreState } from '@hooks/store';
+import { useStoreState } from "@hooks/store";
 
 // Artifacts Data
 const artifacts: Artifact[] = [

src/app/the-team/page.tsx

@@ -1,5 +1,5 @@
 "use client"; // Required for components in Next.js (using client-side rendering)
-import Image from 'next/image';
+import Image from "next/image";
 
 const teamMembers = [
 	{

src/app/warehouse/page.tsx

@@ -1,6 +1,7 @@
 "use client";
+import { useMemo, useState } from "react";
+
 import Sidebar from "@/components/Sidebar";
-import { useState, useMemo } from "react";
 
 export default function Warehouse() {
 	const [selectedEventId, setSelectedEventId] = useState("");

src/components/AuthModal.tsx

@@ -1,6 +1,6 @@
 "use client";
-import axios from 'axios';
+import axios from "axios";
-import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react';
+import { FormEvent, MouseEvent, useEffect, useRef, useState } from "react";
 
 interface AuthModalProps {
 	isOpen: boolean; // bool for if the modal should be visible

src/components/map.tsx

@@ -1,13 +1,14 @@
-import { useCallback, useState } from "react";
-import React, { useRef, useEffect, Dispatch, SetStateAction } from "react";
-import mapboxgl, { LngLatBounds } from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
-import { GiObservatory } from "react-icons/gi";
+
-import Event from "@appTypes/Event";
+import mapboxgl, { LngLatBounds } from "mapbox-gl";
-import getMagnitudeColor from "@utils/getMagnitudeColour";
 import { userAgentFromString } from "next/server";
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
+import { GiObservatory } from "react-icons/gi";
+
+import Event from "@appTypes/Event";
+import getMagnitudeColor from "@utils/getMagnitudeColour";
 
 interface MapComponentProps {
 	events: Event[];
@@ -19,7 +20,14 @@ interface MapComponentProps {
 }
 
 // Map component with location-style pulsing dots, animations, and tooltips
-function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId, mapType }: MapComponentProps) {
+function MapComponent({
+	events,
+	selectedEventId,
+	setSelectedEventId,
+	hoveredEventId,
+	setHoveredEventId,
+	mapType,
+}: MapComponentProps) {
 	const map = useRef<mapboxgl.Map | null>(null);
 	const markers = useRef<{ [key: string]: mapboxgl.Marker }>({});
 	const [mapBounds, setMapBounds] = useState<LngLatBounds>();
@@ -78,7 +86,6 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 
 			// Add markers with location pulse
 			events.forEach((event) => {
-
 				const quakeElement = document.createElement("div");
 				const dotElement = document.createElement("div");
 				const pulseElement = document.createElement("div");
@@ -116,19 +123,19 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 				//<GiObservatory />
 				const observatoryElement = document.createElement("div");
 				const root = createRoot(observatoryElement); // `createRoot` is now the standard API
-        root.render(
+				root.render(<GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />);
-          <GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />
-        );
 
 				quakeElement.appendChild(pulseElement);
 				quakeElement.appendChild(dotElement);
 
-        const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
+				const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement })
+					.setLngLat([event.longitude, event.latitude])
+					.addTo(map.current!);
 
 				const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
           <div>
             <h3>${event.title}</h3>
-            ${ mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
+            ${mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
             <p>${event.text2}</p>
           </div>
         `);
@@ -142,7 +149,9 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 
 				markerDomElement.addEventListener("mouseenter", () => setHoveredEventId(event.id));
 				markerDomElement.addEventListener("mouseleave", () => setHoveredEventId(""));
-        markerDomElement.addEventListener("click", () => setSelectedEventId((prevEventId) => (prevEventId === event.id ? "" : event.id)));
+				markerDomElement.addEventListener("click", () =>
+					setSelectedEventId((prevEventId) => (prevEventId === event.id ? "" : event.id))
+				);
 
 				// Cleanup event listeners on unmount
 				markerDomElement.dataset.listenersAdded = "true"; // Mark for cleanup

src/components/navbar.tsx

@@ -1,13 +1,13 @@
 "use client";
-import Image from 'next/image';
+import Image from "next/image";
-import Link from 'next/link';
+import Link from "next/link";
-import { usePathname } from 'next/navigation';
+import { usePathname } from "next/navigation";
-import { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
-import { FaRegUserCircle } from 'react-icons/fa';
+import { FaRegUserCircle } from "react-icons/fa";
 
-import { Currency } from '@appTypes/StoreModel';
+import { Currency } from "@appTypes/StoreModel";
-import AuthModal from '@components/AuthModal';
+import AuthModal from "@components/AuthModal";
-import { useStoreActions, useStoreState } from '@hooks/store';
+import { useStoreActions, useStoreState } from "@hooks/store";
 
 export default function Navbar({}: // currencySelector,
 {

src/utils/fetcher.ts

@@ -1,3 +1,3 @@
-import axios from 'axios';
+import axios from "axios";
 
 export const fetcher = (url: string) => axios.get(url).then((res) => res.data);

src/utils/getMagnitudeColour.tsx

@@ -1,5 +1,6 @@
 "use client";
 import resolveConfig from "tailwindcss/resolveConfig";
+
 import tailwindConfig from "../../tailwind.config";
 
 function getMagnitudeColour(magnitude: number) {