Solution: Gonzalo García, Marc Parellada and Alberto Chica

.env

@@ -0,0 +1,7 @@
+REACT_APP_API_KEY="AIzaSyAkqtzvUgBJV4LelGiHOrwNDnwgnQ5ghuE"
+REACT_APP_AUTH_DOMAIN="mvcproject-7ca7f.firebaseapp.com"
+REACT_APP_PROJECT_ID="mvcproject-7ca7f"
+REACT_APP_STORAGE_BUCKET="mvcproject-7ca7f.appspot.com"
+REACT_APP_MESSAGING_SENDER_ID="874289015741"
+REACT_APP_APP_ID="1:874289015741:web:a0dd9bf84c4870dd9ec0d4"
+REACT_APP_API_BASE_URL=http://localhost:4000

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#8d0c0b",
+        "activityBar.activeBorder": "#000000",
+        "activityBar.background": "#8d0c0b",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#000000",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "sash.hoverBorder": "#8d0c0b",
+        "statusBar.background": "#5e0807",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#8d0c0b",
+        "statusBarItem.remoteBackground": "#5e0807",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#5e0807",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#5e080799",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#5E0807"
+}

package.json

@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^1.4.2",
+    "@heroicons/react": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
     "dotenv": "^10.0.0",
+    "firebase": "^8.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
@@ -49,6 +52,7 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-react": "^7.27.1",
-    "prettier": "^2.5.1"
+    "prettier": "^2.5.1",
+    "tailwindcss": "^3.0.8"
   }
 }

public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="style.css" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.