Improvements to Website

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 .DS_Store
 ngrok
 build/
+lambda/

netlify-functions/getBlogs.js

@@ -0,0 +1,22 @@
+const axios = require("axios");
+const xml2js = require("xml2js");
+
+exports.handler = async (event, context, callback) => {
+  const mediumURL = "https://medium.com/feed/codeuino";
+  try {
+    const response = await axios.get(`${mediumURL}`);
+    const data = response.data;
+    xml2js.parseString(data, (err, result) => {
+      const sendthis = result.rss.channel[0].item.slice(0, 3);
+      callback(null, {
+        statusCode: 200,
+        headers: {
+          "Access-Control-Allow-Origin": "*"
+        },
+        body: JSON.stringify(sendthis)
+      });
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};

netlify-functions/getLikedTweets.js

@@ -0,0 +1,19 @@
+const TwitterAxios = require("../src/helpers/twitterAxios");
+
+exports.handler = async (event, context, callback) => {
+  try {
+    const likedTweetsResponse = await TwitterAxios.get(
+      "/favorites/list.json?count=50&screen_name=codeuino"
+    );
+
+    callback(null, {
+      statusCode: 200,
+      headers: {
+        "Access-Control-Allow-Origin": "*"
+      },
+      body: JSON.stringify(likedTweetsResponse.data)
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};

netlify-functions/getTweets.js

@@ -0,0 +1,19 @@
+const TwitterAxios = require("../src/helpers/twitterAxios");
+
+exports.handler = async (event, context, callback) => {
+  try {
+    const allTweetsResponse = await TwitterAxios.get(
+      "/statuses/user_timeline.json?screen_name=codeuino&count=100"
+    );
+
+    callback(null, {
+      statusCode: 200,
+      headers: {
+        "Access-Control-Allow-Origin": "*"
+      },
+      body: JSON.stringify(allTweetsResponse.data)
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};

netlify.toml

@@ -0,0 +1,6 @@
+[ build ]
+  functions = "lambda"
+
+# provide twitter api key
+[build.environment]
+  TWITTER_API_KEY = "AAAAAAAAAAAAAAAAAAAAAIWYFwEAAAAAA3RBpjzS8nlirryXCXM%2FTsl8sKo%3DaWb1t2lrgmUeZqvFF6OTiyALws9gdVKkO0009mYmqvDcr2LAy2"

package.json

@@ -5,6 +5,8 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
@@ -25,31 +27,38 @@
     "markdown-it-sup": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "marked": "^0.8.0",
+    "netlify-lambda": "^2.0.1",
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
+    "react-html-parser": "^2.0.2",
     "react-markdown": "^4.3.1",
     "react-markdown-editor-lite": "^0.5.2",
     "react-markdown-to-html": "^1.0.11",
+    "react-multi-carousel": "^2.5.5",
     "react-router": "^3.2.5",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
     "react-scripts": "^3.4.0",
     "react-slideshow-image": "^1.3.3",
+    "react-transition-group": "^4.4.1",
     "react-twitter-embed": "^3.0.3",
     "serve": "^11.3.0",
-    "typescript": "^3.9.6"
+    "typescript": "^3.9.6",
+    "xml2js": "^0.4.23"
   },
   "resolutions": {
     "react-dev-utils": "10.1.0"
   },
   "scripts": {
+    "lambda-serve": "netlify-lambda serve netlify-functions",
     "heroku-postbuild": "npm run build",
     "start": "serve -s build -l 3000",
+    "prebuild": "netlify-lambda build netlify-functions",
     "build": "CI=false && set \"CI=false\" && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "start-dev": "react-scripts start"
+    "start-dev": "npm run lambda-serve & react-scripts start && fg"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.css

@@ -1,6 +1,6 @@
 @font-face {
-  font-family: 'Inter';
-  src: local('Inter'), url(./fonts/Inter-Regular.otf) format('opentype');
+  font-family: "Inter";
+  src: local("Inter"), url(./fonts/Inter-Regular.otf) format("opentype");
 }
 
 p {
@@ -16,53 +16,38 @@ p {
   pointer-events: none;
 }
 
-.navbar{
-  height:10vh;
+.navbar {
+  height: 10vh;
 }
-.navbar-collapse.show{
+.navbar-collapse.show {
   overflow-y: hidden;
 }
-/* #logo{
-  width:10vw;
-} */
-@media only screen and (max-width:800px){
-  #logo{
-    width:30vw !important;
+
+@media only screen and (max-width: 800px) {
+  #logo {
+    width: 30vw !important;
   }
 }
-.main{
+.main {
   margin: 0 auto;
-  /* margin-top:12vh; */
   max-width: 960;
   padding: 0px 1.0875rem 1.45rem;
   padding-top: 0;
 }
-footer{
+footer {
   margin-top: 3vh;
-  /* background-color:#869AB8; */
-  /* color:white; */
-}
-/* @media (min-width: 1200px){
-.container {
-    max-width: 80% !important;
 }
-} */
-/* footer h3{
-
-  float:left
-} */
 
 #discover1 {
   font-family: Raleway-SemiBold;
   font-size: 0.8em;
-  color:black;
+  color: black;
   letter-spacing: 1px;
   line-height: 15px;
   border: 2px solid black;
   border-radius: 40px;
   background: white;
   transition: all 0.3s ease 0s;
-  /* float:right; */
 }
 
 #discover2 {
@@ -72,30 +57,24 @@ footer{
   display: none;
 }
 
-@media only screen and (max-width:1800px){
-  .navbar{
-    height:12vh
+@media only screen and (max-width: 1800px) {
+  .navbar {
+    height: 12vh;
   }
-  /* .main{
-    margin-top:12vh
-  } */
 }
 
-@media only screen and (max-width:1024px){
-  .navbar{
-    height:12vh
-  }
-  .main{
-    /* margin-top:12vh */
+@media only screen and (max-width: 1024px) {
+  .navbar {
+    height: 12vh;
   }
 }
 
-@media only screen and (max-width:320px){
-  .navbar{
-    height:16vh;
+@media only screen and (max-width: 320px) {
+  .navbar {
+    height: 16vh;
   }
-  .main{
-    margin-top:16vh
+  .main {
+    margin-top: 16vh;
   }
 }
 
@@ -105,8 +84,6 @@ footer{
   }
 }
 
-
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -122,6 +99,26 @@ footer{
   color: #61dafb;
 }
 
+.fade-appear,
+.fade-enter {
+  opacity: 0;
+  z-index: 1;
+}
+.fade-appear-active,
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 300ms linear 150ms;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+  opacity: 0;
+  transition: opacity 150ms linear;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,41 +1,46 @@
 import { Switch, Route, HashRouter as Router } from "react-router-dom";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import React from "react";
 import "./App.css";
-import NewBlog from "./pages/NewBlog/NewBlog";
-import BlogList from "./pages/Blogs/BlogList";
 import NewHome from "./pages/Home/NewHome";
-import JoinUs from "./pages/JoinUs/JoinUs";
 import NavBar from "./components/NavBar";
-import About from "./pages/About/About";
 import Footer from "./components/Footer";
-import Blog from "./pages/Blogs/Blog";
 import Team from "./pages/Team/Team";
 import COC from "./pages/COC/COC";
 
 function App() {
   return (
-    <>
-      <div className="App" style={{ width: "100%" }}>
-        <Router>
-          <NavBar />
-          <Switch>
-            <Route path="/team">
-              <Team />
-            </Route>
-            <Route path="/joinus">
-              <JoinUs />
-            </Route>
-            <Route path="/codeofconduct">
-              <COC />
-            </Route>
-            <Route exact path="/">
-              <NewHome />
-            </Route>
-          </Switch>
-          <Footer />
-        </Router>
-      </div>
-    </>
+    <div className="App" style={{ width: "100%" }}>
+      <Router>
+        <NavBar />
+        <Route
+          render={({ location }) => {
+            return (
+              <TransitionGroup>
+                <CSSTransition
+                  timeout={450}
+                  classNames="fade"
+                  key={location.pathname}
+                >
+                  <Switch location={location}>
+                    <Route path="/team">
+                      <Team />
+                    </Route>
+                    <Route path="/codeofconduct">
+                      <COC />
+                    </Route>
+                    <Route exact path="/">
+                      <NewHome />
+                    </Route>
+                  </Switch>
+                </CSSTransition>
+              </TransitionGroup>
+            );
+          }}
+        />
+        <Footer />
+      </Router>
+    </div>
   );
 }
 

src/components/Activities/ActivityCard.css

@@ -9,6 +9,11 @@
   transition: box-shadow 1s ease;
 }
 
+.activity-card.activity:hover .activity-card-img-top.activity {
+  transform: scale(1.2);
+  overflow: hidden;
+}
+
 .activity-card.activity.activity-card-body {
   padding: 1rem 0;
 }
@@ -48,11 +53,6 @@
   object-fit: scale-down;
 }
 
-.activity-card-img-top.activity:hover {
-  transform: scale(1.2);
-  overflow: hidden;
-}
-
 .activity-card-description {
   text-align: left;
 }
@@ -71,4 +71,4 @@
   margin-bottom: 1rem;
   height: max-content !important;
   font-weight: bold;
-}
+}