diff --git a/Procfile b/Procfile deleted file mode 100644 index 2825dd6..0000000 --- a/Procfile +++ /dev/null @@ -1,5 +0,0 @@ -// Frontend deployment code -web: cd frontend && npm install && npm run build && npm start - -// Backend deployment code -api: cd backend && npm install && npm start diff --git a/backend/Model.js b/backend/Model.js index 098ad16..7ac1c00 100644 --- a/backend/Model.js +++ b/backend/Model.js @@ -1,5 +1,5 @@ import * as tf from '@tensorflow/tfjs'; -import * as mobilenet from '@tensorflow-models/mobilenet'; +// import * as mobilenet from '@tensorflow-models/mobilenet'; export default class Model { constructor() { diff --git a/backend/index.js b/backend/index.js index 4d99ce3..f63134f 100644 --- a/backend/index.js +++ b/backend/index.js @@ -140,7 +140,7 @@ app.post('/api/predict', upload.single('image'), async (req, res) => { ]; // Make a prediction - const isMatch = await model.predict(imageBuffer, databaseImages); + const isMatch = await Model.predict(imageBuffer, databaseImages); // Send the prediction result res.status(200).json({ match: isMatch }); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 089fd52..48c4fb4 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,16 +10,18 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.15.10", - "@mui/material": "^5.15.10", + "@heroicons/react": "^2.1.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "autoprefixer": "^10.4.19", "axios": "^1.6.7", + "postcss": "^8.4.38", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", + "tailwindcss": "^3.4.3", "web-vitals": "^2.1.4", "workbox-background-sync": "^6.6.0", "workbox-broadcast-update": "^6.6.0", @@ -2551,40 +2553,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@floating-ui/core": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", - "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", - "dependencies": { - "@floating-ui/utils": "^0.2.1" - } - }, - "node_modules/@floating-ui/dom": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", - "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", - "dependencies": { - "@floating-ui/core": "^1.0.0", - "@floating-ui/utils": "^0.2.0" - } - }, - "node_modules/@floating-ui/react-dom": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", - "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", - "dependencies": { - "@floating-ui/dom": "^1.6.1" - }, + "node_modules/@heroicons/react": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz", + "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==", "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "react": ">= 16" } }, - "node_modules/@floating-ui/utils": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", - "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3443,261 +3419,6 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, - "node_modules/@mui/base": { - "version": "5.0.0-beta.36", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.36.tgz", - "integrity": "sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@floating-ui/react-dom": "^2.0.8", - "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.9", - "@popperjs/core": "^2.11.8", - "clsx": "^2.1.0", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.11", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.11.tgz", - "integrity": "sha512-JVrJ9Jo4gyU707ujnRzmE8ABBWpXd6FwL9GYULmwZRtfPg89ggXs/S3MStQkpJ1JRWfdLL6S5syXmgQGq5EDAw==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - } - }, - "node_modules/@mui/icons-material": { - "version": "5.15.10", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.10.tgz", - "integrity": "sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA==", - "dependencies": { - "@babel/runtime": "^7.23.9" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@mui/material": "^5.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material": { - "version": "5.15.10", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz", - "integrity": "sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.36", - "@mui/core-downloads-tracker": "^5.15.10", - "@mui/system": "^5.15.9", - "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.9", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1", - "react-is": "^18.2.0", - "react-transition-group": "^4.4.5" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.5.0", - "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/react-is": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" - }, - "node_modules/@mui/private-theming": { - "version": "5.15.11", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.11.tgz", - "integrity": "sha512-jY/696SnSxSzO1u86Thym7ky5T9CgfidU3NFJjguldqK4f3Z5S97amZ6nffg8gTD0HBjY9scB+4ekqDEUmxZOA==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.11", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/styled-engine": { - "version": "5.15.11", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.11.tgz", - "integrity": "sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.4.1", - "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - } - } - }, - "node_modules/@mui/system": { - "version": "5.15.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.9.tgz", - "integrity": "sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.15.9", - "@mui/styled-engine": "^5.15.9", - "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.9", - "clsx": "^2.1.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.5.0", - "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/types": { - "version": "7.2.13", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz", - "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==", - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/utils": { - "version": "5.15.11", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.11.tgz", - "integrity": "sha512-D6bwqprUa9Stf8ft0dcMqWyWDKEo7D+6pB1k8WajbqlYIRA8J8Kw9Ra7PSZKKePGBGWO+/xxrX1U8HpG/aXQCw==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@types/prop-types": "^15.7.11", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/utils/node_modules/react-is": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" - }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -3816,15 +3537,6 @@ } } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@remix-run/router": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", @@ -4952,14 +4664,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -5870,9 +5574,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.17", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz", - "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==", + "version": "10.4.19", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", + "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", "funding": [ { "type": "opencollective", @@ -5888,8 +5592,8 @@ } ], "dependencies": { - "browserslist": "^4.22.2", - "caniuse-lite": "^1.0.30001578", + "browserslist": "^4.23.0", + "caniuse-lite": "^1.0.30001599", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -6504,9 +6208,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001588", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz", - "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==", + "version": "1.0.30001620", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz", + "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==", "funding": [ { "type": "opencollective", @@ -6646,14 +6350,6 @@ "wrap-ansi": "^7.0.0" } }, - "node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "engines": { - "node": ">=6" - } - }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -7597,15 +7293,6 @@ "utila": "~0.4" } }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -13925,9 +13612,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "funding": [ { "type": "opencollective", @@ -13945,7 +13632,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -15635,21 +15322,6 @@ } } }, - "node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "dependencies": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - }, - "peerDependencies": { - "react": ">=16.6.0", - "react-dom": ">=16.6.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16518,9 +16190,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -17199,9 +16871,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz", + "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -17211,7 +16883,7 @@ "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/frontend/package.json b/frontend/package.json index 8f1dd5e..a55421d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,16 +5,18 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.15.10", - "@mui/material": "^5.15.10", + "@heroicons/react": "^2.1.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "autoprefixer": "^10.4.19", "axios": "^1.6.7", + "postcss": "^8.4.38", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", + "tailwindcss": "^3.4.3", "web-vitals": "^2.1.4", "workbox-background-sync": "^6.6.0", "workbox-broadcast-update": "^6.6.0", diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 0000000..4a15258 --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,7 @@ +// postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico new file mode 100644 index 0000000..8d44dee Binary files /dev/null and b/frontend/public/favicon.ico differ diff --git a/frontend/public/index.html b/frontend/public/index.html index 98e0dc7..59e4862 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -20,20 +20,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Hive Haven
- diff --git a/frontend/src/App.css b/frontend/src/App.css index 5e05105..e69de29 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,53 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -.content { - flex: 1; -} - -/* Footer styles */ -.footer { - background-color: #333; - color: #fff; - padding: 20px; - position: fixed; - bottom: 0; - left: 0; - width: 100%; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/frontend/src/App.js b/frontend/src/App.js deleted file mode 100644 index b5ac380..0000000 --- a/frontend/src/App.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import './App.css'; -import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import NavBar from './components/NavBar/NavBar.js'; -import Footer from './components/Footer/Footer.js'; -import Register from './Pages/Register/index.js'; -import Login from './Pages/Login/index.js'; -import Main from './Pages/Main/index.js'; -import Properties from './Pages/Properties/index.js'; -import Property from './Pages/Property/index.js'; - -function App() { - return ( - -
- - - } /> - } /> - } /> - } /> - } /> - -
-
- ); -} - -export default App; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx new file mode 100644 index 0000000..764d696 --- /dev/null +++ b/frontend/src/App.jsx @@ -0,0 +1,23 @@ +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import { Home, Login, Signup, Properties, Property } from './pages'; +import { Nav, Footer } from './components'; + +function App() { + return ( + +
+
+
+ ); +} + +export default App; diff --git a/frontend/src/Pages/Login/styles.css b/frontend/src/Pages/Login/styles.css deleted file mode 100644 index 5fdd7d4..0000000 --- a/frontend/src/Pages/Login/styles.css +++ /dev/null @@ -1,34 +0,0 @@ -.login-container { - max-width: 400px; - margin: 50px auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #fff; - } - - .login-container form { - display: flex; - flex-direction: column; - } - - .login-container input { - margin-bottom: 10px; - padding: 8px; - border: 1px solid #ccc; - border-radius: 3px; - } - - .login-container button { - padding: 10px; - border: none; - border-radius: 3px; - background-color: #007bff; - color: #fff; - cursor: pointer; - } - - .login-container button:hover { - background-color: #0056b3; - } - \ No newline at end of file diff --git a/frontend/src/Pages/Main/index.js b/frontend/src/Pages/Main/index.js deleted file mode 100644 index f60b4a4..0000000 --- a/frontend/src/Pages/Main/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import "./styles.css"; // Import the CSS file for Main component -import { Link } from "react-router-dom"; - -function Main() { - return ( -
-
-

One stop Accommodation solution for all students

-

Find the best accommodation for your needs

-
-
- - - - - - -
-
- ); -} - -export default Main; diff --git a/frontend/src/Pages/Main/styles.css b/frontend/src/Pages/Main/styles.css deleted file mode 100644 index 23e53ce..0000000 --- a/frontend/src/Pages/Main/styles.css +++ /dev/null @@ -1,45 +0,0 @@ -.main-container { - max-width: 800px; - margin: 50px auto; - padding: 20px; - text-align: center; - background-image: url('https://www.pexels.com/photo/beige-concrete-house-under-cumulus-cloud-358636/'); /* Path to your background image */ - background-size: cover; /* Resize the background image to cover the container */ - background-position: center; - background-color: rgba(255, 255, 255, 0.5); /* Lighten the background color */ - color: #000; /* Set text color to dark for better readability */ -} - -.main-container header { - margin-bottom: 20px; -} - -.main-container header h1 { - font-size: 2.5rem; - margin-bottom: 10px; -} - -.main-container header p { - font-size: 1.2rem; - color: #0056b3; /* Adjust text color for better contrast */ -} - -.main-container div { - display: flex; - justify-content: center; -} - -.main-container button { - margin: 0 10px; - padding: 10px 20px; - border: none; - border-radius: 5px; - background-color: #007bff; - color: #fff; - font-size: 1rem; - cursor: pointer; -} - -.main-container button:hover { - background-color: #0056b3; -} diff --git a/frontend/src/Pages/Properties/styles.css b/frontend/src/Pages/Properties/styles.css deleted file mode 100644 index 8ee9ce8..0000000 --- a/frontend/src/Pages/Properties/styles.css +++ /dev/null @@ -1,25 +0,0 @@ -.property-container { - max-width: 600px; - margin: 0 auto; - } - - .property { - border: 1px solid #ccc; - border-radius: 5px; - padding: 20px; - margin-bottom: 20px; - } - - .property h2 { - color: #333; - } - - .property p { - color: #666; - } - - .property a { - text-decoration: none; - color: #007bff; - } - \ No newline at end of file diff --git a/frontend/src/Pages/Property/styles.css b/frontend/src/Pages/Property/styles.css deleted file mode 100644 index b4a148c..0000000 --- a/frontend/src/Pages/Property/styles.css +++ /dev/null @@ -1,18 +0,0 @@ -.property-container { - max-width: 600px; - margin: 0 auto; -} - -.property-details { - border: 1px solid #ccc; - border-radius: 5px; - padding: 20px; -} - -.property-details h1 { - color: #333; -} - -.property-details p { - color: #666; -} diff --git a/frontend/src/Pages/Register/styles.css b/frontend/src/Pages/Register/styles.css deleted file mode 100644 index f1ddad2..0000000 --- a/frontend/src/Pages/Register/styles.css +++ /dev/null @@ -1,41 +0,0 @@ -.register-container { - max-width: 400px; - margin: 50px auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #fff; - align-items: center; -} - -.form-group { - margin-bottom: 20px; - width: 100%; -} - -label { - display: block; - margin-bottom: 5px; -} - -input { - width: 100%; - padding: 8px; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; -} - -button { - width: 100%; - padding: 10px; - border: none; - border-radius: 3px; - background-color: #007bff; - color: #fff; - cursor: pointer; -} - -button:hover { - background-color: #0056b3; -} diff --git a/frontend/src/Pages/RentalProperties/index.js b/frontend/src/Pages/RentalProperties/index.js deleted file mode 100644 index 0892a14..0000000 --- a/frontend/src/Pages/RentalProperties/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import axios from '../../axiosConfig'; -import Link from 'react-router-dom'; -import "./styles.css"; - -function RentalProperties() { - - const [properties, setProperties] = useState([]); - - useEffect(() => { - axios.get('/properties') - .then((response) => { - setProperties(response.data); - }) - .catch((error) => { - console.error('Error getting properties:', error); - }); - } - , []); // Add an empty dependency array here - - return ( -
-

Rental Properties

- {properties.map(property => ( -
- - {/* {property.street_addr} */} -

{property.street_addr}

- -

{property.desc}

-

Price: ${property.rent}

-
- ))} -
- ); -} - -export default RentalProperties; diff --git a/frontend/src/Pages/RentalProperties/styles.css b/frontend/src/Pages/RentalProperties/styles.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/assets/background.jpeg b/frontend/src/assets/background.jpeg deleted file mode 100644 index 83f3a67..0000000 Binary files a/frontend/src/assets/background.jpeg and /dev/null differ diff --git a/frontend/src/assets/icons/android-chrome-192x192.png b/frontend/src/assets/icons/android-chrome-192x192.png new file mode 100644 index 0000000..6b75a22 Binary files /dev/null and b/frontend/src/assets/icons/android-chrome-192x192.png differ diff --git a/frontend/src/assets/icons/android-chrome-512x512.png b/frontend/src/assets/icons/android-chrome-512x512.png new file mode 100644 index 0000000..2cd3f62 Binary files /dev/null and b/frontend/src/assets/icons/android-chrome-512x512.png differ diff --git a/frontend/src/assets/icons/angle-circle-arrow-right-icon.svg b/frontend/src/assets/icons/angle-circle-arrow-right-icon.svg new file mode 100644 index 0000000..57f0e63 --- /dev/null +++ b/frontend/src/assets/icons/angle-circle-arrow-right-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/apple-touch-icon.png b/frontend/src/assets/icons/apple-touch-icon.png new file mode 100644 index 0000000..7c2980b Binary files /dev/null and b/frontend/src/assets/icons/apple-touch-icon.png differ diff --git a/frontend/src/assets/icons/favicon-16x16.png b/frontend/src/assets/icons/favicon-16x16.png new file mode 100644 index 0000000..7a41423 Binary files /dev/null and b/frontend/src/assets/icons/favicon-16x16.png differ diff --git a/frontend/src/assets/icons/favicon-32x32.png b/frontend/src/assets/icons/favicon-32x32.png new file mode 100644 index 0000000..e93b10c Binary files /dev/null and b/frontend/src/assets/icons/favicon-32x32.png differ diff --git a/frontend/src/assets/icons/hamburger-menu.svg b/frontend/src/assets/icons/hamburger-menu.svg new file mode 100644 index 0000000..aeed2f8 --- /dev/null +++ b/frontend/src/assets/icons/hamburger-menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/index.js b/frontend/src/assets/icons/index.js new file mode 100644 index 0000000..073837e --- /dev/null +++ b/frontend/src/assets/icons/index.js @@ -0,0 +1,4 @@ +import hamburgerIcon from './hamburger-menu.svg'; +import rightArrowIcon from './angle-circle-arrow-right-icon.svg'; + +export { hamburgerIcon, rightArrowIcon }; \ No newline at end of file diff --git a/frontend/src/assets/icons/logo.svg b/frontend/src/assets/icons/logo.svg new file mode 100644 index 0000000..c1eac76 --- /dev/null +++ b/frontend/src/assets/icons/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/images/best-place.svg b/frontend/src/assets/images/best-place.svg new file mode 100644 index 0000000..18534aa --- /dev/null +++ b/frontend/src/assets/images/best-place.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/images/header-logo.png b/frontend/src/assets/images/header-logo.png new file mode 100644 index 0000000..7c2980b Binary files /dev/null and b/frontend/src/assets/images/header-logo.png differ diff --git a/frontend/src/assets/images/index.js b/frontend/src/assets/images/index.js new file mode 100644 index 0000000..f69b6f5 --- /dev/null +++ b/frontend/src/assets/images/index.js @@ -0,0 +1,4 @@ +import headerLogo from './header-logo.png'; +import bestPlace from './best-place.svg'; + +export { headerLogo, bestPlace }; \ No newline at end of file diff --git a/frontend/src/components/Buttons.jsx b/frontend/src/components/Buttons.jsx new file mode 100644 index 0000000..07a606e --- /dev/null +++ b/frontend/src/components/Buttons.jsx @@ -0,0 +1,19 @@ +const PrimaryButton = ({label, Icon}) => { + return ( + + ) +} + +const SecondaryButton = ({label, Icon}) => { + return ( + + ) +} + +export { PrimaryButton, SecondaryButton } \ No newline at end of file diff --git a/frontend/src/components/Footer/Footer.js b/frontend/src/components/Footer.jsx similarity index 66% rename from frontend/src/components/Footer/Footer.js rename to frontend/src/components/Footer.jsx index 6d8c230..9c569bb 100644 --- a/frontend/src/components/Footer/Footer.js +++ b/frontend/src/components/Footer.jsx @@ -1,6 +1,3 @@ -import React from 'react'; -import './footer.css'; - const Footer = () => { return ( ); }; diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css deleted file mode 100644 index c214e65..0000000 --- a/frontend/src/components/Footer/footer.css +++ /dev/null @@ -1,27 +0,0 @@ -/* FILEPATH: /Users/chaithrabekal/Documents/frontend/src/components/Footer/footer.css */ - -.footer { - background-color: #333; - color: #fff; - padding: 20px; -} - -.footer ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -.footer li { - display: inline-block; - margin-right: 10px; -} - -.footer a { - color: #fff; - text-decoration: none; -} - -.footer a:hover { - text-decoration: underline; -} diff --git a/frontend/src/components/Nav.jsx b/frontend/src/components/Nav.jsx new file mode 100644 index 0000000..a995720 --- /dev/null +++ b/frontend/src/components/Nav.jsx @@ -0,0 +1,38 @@ +import { Link } from 'react-router-dom'; +import { headerLogo } from '../assets/images'; +import { hamburger } from '../assets/icons'; +import { PrimaryButton, SecondaryButton } from './Buttons'; + +const Nav = () => { + return ( +
+ +
+ ); +}; + +export default Nav; diff --git a/frontend/src/components/NavBar/NavBar.js b/frontend/src/components/NavBar/NavBar.js deleted file mode 100644 index 4608571..0000000 --- a/frontend/src/components/NavBar/NavBar.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import './navbar.css'; - -const Navbar = () => { - return ( - - ); -}; - -export default Navbar; diff --git a/frontend/src/components/NavBar/navbar.css b/frontend/src/components/NavBar/navbar.css deleted file mode 100644 index beddf11..0000000 --- a/frontend/src/components/NavBar/navbar.css +++ /dev/null @@ -1,39 +0,0 @@ -.navbar{ - background-color: #f8f9fa; - padding: 0 20px; - box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); - display: flex; - justify-content: space-between; - align-items: center; - height: 60px; -} - -.navbar__logo{ - font-size: 1.5rem; - font-weight: 600; - color: #007bff; - text-decoration: none; -} - -.navbar__menu{ - display: flex; - align-items: center; - list-style: none; - margin-right: -22px; -} - -.navbar__item{ - padding: 0 10px; -} - -.navbar__link{ - text-decoration: none; - color: #000; - font-size: 1.2rem; - font-weight: 500; -} - -.navbar__link:hover{ - color: #007bff; -} - diff --git a/frontend/src/components/Upload/index.js b/frontend/src/components/Upload/index.js deleted file mode 100644 index d1ba5f3..0000000 --- a/frontend/src/components/Upload/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useState } from 'react'; - -const Upload = () => { - const [selectedImage, setSelectedImage] = useState(null); - - const handleImageUpload = (event) => { - const file = event.target.files[0]; - setSelectedImage(URL.createObjectURL(file)); - }; - - return ( -
- - {selectedImage && Uploaded Image} -
- ); -}; - -export default Upload; diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js new file mode 100644 index 0000000..e6e2e12 --- /dev/null +++ b/frontend/src/components/index.js @@ -0,0 +1,4 @@ +import Nav from './Nav'; +import Footer from './Footer'; + +export { Nav, Footer }; \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e..bd6213e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,13 +1,3 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/frontend/src/index.js b/frontend/src/index.js index 157ceda..d72b7c9 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,13 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; -import { ThemeProvider } from '@mui/material/styles'; import App from './App'; -import theme from './theme'; +import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + - + ); diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx new file mode 100644 index 0000000..929337f --- /dev/null +++ b/frontend/src/pages/About.jsx @@ -0,0 +1,19 @@ +// Header: Same as Home Page +// Content: +// Mission Statement +// Team Introduction +// Why Choose Us +// Footer: Same as Home Page + +// Wireframe: +// ------------------------------------------------- +// | Logo | Home | About | Services | Contact | Login/Signup | +// ------------------------------------------------- +// | Mission Statement | +// ------------------------------------------------- +// | Team Introduction | +// ------------------------------------------------- +// | Why Choose Us | +// ------------------------------------------------- +// | Footer: Links, Social Media, Contact Info | +// ------------------------------------------------- \ No newline at end of file diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx new file mode 100644 index 0000000..f623db5 --- /dev/null +++ b/frontend/src/pages/Contact.jsx @@ -0,0 +1,22 @@ +// Header: Same as Home Page + +// Content: +// Contact Form: Name, Email, Message +// Contact Information: Address, phone number, email +// Map: Embedded Google Map showing office location + +// Footer: Same as Home Page + +// Wireframe: +// ------------------------------------------------- +// | Logo | Home | About | Services | Contact | Login/Signup | +// ------------------------------------------------- +// | Contact Form: Name, Email, Message | +// ------------------------------------------------- +// | Contact Information: Address, Phone, Email | +// ------------------------------------------------- +// | Map: Embedded Google Map | +// ------------------------------------------------- +// | Footer: Links, Social Media, Contact Info | +// ------------------------------------------------- + diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx new file mode 100644 index 0000000..74e081e --- /dev/null +++ b/frontend/src/pages/Home.jsx @@ -0,0 +1,38 @@ +import Hero from "../sections/Hero"; +import FeaturedProperties from "../sections/FeaturedProperties"; + +// Wireframe: +// ------------------------------------------------- +// | Logo | Home | About | Services | Contact | Login/Signup | +// ------------------------------------------------- +// | Hero Section: Headline, Description, Search Bar | +// ------------------------------------------------- +// | Featured Properties (Carousel/Grid) | +// ------------------------------------------------- +// | How It Works (Steps) | +// ------------------------------------------------- +// | Testimonials | +// ------------------------------------------------- +// | Footer: Links, Social Media, Contact Info | +// ------------------------------------------------- + +function Home() { + return ( +
+
+ +
+
+ +
+
+ How It Works +
+
+ Testimonials +
+
+ ); +} + +export default Home; diff --git a/frontend/src/Pages/Login/index.js b/frontend/src/pages/Login.jsx similarity index 94% rename from frontend/src/Pages/Login/index.js rename to frontend/src/pages/Login.jsx index 7615181..7247a9f 100644 --- a/frontend/src/Pages/Login/index.js +++ b/frontend/src/pages/Login.jsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; -import axios from '../../axiosConfig'; -import './styles.css'; +import axios from '../axiosConfig'; const Login = () => { const [email, setEmail] = useState(''); diff --git a/frontend/src/Pages/Properties/index.js b/frontend/src/pages/Properties.jsx similarity index 91% rename from frontend/src/Pages/Properties/index.js rename to frontend/src/pages/Properties.jsx index 9312b2b..64b8cec 100644 --- a/frontend/src/Pages/Properties/index.js +++ b/frontend/src/pages/Properties.jsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; -import './styles.css'; // Import the CSS file -import axios from '../../axiosConfig'; +import axios from '../axiosConfig'; import { Link } from 'react-router-dom'; function Properties() { diff --git a/frontend/src/Pages/Property/index.js b/frontend/src/pages/Property.jsx similarity index 92% rename from frontend/src/Pages/Property/index.js rename to frontend/src/pages/Property.jsx index 7e351b5..5aaba7e 100644 --- a/frontend/src/Pages/Property/index.js +++ b/frontend/src/pages/Property.jsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; -import axios from '../../axiosConfig'; +import axios from '../axiosConfig'; import { useParams } from 'react-router-dom'; -import './styles.css'; function Property() { const [property, setProperty] = useState({}); diff --git a/frontend/src/pages/Services.jsx b/frontend/src/pages/Services.jsx new file mode 100644 index 0000000..3e7b8c8 --- /dev/null +++ b/frontend/src/pages/Services.jsx @@ -0,0 +1,23 @@ +// Header: Same as Home Page +// Content: +// Search and Filter: Search bar, filters for location, price, type of accommodation +// Property Listings: List or grid view of properties with images, brief descriptions, and key details +// Interactive Feature: BeReal-like prompt for property posters to upload real-time images +// Contact Posters: Directly message property posters +// Footer: Same as Home Page + +// Wireframe: +// ------------------------------------------------- +// | Logo | Home | About | Services v | Contact | Login/Signup | +// Dropdown with options: Properties, Students +// ------------------------------------------------- +// | Search and Filter: Search Bar, Filters | +// ------------------------------------------------- +// | Property Listings (List/Grid) | +// ------------------------------------------------- +// | Interactive Feature: BeReal-like prompt | +// ------------------------------------------------- +// | Directly message property posters | +// ------------------------------------------------- +// | Footer: Links, Social Media, Contact Info | +// ------------------------------------------------- \ No newline at end of file diff --git a/frontend/src/Pages/Register/index.js b/frontend/src/pages/Signup.jsx similarity index 88% rename from frontend/src/Pages/Register/index.js rename to frontend/src/pages/Signup.jsx index ccf49a7..e9e433f 100644 --- a/frontend/src/Pages/Register/index.js +++ b/frontend/src/pages/Signup.jsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; -import './styles.css'; -import axios from '../../axiosConfig'; +import axios from '../axiosConfig'; -const Register = () => { +const Signup = () => { // State variables for form fields const [name, setName] = useState(''); const [email, setEmail] = useState(''); @@ -29,8 +28,8 @@ const Register = () => { }; return ( -
-

Register

+
+

Sign Up

@@ -61,10 +60,10 @@ const Register = () => { required />
- +
); }; -export default Register; +export default Signup; diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js new file mode 100644 index 0000000..5a6164e --- /dev/null +++ b/frontend/src/pages/index.js @@ -0,0 +1,7 @@ +import Home from './Home'; +import Login from './Login'; +import Signup from './Signup'; +import Properties from './Properties'; +import Property from './Property'; + +export { Home, Login, Signup, Properties, Property }; \ No newline at end of file diff --git a/frontend/src/sections/FeaturedProperties.jsx b/frontend/src/sections/FeaturedProperties.jsx new file mode 100644 index 0000000..d59c4b7 --- /dev/null +++ b/frontend/src/sections/FeaturedProperties.jsx @@ -0,0 +1,9 @@ +// Carousel or grid of featured properties + +const FeaturedProperties = () => { + return ( +
FeaturedProperties
+ ) +} + +export default FeaturedProperties \ No newline at end of file diff --git a/frontend/src/sections/Hero.jsx b/frontend/src/sections/Hero.jsx new file mode 100644 index 0000000..fde90aa --- /dev/null +++ b/frontend/src/sections/Hero.jsx @@ -0,0 +1,40 @@ +import { Link } from 'react-router-dom' +import { ArrowLongRightIcon } from '@heroicons/react/24/outline' +import { PrimaryButton, SecondaryButton } from '../components/Buttons' +import { bestPlace } from '../assets/images' + +// TODO: +// x Add a catchy headline +// x Add a brief description +// - Add a search bar for properties + +const Hero = () => { + return ( +
+
+ +

Our Summer Deals {'\u{1F389}'}

+ +

+ Find Your Perfect +
+ Home Away From Home +

+

Connecting International Students with Trusted Accommodations Across the US

+
+ + + + + + +
+
+
+ Hero Image +
+
+ ) +} + +export default Hero \ No newline at end of file diff --git a/frontend/src/sections/HowItWorks.jsx b/frontend/src/sections/HowItWorks.jsx new file mode 100644 index 0000000..c3053c8 --- /dev/null +++ b/frontend/src/sections/HowItWorks.jsx @@ -0,0 +1 @@ +// Brief steps on how to use the platform \ No newline at end of file diff --git a/frontend/src/sections/Testimonials.jsx b/frontend/src/sections/Testimonials.jsx new file mode 100644 index 0000000..2f084fd --- /dev/null +++ b/frontend/src/sections/Testimonials.jsx @@ -0,0 +1 @@ +// Quotes from satisfied users \ No newline at end of file diff --git a/frontend/src/theme.js b/frontend/src/theme.js deleted file mode 100644 index 8a1d30d..0000000 --- a/frontend/src/theme.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createTheme } from '@mui/material/styles'; - -const theme = createTheme({ - palette: { - primary: { - main: '#2a0c4e', - }, - secondary: { - main: '#f5f8de', - }, - error: { - main: '#9e2b25', - }, - }, -}); - -export default theme; \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js new file mode 100644 index 0000000..f00f16b --- /dev/null +++ b/frontend/tailwind.config.js @@ -0,0 +1,37 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{html,js,jsx,ts,tsx}"], + theme: { + screens: { + sm: '480px', + md: '768px', + lg: '976px', + xl: '1440px', + }, + colors: { + 'blue': '#1fb6ff', + 'purple': '#7e5bef', + 'pink': '#ff49db', + 'orange': '#ff7849', + 'green': '#13ce66', + 'yellow': '#ffc82c', + 'gray-dark': '#273444', + 'gray': '#8492a6', + 'gray-light': '#d3dce6', + }, + fontFamily: { + sans: ['Graphik', 'sans-serif'], + serif: ['Merriweather', 'serif'], + }, + extend: { + spacing: { + '128': '32rem', + '144': '36rem', + }, + borderRadius: { + '4xl': '2rem', + } + } + }, + plugins: [], +} \ No newline at end of file