Rewritten and redesigned findit (#54)

* Setup next rewrite

* Added flashIT

* Started adding stylings to the cards

* Fetches icons from the site instead

* Fixed a header and responsive-isch buttons

* Added a navbar (doesn't work with mobile)

* made icons optional

* Rough first draft finished

* oops, missed one file

* grays out elements when menu shown on mobile

* Added cool animations

* Fixed transition error between mobile and desktop

* stylish icons everywhere

* Created prettier file for consistent formatting

* General cleanup

* Removed missed category in sannes

* Fixed indenting issue

* fixed hiding glitch mobile

* Added dark mode, might need to tweak colours a bit

* Made serviceCard smaller

* Changed the name of Hubben to 2.2 and remove unneccessary github link

* Added variables for darkmode

* Simplified the darkMode switching code

* Made images the correct colour

* Added more mobile

* Moved categoryList

* plz @Krysset fix css

* Is done, goodnight

* Fixed darkModeSwitch icom placement

* It's ugly, but working 🤷‍♂️

* oopsie, missed exposing ports

* Final cleanup

* Removed oldies but goldies

* more responsive and simlified docker

* Halve the screen size when mobile

* Fix pointer issue

---------

Co-authored-by: Supergamer1337 <[email protected]>

docker-compose.yml

@@ -1,11 +1,11 @@
-version: "2"
+version: "3"
 services:
   frontend:
+    image: findit_frontend
     build:
-      context: ./frontend
+      context: frontend
       dockerfile: dev.Dockerfile
-    image: findit:dev
     ports:
-      - "3000:3000"
+      - 3000:3000
     volumes:
-      - ./frontend:/usr/src/app
+      - ./frontend:/app

frontend/.eslintrc.json

@@ -0,0 +1,67 @@
+{
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "jsx": true
+  },
+  "plugins": ["@typescript-eslint", "simple-import-sort", "react-hooks"],
+  "root": true,
+  "rules": {
+    // supress errors for @ts-ignore
+    "@typescript-eslint/ban-ts-comment": "off",
+    // suppress errors for missing 'import React' in files
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/member-ordering": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "no-console": "warn",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          // Side effect imports
+          ["^\\u0000"],
+          // React imports
+          ["^react$", "^react-dom$"],
+          // Packages
+          // Imports starting with aletter, digit, underscore, or an @ followed by a letter
+          ["^@?\\w"],
+          // Absolute imports and other imports
+          // Imports not starting with a dot
+          ["^[^.]"],
+          // Relative parent imports
+          ["^\\.\\."],
+          // Relative sibling imports
+          ["^\\."]
+        ]
+      }
+    ],
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "17.0"
+    }
+  }
+}

frontend/.gitignore

@@ -0,0 +1,38 @@
+.env
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

frontend/.prettierrc

@@ -1,12 +1,8 @@
 {
-    "tabWidth": 4,
-    "printWidth": 80,
-    "semi": true,
-    "arrowParens": "avoid",
-    "bracketSpacing": true,
-    "useTabs": false,
-    "trailingComma": "es5",
-    "jsxBracketSameLine": false,
-    "singleQuote": false,
-    "jsxSingleQuote": false
+	"arrowParens": "always",
+	"semi": true,
+	"tabWidth": 2,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"bracketSameLine": true
 }

frontend/Dockerfile

@@ -1,15 +1,11 @@
-from node:latest as build
+FROM node:lts-alpine
 
-RUN mkdir /usr/src/app
-WORKDIR /usr/src/app
+COPY . /app
 
-COPY . .
+workdir /app
+run yarn install
 
-RUN yarn install 
-RUN yarn global add react-scripts
 
-RUN yarn build
-
-from nginx:alpine
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=build /usr/src/app/build /usr/share/nginx/html
+run yarn build
+expose 3000
+cmd ["yarn", "start"]

frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/components/elements/CategoryList.module.scss

@@ -0,0 +1,29 @@
+@import "../../resources/styles/vars.scss";
+
+.categoryList{
+	@media only screen and (max-width:$breakpoint-mobile){
+		display:flex;
+		flex-direction:column;
+		align-items:center;
+		justify-content: center;
+		gap:$space-small;
+		}
+	@media only screen and (min-width:$breakpoint-mobile){
+		display: flex;
+		flex-wrap:wrap;
+		flex-direction: row;
+		align-items: center;
+			margin: 0 $space-giant 0 $space-giant;
+		gap: $space-small;
+	}
+}
+
+.catBox {
+	justify-content: center;
+	display: flex;
+	flex-direction: column;
+}
+.idContainer {
+	position: relative;
+	top: -1*$space-giant;
+}

frontend/components/elements/Categorylist.tsx

@@ -0,0 +1,23 @@
+import { Category } from "../../data/category";
+import ServiceCard from "../views/ServiceCard";
+
+import styles from "./CategoryList.module.scss";
+
+export interface CategoryListProps {
+  categories: Category;
+}
+const CategoryList = ({ categories }: CategoryListProps) => (
+  <div className={styles.catBox}>
+    <div id={categories.category} className={styles.idContainer} />
+    <p className="titleClass marginLeftBig marginTopBig">
+      {categories.category}
+    </p>
+    <div className={styles.categoryList}>
+      {categories.services.map((service) => (
+        <ServiceCard service={service} key={service.title} />
+      ))}
+    </div>
+  </div>
+);
+
+export default CategoryList;

frontend/components/elements/DarkModeSwitch.module.scss

@@ -0,0 +1,71 @@
+@import "../../resources/styles/vars.scss";
+
+.darkModeSwitchStyle {
+	color: black;
+	height: $space-big;
+		width: $space-big;
+	position: absolute;
+	/*left: 0.1*$space-big;
+				top: 0.1*$space-big;*/
+
+	@media only screen and (min-width:$breakpoint-mobile) {}
+
+	@media only screen and (max-width:$breakpoint-mobile) {}
+}
+
+.slider_in {
+	height: $space-big;
+	width: $space-big;
+	position: relative;
+	left: 0;
+	background-color: #00a6a6;
+	border-radius: $space-big/2;
+	animation-name: out;
+	animation-duration: 0.4s;
+
+}
+
+
+.slider_out {
+	height: $space-big;
+	width: $space-big;
+	position: relative;
+	left: 1.05*$space-big;
+	background-color: #00a6a6;
+	border-radius: $space-big/2;
+	animation-name: in;
+	animation-duration: 0.4s;
+}
+
+.darkModeHolder {
+	height: 1.2$space-big;
+	width: 2.2*$space-big;
+	background-color: black;
+	border: (0.1*$space-big) solid white;
+	border-radius: 1.1*$space-big/2;
+}
+
+.blackColor {
+	background-color: white;
+}
+
+@keyframes in {
+	0% {
+		left: 0;
+	}
+
+	100% {
+		left: 1.1*$space-big;
+	}
+
+}
+
+@keyframes out {
+	0% {
+		left: 1.1*$space-big;
+	}
+
+	100% {
+		left: 0;
+	}
+}

frontend/components/elements/DarkModeSwitch.tsx

@@ -0,0 +1,19 @@
+import styles from "./DarkModeSwitch.module.scss";
+
+export interface DarkModeProps {
+  darkMode: boolean;
+  setDarkMode: any;
+}
+const DarkModeSwitch = ({ darkMode, setDarkMode }: DarkModeProps) => (
+  <div
+    className={`${styles.darkModeHolder} ${
+      darkMode ? null : styles.blackColor
+    }`}
+    onClick={() => {
+      setDarkMode(!darkMode);
+    }}>
+    <div className={darkMode ? styles.slider_out : styles.slider_in} />
+  </div>
+);
+
+export default DarkModeSwitch;