twitflex

client/src/App.css

@@ -1,28 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Jomhuria&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200&display=swap');
 .App {
   text-align: center;
+  align-items: center;
 }
 
-.App-logo {
+/* .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
+} */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 20px;
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
+  background-color: rgb(243,247,249);
+  /* height: 150px; */
   padding: 20px;
-  color: white;
+  color: black;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 4.5em;
+  color: rgb(29,161,242);
+  font-family: 'Jomhuria', cursive;
+  font-weight: normal;
+  margin: auto;
 }
 
 .App-intro {
   font-size: large;
+  font-family: 'Arvo', serif;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.examples {
+  padding: 40px;
 }
+
+.gzm {
+  color: black;
+  /* border-bottom: 1px solid rgb(22,32,44); */
+  font-family: "Inter",sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  max-width: 500px;
+  line-height: 26.5px;
+}
+
+@media only screen and (min-width: 600px) {
+  .examples {
+    padding: 80px;
+  }
+}
+
+
+@media screen and (max-width: 380px) {
+  .grid-container {
+    grid-template-columns: auto;
+  }
+}
+

client/src/App.js

@@ -2,19 +2,67 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import Customers from './components/customers';
+import Examples from './components/examples';
+import Footer from './components/footer';
+import '@fontsource/roboto';
+import categories from './categories';
+import { json } from 'body-parser';
+import SearchBar from "./components/searchbar";
+import SearchPage from "./components/searchpage";
+import Index from "./components/index";
+import CheckBoxes from "./checkboxes";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
 
 class App extends Component {
+
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">React Express Starter</h1>
-        </header>
-        <Customers />
-      </div>
-    );
+      <Router>
+        <Switch>
+          <Route path="/:id" children={<CheckBoxes />} />
+          <Route path="/">
+            <div className="App">
+              <Index />
+            </div>
+          </Route>
+        </Switch>
+      </Router>
+    )
   }
+  //     <div className="App">
+  //       <header className="App-header">
+  //         <h1 className="App-title">flashfollow</h1>
+  //         <h2>Instantly integrate yourself into a Twitter community by following up to a hundred accounts</h2>
+  //         <h3>A drop by <a href="https://genzmafia.com/" className="gzm">Gen Z Mafia</a></h3>
+  //         <h2>Explore Communities</h2>
+  //       </header>
+  //       <div style={{paddingTop: 30}}>
+  //       {/* <SearchBar
+  //         placeholder="Search"
+  //         onChange={(e) => console.log(e.target.value)}
+  //       /> */}
+  //       </div>
+  //       <SearchPage />
+  //       {/* <div className="examples">
+  //       <div className="grid-container">
+  //       {categories.map((category, i) => (
+  //                   <div key={i} className="grid-child">
+  //                     {category.name}
+  //                   <Examples name={category.title} description={category.text} image={category.img}/>
+  //                   </div>
+  //                 ))}
+  //       </div>
+  //       </div> */}
+  //       <Footer />
+  //     </div>
+  //   );
+  // }
 }
 
 export default App;

client/src/CheckBoxesTwo.js

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  useParams
+} from "react-router-dom";
+
+// Params are placeholders in the URL that begin
+// with a colon, like the `:id` param defined in
+// the route in this example. A similar convention
+// is used for matching dynamic segments in other
+// popular web frameworks like Rails and Express.
+
+export default function ParamsExample() {
+  return (
+    <Router>
+      <div>
+        <h2>Accounts</h2>
+
+        <ul>
+          <li>
+            <Link to="/netflix">Netflix</Link>
+          </li>
+          <li>
+            <Link to="/zillow-group">Zillow Group</Link>
+          </li>
+          <li>
+            <Link to="/yahoo">Yahoo</Link>
+          </li>
+          <li>
+            <Link to="/modus-create">Modus Create</Link>
+          </li>
+        </ul>
+
+        <Switch>
+          <Route path="/:id" children={<Child />} />
+        </Switch>
+      </div>
+    </Router>
+  );
+}
+
+function Child() {
+  // We can use the `useParams` hook here to access
+  // the dynamic pieces of the URL.
+  let { id } = useParams();
+
+  return (
+    <div>
+      <h3>ID: {id}</h3>
+    </div>
+  );
+}

client/src/Follow.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import Customers from './components/customers';
+import Examples from './components/examples';
+import '@fontsource/roboto';
+import categories from './categories';
+import { json } from 'body-parser';
+
+
+class Follow extends Component {
+
+  render() {
+    return (
+      <div className="Follow">
+        <header className="App-header">
+          <h1 className="App-title">flashfollow</h1>
+          <h2>Instantly integrate yourself into a twitter community by following up to a hundred accounts</h2>
+          <h3>A drop by <a href="https://genzmafia.com/">GenZMafia</a></h3>
+          <h2>Explore Communities</h2>
+        </header>
+        <div className="examples">
+        <div className="grid-container">
+        {categories.map((category, i) => (
+                    <div key={i} className="grid-child">
+                      {category.name}
+                    <Examples name={category.title} description={category.text} image={category.img}/>
+                    </div>
+                  ))}
+        </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

client/src/categories.js

@@ -0,0 +1,34 @@
+const categories = [
+        {
+            "img":"./images/paulgraham.jpg",
+            "title": "Venture Capitalists",
+            "text": "VCs might be cringe but let's face it, so is your Saas startup"
+        },
+        {
+            "img":"./images/crypto.jpg",
+            "title": "Crypto Artists",
+            "text": "The only people with as much Etherium as your wierd uncle"
+        },
+        {
+            "img":"./images/stripe.jpg",
+            "title": "Startup Founders",
+            "text": "If you work hard enough and are ambitious enough, one day, they might just retweet you"
+        },
+        {
+            "img":"./images/dake.jpg",
+            "title": "Wrestlers",
+            "text": "If just 10 people flashfollow wrestlers this app will be worth making. No this is not WWE"
+        },
+        {
+            "img":"./images/kevinhart.jpg",
+            "title": "Comedians",
+            "text": "Have a laugh between soul-crushing hours waiting for someone to like your tweet"
+        },
+        {
+            "img":"./images/pen.png",
+            "title": "Help this grow!",
+            "text": "Click here to send feedback or suggest new categories!"
+        }
+]
+
+export default categories;

client/src/checkboxes.css

@@ -0,0 +1,108 @@
+.Checkboxes {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  }
+
+  .slider {
+    margin: auto;
+    width: 380px;
+    /* border: 5px solid black; */
+    padding: 10px;
+  }
+
+  .buttonContainer {
+    padding: 5px;
+  }
+
+  .buttonWiderContainer {
+    /* padding: 5px; */
+    display: grid;
+    grid-template-columns: 105px 1fr;
+    grid-gap: 8px;
+  }
+
+  .banner-follow {
+    text-align: left;
+    color: rgb(22,32,44);
+    font-size: 45px;
+    margin-block-end: 0px;    
+    font-family: "Inter",sans-serif;
+    display: block;
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+.lower-banner {
+    color: rgb(99,117,131);
+    font-weight: 500;
+    font-size: 18px;
+    max-width: 500px;
+    line-height: 26.5px;
+  }
+
+  li {
+    font-size: 1.3rem;
+    font-weight: 500;
+    font-family: "Inter",sans-serif;
+  }
+  .member {
+    margin-top: 0.3rem;
+    vertical-align: text-bottom;
+  }
+
+  .result {
+    margin-top: 1rem;
+  }
+
+  .member-list,
+  .total {
+    width: 30%;
+    margin: 0 auto;
+  }
+
+  .member-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .member-list li {
+    margin-bottom: 0.5rem;
+  }
+
+  .members-list-item {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  /* .members-list li:last-child {
+    border-top: 1px solid #ccc;
+    margin-top: 1rem;
+    padding-top: 1rem;
+  } */
+
+  .members-list-item label {
+    /* vertical-align: text-bottom; */
+    margin-left: 0.2rem;
+  }
+
+  .total {
+    margin-top: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .slider {
+        width: 80%;
+    }
+    .members-list,
+    .total {
+      width: 90%;
+    }
+    li {
+        font-size: 1rem;
+      }
+  }
+