CodersforLearning · github-classroom · Jun 21, 2021 · Jun 22, 2021 · Jun 22, 2021 · Jun 22, 2021
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,17 @@
+asset-manifest.json,1624372252289,d3dfe56ca78a0c83df0479f6e8f9347ed8471d0bd763030a4967b60a4fa59a0a
+index.html,1624372252289,5e56a9c4547c520d17ec7365a09387cb99b0c353d10793e1d92a36645d771870
+manifest.json,1624372229091,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+robots.txt,1624372229092,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+static/css/main.b797bbbb.chunk.css,1624372252290,99007f72ba801bee110db053bc37e48ca5a18417acad4cdd76fa77b274789b8c
+static/css/main.b797bbbb.chunk.css.map,1624372252302,f6dfcaf3937079fa838d38a55d07c9ade03133a9e4b602996bfa7acdb5c8c6ee
+static/js/2.b7c222b7.chunk.js.LICENSE.txt,1624372252302,aaa6cf6dd09ddb1bab1116ba7bd3d38f2f513c47279d64972140073cbebed953
+static/js/3.b5976bd6.chunk.js,1624372252300,36cceddbdb2bc0dc43932005824fc214ec352706753bd9da4e73f28e7033c6e1
+static/js/3.b5976bd6.chunk.js.map,1624372252302,e67fe1f07a087227d70399adb531451051e705fd2b6e68b4115e3d13c930bf75
+static/js/main.0a6deb9a.chunk.js,1624372252291,296a3292c01c89113fd80bd953f2b14d394c06636ecc02020056b6eea7df495b
+static/js/main.0a6deb9a.chunk.js.map,1624372252301,ab7e5781711076d858060d0813db85fc77d6ac30c561142dbf1915c53518c8df
+static/js/runtime-main.1240f9b4.js,1624372252300,b5b067a997ec472cd8c229f06330f24f9d505a9640d48525fa8fc8255dddc608
+static/js/runtime-main.1240f9b4.js.map,1624372252301,f16f8d575e1a15a08fe74faca7e8f053c4927211c92cb565506cdf03b455d1d2
+static/css/2.61b4cb56.chunk.css,1624372252301,8eea7a23cc126055d7515599f6c6b7c316953269819b233efe35c6463e0890b9
+static/css/2.61b4cb56.chunk.css.map,1624372252302,0ef9ae9d3f4d0586107b4b54ce94cbd1ee058877e2d539c20cd63401beb6ea60
+static/js/2.b7c222b7.chunk.js,1624372252303,2c6c0c4cc934a4e933b252801301cd751b86179928331ec36a8e508986804138
+static/js/2.b7c222b7.chunk.js.map,1624372252302,cf6529e06c9cfaee2ed019f3e1c32f65b00ed12868355b282616ba26704931c9
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "todo-app-2d091"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 package-lock.json
 yarn.lock
 
+.idea
+
 # For mac people
 .DS.Store
 .env*

diff --git a/README.md b/README.md
@@ -1,3 +1,21 @@
+# Simple todo app
+
+Can add / toggle / delete todos. Filter by status.
+
+Uses Context API for state management
+
+Uses firebase auth / firestore for persistence
+
+Deployed at: 
+### https://todo-app-2d091.web.app
+
+I will try to add a couple more functions on Friday if time allows :) Sorry, busy week.
+
+P.S. Looks bad!
+
+=========================
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -3,11 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^5.0.1",
+    "firebase": "^8.6.8",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,24 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       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 rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       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`.

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,154 @@
-.App {
-  text-align: center;
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
+* {
+  margin: 0px;
+  padding: 0px;
+  /*box-sizing: border-box;*/
+  color: black;
+  font-family: 'Indie Flower', cursive;
+  font-size: large;
+}
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*margin-top: 2rem;*/
+}
+body {
+  color: black;
+  font-family: 'Indie Flower', cursive;
+  min-height: 100vh;
+}
+header {
+  font-size: 2rem;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+header,
+.add-todo-form {
+  min-height: 20vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+.add-todo-form input,
+.add-todo-form button {
+  padding: 0.5rem;
+  font-size: 2rem;
+  border-width: 1px;
+  background: white;
+  box-shadow: 3px 0px 5px 1px;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.add-todo-form button {
+  color: #888888;
+  background: #f7fffe;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.add-todo-form button:hover {
+  background: #adc8fa;
+  color: white;
+}
+.todo-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  align-items: center;
+}
+
+.todo-list {
+  min-width: 30%;
+  list-style: none;
+}
+
+.todo {
+  margin: 0.5rem;
+  background: white;
+  font-size: 1.5rem;
+  color: black;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  transition: all 1s ease;
+}
+.filter-todo {
+  padding: 1rem;
+}
+.todo li {
+  flex: 1;
+}
+
+.trash-btn,
+.complete-btn {
+  background: rgb(203, 203, 203);
   color: white;
+  border: 1px black;
+  padding: 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  box-shadow: 3px 0 5px 1px;
+
 }
 
-.App-link {
-  color: #61dafb;
+.complete-btn:hover {
+  background: rgba(98, 191, 43, 0.32);
+}
+.trash-btn:hover {
+  background: rgba(238, 101, 78, 0.32);
 }
+.todo-item {
+  padding: 1rem 0.5rem;
+  border: 1px black;
+}
+
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.fall {
+  transform: translateY(10rem) rotateZ(20deg);
+  opacity: 0;
+}
+
+.completed {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/*CUSTOM SELECTOR */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background-image: none;
+}
+
+/* Custom Select */
+.select {
+  margin: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+select {
+  color: #000000;
+  cursor: pointer;
+  width: 12rem;
+  border-style: inherit;
+  border-width: 1px;
+  background-color: white;
+  box-shadow: 3px 0 5px 1px;
+
+}
+/* Arrow */
+.select::after {
+  border: 1px black;
+  content: "\25BC";
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  background: #fafafa;
+  cursor: pointer;
+  pointer-events: none;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,28 @@
-import logo from './logo.svg';
-import './App.css';
+import './App.css'
+import Dashboard from "./components/Dashboard";
+import Login from "./components/Login";
+
+
+import Signup from "./components/Signup";
+import {AuthProvider} from "./contexts/AuthContext";
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
+import PrivateRout from "./components/PrivateRout";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+	return (
+		<>
+			<Router>
+				<AuthProvider>
+					<Switch>
+						<PrivateRout exact path="/" component={Dashboard}/>
+						<Route path="/signup" component={Signup}/>
+						<Route path="/login" component={Login}/>
+					</Switch>
+				</AuthProvider>
+			</Router>
+		</>
+	);
 }
 
 export default App;