├── Procfile
├── .gitignore
├── client
    ├── src
    │   ├── components
    │   │   ├── NavComps
    │   │   │   ├── NavOut
    │   │   │   │   ├── NavOut.module.css
    │   │   │   │   └── NavOut.tsx
    │   │   │   ├── NavLogged
    │   │   │   │   ├── NavLogged.module.css
    │   │   │   │   ├── NavLogged.const.ts
    │   │   │   │   └── NavLogged.tsx
    │   │   │   ├── Hamburger
    │   │   │   │   └── Hamburger.tsx
    │   │   │   ├── Nav
    │   │   │   │   └── Nav.tsx
    │   │   │   ├── ButtonBox
    │   │   │   │   └── ButtonBox.tsx
    │   │   │   └── NavMobile
    │   │   │   │   └── NavMobile.tsx
    │   │   ├── Modal
    │   │   │   ├── Modal.module.css
    │   │   │   └── Modal.tsx
    │   │   ├── Header
    │   │   │   └── Header.tsx
    │   │   ├── FooterComps
    │   │   │   ├── FooterNav
    │   │   │   │   └── FooterNav.tsx
    │   │   │   ├── Footer
    │   │   │   │   └── Footer.tsx
    │   │   │   └── FooterIcons
    │   │   │   │   └── FooterIcons.tsx
    │   │   ├── Who
    │   │   │   └── Who.tsx
    │   │   ├── Team
    │   │   │   └── Team.tsx
    │   │   ├── Why
    │   │   │   └── Why.tsx
    │   │   ├── Stats
    │   │   │   └── Stats.tsx
    │   │   ├── Hero
    │   │   │   └── Hero.tsx
    │   │   └── Auth
    │   │   │   └── Auth.tsx
    │   ├── Portal
    │   │   ├── Portal.module.css
    │   │   └── Portal.tsx
    │   ├── react-app-env.d.ts
    │   ├── index.css
    │   ├── models
    │   │   ├── TeamData.tsx
    │   │   └── TeamData.ts
    │   ├── pages
    │   │   ├── Home.tsx
    │   │   └── Portfolio.tsx
    │   ├── index.tsx
    │   ├── App.tsx
    │   └── features
    │   │   ├── auth-ctx.tsx
    │   │   └── ui-ctx.tsx
    ├── public
    │   ├── assets
    │   │   └── hero.jpg
    │   └── index.html
    ├── postcss.config.js
    ├── tailwind.config.js
    ├── .gitignore
    ├── tsconfig.json
    └── package.json
├── img1.png
├── server
    ├── app.js
    ├── test
    │   └── auth.rest
    └── index.js
├── package.json
├── LICENSE
├── ROSTER.md
├── ROADMAP.md
├── CONTRIBUTING.md
└── README.md


/Procfile:
--------------------------------------------------------------------------------
1 | web: node server/app.js


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | node_modules
3 | .DS_Store


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavOut/NavOut.module.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/client/src/Portal/Portal.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 |   z-index: 999;
3 | }
4 | 


--------------------------------------------------------------------------------
/client/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />;
2 | 


--------------------------------------------------------------------------------
/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Medic1111/FINALLY-SEEN/HEAD/img1.png


--------------------------------------------------------------------------------
/client/public/assets/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Medic1111/FINALLY-SEEN/HEAD/client/public/assets/hero.jpg


--------------------------------------------------------------------------------
/client/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | html {
6 |   scroll-behavior: smooth;
7 | }
8 | 


--------------------------------------------------------------------------------
/client/src/components/Modal/Modal.module.css:
--------------------------------------------------------------------------------
1 | .article {
2 |   position: fixed;
3 |   top: 0;
4 |   left: 0;
5 |   height: 100%;
6 |   width: 100%;
7 | }
8 | 


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
1 | const app = require("./index");
2 | 
3 | app.listen(process.env.PORT || 3002, (err) =>
4 |   err ? console.log(err) : console.log("Server Spinning")
5 | );
6 | 


--------------------------------------------------------------------------------
/client/src/models/TeamData.tsx:
--------------------------------------------------------------------------------
 1 | export interface TeamData {
 2 |   collaborators: number;
 3 |   commits: number;
 4 |   prs: number;
 5 |   top: {
 6 |     avatar_url: string;
 7 |     login: string;
 8 |     html_url: string;
 9 |   }[];
10 | }
11 | 


--------------------------------------------------------------------------------
/client/src/models/TeamData.ts:
--------------------------------------------------------------------------------
 1 | export interface TeamData {
 2 |   collaborators: number;
 3 |   commits: number;
 4 |   prs: number;
 5 |   top: TopData[];
 6 | }
 7 | 
 8 | interface TopData {
 9 |   avatar_url: string;
10 |   login: string;
11 |   html_url: string;
12 | }
13 | 


--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
 4 |   theme: {
 5 |     backgroundImage: {
 6 |       "hero-img": "url('../public/assets/hero.jpg')",
 7 |     },
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | };
12 | 


--------------------------------------------------------------------------------
/client/src/components/Modal/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Auth from "../Auth/Auth";
 3 | import classes from "./Modal.module.css";
 4 | 
 5 | const Modal: React.FC = () => {
 6 |   return (
 7 |     <article className={classes.article}>
 8 |       <Auth />
 9 |     </article>
10 |   );
11 | };
12 | 
13 | export default Modal;
14 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavLogged/NavLogged.module.css:
--------------------------------------------------------------------------------
 1 | .navLink {
 2 |   color: #6b7280;
 3 |   transition: 0.125s;
 4 | }
 5 | 
 6 | .navLink:hover {
 7 |   opacity: 0.8;
 8 | }
 9 | 
10 | @media (max-width: 797px) {
11 |   .text {
12 |     display: none;
13 |   }
14 | }
15 | 
16 | @media (min-width: 798px) {
17 |   .icon {
18 |     display: none;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/client/src/pages/Home.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Header from "../components/Header/Header";
 3 | import Hero from "../components/Hero/Hero";
 4 | import Who from "../components/Who/Who";
 5 | import Why from "../components/Why/Why";
 6 | 
 7 | const Home: React.FC = () => {
 8 |   return (
 9 |     <>
10 |       <Hero />
11 |       <Who />
12 |       <Why />
13 |     </>
14 |   );
15 | };
16 | 
17 | export default Home;
18 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavLogged/NavLogged.const.ts:
--------------------------------------------------------------------------------
 1 | export const NAV_ITEMS = [
 2 |   {
 3 |     label: "Top",
 4 |     icon: "keyboard_double_arrow_up",
 5 |     url: "https://github.com/Medic1111/FINALLY-SEEN",
 6 |   },
 7 |   {
 8 |     label: "Latest",
 9 |     icon: "fiber_new",
10 |     url: "https://github.com/Medic1111/FINALLY-SEEN",
11 |   },
12 |   {
13 |     label: "Logout",
14 |     icon: "logout",
15 |     url: "https://github.com/Medic1111/FINALLY-SEEN",
16 |   },
17 | ];
18 | 


--------------------------------------------------------------------------------
/client/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import AuthProvider from "./features/auth-ctx";
 6 | import UiProvider from "./features/ui-ctx";
 7 | 
 8 | const root = ReactDOM.createRoot(
 9 |   document.getElementById("root") as HTMLElement
10 | );
11 | root.render(
12 |   <React.StrictMode>
13 |     <UiProvider>
14 |       <AuthProvider>
15 |         <App />
16 |       </AuthProvider>
17 |     </UiProvider>
18 |   </React.StrictMode>
19 | );
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "finally-seen",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node server/app.js",
 8 |     "build": "cd client && npm install && npm run build"
 9 |   },
10 |   "author": "Aryse <medictansy@gmail.com>",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "bcrypt": "^5.1.0",
14 |     "cors": "^2.8.5",
15 |     "dotenv": "^16.0.3",
16 |     "express": "^4.18.2",
17 |     "jsonwebtoken": "^8.5.1",
18 |     "mongoose": "^6.7.2",
19 |     "morgan": "^1.10.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/client/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"]
20 | }
21 | 


--------------------------------------------------------------------------------
/client/src/Portal/Portal.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classes from "./Portal.module.css";
 3 | import ReactDOM from "react-dom";
 4 | const root = document.getElementById("portal") as HTMLElement;
 5 | 
 6 | const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 7 |   return <article className={classes.wrapper}>{children}</article>;
 8 | };
 9 | 
10 | const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
11 |   return (
12 |     <React.Fragment>
13 |       {ReactDOM.createPortal(<Wrapper>{children}</Wrapper>, root)}
14 |     </React.Fragment>
15 |   );
16 | };
17 | 
18 | export default Portal;
19 | 


--------------------------------------------------------------------------------
/client/src/components/Header/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useContext } from "react";
 2 | import Nav from "../NavComps/Nav/Nav";
 3 | import NavMobile from "../NavComps/NavMobile/NavMobile";
 4 | import { UiCtx } from "../../features/ui-ctx";
 5 | 
 6 | const Header: React.FC = () => {
 7 |   const uiMgr = useContext(UiCtx);
 8 | 
 9 |   return (
10 |     <header aria-label="Site Header" className="bg-white">
11 |       <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
12 |         <div className="flex h-16 items-center justify-between">
13 |           <h1 className="text-teal-600 text-3xl">FS</h1>
14 |           <Nav />
15 |           {uiMgr.showMobileNav && <NavMobile />}
16 |         </div>
17 |       </div>
18 |     </header>
19 |   );
20 | };
21 | 
22 | export default Header;
23 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavLogged/NavLogged.tsx:
--------------------------------------------------------------------------------
 1 | import { NAV_ITEMS } from "./NavLogged.const";
 2 | import classes from "./NavLogged.module.css";
 3 | 
 4 | const NavLogged: React.FC = () => {
 5 |   return (
 6 |     <nav>
 7 |       <ul className="flex items-center gap-6 text-sm">
 8 |         {NAV_ITEMS.map(({ label, icon, url }) => (
 9 |           <li key={label}>
10 |             <a href={url}>
11 |               <span className={`${classes.navLink} ${classes.text}`}>
12 |                 {label}
13 |               </span>
14 |               <span className={`${classes.navLink} ${classes.icon}`}>
15 |                 <span className="material-symbols-outlined">{icon}</span>
16 |               </span>
17 |             </a>
18 |           </li>
19 |         ))}
20 |       </ul>
21 |     </nav>
22 |   );
23 | };
24 | 
25 | export default NavLogged;
26 | 


--------------------------------------------------------------------------------
/server/test/auth.rest:
--------------------------------------------------------------------------------
 1 | @base_url = http://localhost:3002/api/v1
 2 | 
 3 | # LOGIN ROUTE CORRECT CREDENTIALS
 4 | 
 5 | POST {{base_url}}/login HTTP/1.1
 6 | Content-Type: application/json
 7 | 
 8 | {
 9 |   "username": "Medic1111",
10 |   "password": "111111"
11 | }
12 | 
13 | ###
14 | 
15 | # LOGIN ROUTE MISSING CREDENTIALS
16 | 
17 | POST {{base_url}}/login HTTP/1.1
18 | Content-Type: application/json
19 | 
20 | {
21 |   "username": "dkpsakdspa",
22 |   "password": ""
23 | }
24 | 
25 | ###
26 | 
27 | # LOGIN ROUTE NOT REGISTERED
28 | 
29 | POST {{base_url}}/login HTTP/1.1
30 | Content-Type: application/json
31 | 
32 | {
33 |   "username": "medic111111",
34 |   "password": "111"
35 | }
36 | 
37 | 
38 | ###
39 | 
40 | # LOGIN ROUTE WRONG PASSWORD
41 | 
42 | POST {{base_url}}/login HTTP/1.1
43 | Content-Type: application/json
44 | 
45 | {
46 |   "username": "medic1111",
47 |   "password": "this_is_not_my_password"
48 | }
49 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/Hamburger/Hamburger.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { UiCtx } from "../../../features/ui-ctx";
 3 | 
 4 | const Hamburger: React.FC = () => {
 5 |   const uiMgr = useContext(UiCtx);
 6 | 
 7 |   return (
 8 |     <div className="block md:hidden">
 9 |       <button
10 |         onClick={() => {
11 |           uiMgr.setShowMobileNav(true);
12 |         }}
13 |         className="rounded bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75"
14 |       >
15 |         <svg
16 |           xmlns="http://www.w3.org/2000/svg"
17 |           className="h-5 w-5"
18 |           fill="none"
19 |           viewBox="0 0 24 24"
20 |           stroke="currentColor"
21 |           strokeWidth="2"
22 |         >
23 |           <path
24 |             strokeLinecap="round"
25 |             strokeLinejoin="round"
26 |             d="M4 6h16M4 12h16M4 18h16"
27 |           />
28 |         </svg>
29 |       </button>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default Hamburger;
35 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/Nav/Nav.tsx:
--------------------------------------------------------------------------------
 1 | // ICONMONSTR
 2 | import ButtonBox from "../ButtonBox/ButtonBox";
 3 | import Hamburger from "../Hamburger/Hamburger";
 4 | import { useContext } from "react";
 5 | import { UiCtx } from "../../../features/ui-ctx";
 6 | import { AuthCtx } from "../../../features/auth-ctx";
 7 | import NavLogged from "../NavLogged/NavLogged";
 8 | import NavOut from "../NavOut/NavOut";
 9 | 
10 | const Nav: React.FC = () => {
11 |   const uiMgr = useContext(UiCtx);
12 |   const authMgr = useContext(AuthCtx);
13 |   return (
14 |     <div className="md:flex md:items-center md:gap-12">
15 |       <nav aria-label="Site Nav" className="hidden md:block">
16 |         <ul className="flex items-center gap-6 text-sm">
17 |           {!authMgr.isAuth ? <NavOut /> : <NavLogged />}
18 |         </ul>
19 |       </nav>
20 | 
21 |       <div className="flex items-center gap-4">
22 |         {!uiMgr.showMobileNav && !authMgr.isAuth && <ButtonBox />}
23 |         <Hamburger />
24 |       </div>
25 |     </div>
26 |   );
27 | };
28 | 
29 | export default Nav;
30 | 


--------------------------------------------------------------------------------
/client/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import React, { useEffect, useContext } from "react";
 3 | import { AuthCtx } from "./features/auth-ctx";
 4 | import Footer from "./components/FooterComps/Footer/Footer";
 5 | import Home from "./pages/Home";
 6 | import Portfolio from "./pages/Portfolio";
 7 | import Modal from "./components/Modal/Modal";
 8 | import Header from "./components/Header/Header";
 9 | import { UiCtx } from "./features/ui-ctx";
10 | 
11 | function App() {
12 |   const authMgr = useContext(AuthCtx);
13 |   const uiMgr = useContext(UiCtx);
14 | 
15 |   const fetchTest = async () => {
16 |     await axios
17 |       .get("/api")
18 |       .then((serverRes) => console.log(serverRes.data))
19 |       .catch((err) => console.log(err));
20 |   };
21 | 
22 |   useEffect(() => {
23 |     fetchTest();
24 |   }, []);
25 | 
26 |   return (
27 |     <div className="App">
28 |       <Header />
29 |       {authMgr.isAuth ? <Portfolio /> : <Home />}
30 |       {uiMgr.showModal && <Modal />}
31 |       <Footer />
32 |     </div>
33 |   );
34 | }
35 | 
36 | export default App;
37 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/ButtonBox/ButtonBox.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { AuthCtx } from "../../../features/auth-ctx";
 3 | import { UiCtx } from "../../../features/ui-ctx";
 4 | 
 5 | const ButtonBox: React.FC = () => {
 6 |   const uiMgr = useContext(UiCtx);
 7 |   const authMgr = useContext(AuthCtx);
 8 | 
 9 |   return (
10 |     <div className="sm:flex sm:gap-4">
11 |       <p
12 |         className="cursor-pointer rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow"
13 |         onClick={() => {
14 |           uiMgr.setShowModal(true);
15 |           authMgr.setIsLoggin(true);
16 |         }}
17 |       >
18 |         Login
19 |       </p>
20 | 
21 |       <div className="hidden sm:flex">
22 |         <p
23 |           className="cursor-pointer rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600"
24 |           onClick={() => {
25 |             uiMgr.setShowModal(true);
26 |             authMgr.setIsLoggin(false);
27 |           }}
28 |         >
29 |           Register
30 |         </p>
31 |       </div>
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default ButtonBox;
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Aryse Gabrielle Pagano
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/ROSTER.md:
--------------------------------------------------------------------------------
 1 | # WELCOME TO THE ROSTER
 2 | 
 3 | > The perfect place for first time ever contributions
 4 | 
 5 | ### This is the roster
 6 | 
 7 | > Where collaborator's contact info can be found. Please skip a line, `---`, skip another line and add the template I have below (obviously with your information)
 8 | 
 9 | ### COLLABORATORS:
10 | 
11 | ---
12 | 
13 | **:point_right: Aryse Tansy**
14 | :e-mail: paganowebdev@gmail.com
15 | :computer: [Portfolio](https://www.pagano.dev/)
16 | 
17 | ---
18 | 
19 | **:point_right: Cong Su Nguyen**
20 | :e-mail: sub1910692@student.ctu.edu.vn
21 | 
22 | ---
23 | 
24 | 
25 | **:point_right: Priya Saraf**
26 | :e-mail: priyasaraf1011@gmail.com
27 | 
28 | ---
29 | 
30 | **:point_right: Aditya Narayan**
31 | :e-mail: 29adityanarayan2000@gmail.com
32 | 
33 | ---
34 | 
35 | **:point_right: Yahli Gitzi**
36 | :e-mail: yahligitzi2@gmail.com
37 | 
38 | ---
39 | 
40 | **:point_right: Wasiu Adelakun**
41 | :e-mail: adelakunwasiu1000@gmail.com
42 | :computer: [Portfolio](https://waslead.netlify.app/)
43 | 
44 | ---
45 | 
46 | **:point_right: Augustine Kirumba**
47 | :e-mail: kirumbaaugustinewambugu@gmail.com
48 | 
49 | ---
50 | 
51 | **:point_right: Matthew Mu** :e-mail: matty.mu96@gmail.com


--------------------------------------------------------------------------------
/client/src/components/FooterComps/FooterNav/FooterNav.tsx:
--------------------------------------------------------------------------------
 1 | const FooterNav: React.FC = () => {
 2 |   return (
 3 |     <nav aria-label="Footer Nav" className="mt-12">
 4 |       <ul className="flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12">
 5 |         <li>
 6 |           <a
 7 |             className="text-gray-700 transition hover:text-gray-700/75"
 8 |             href="/"
 9 |           >
10 |             Github
11 |           </a>
12 |         </li>
13 | 
14 |         <li>
15 |           <a
16 |             className="text-gray-700 transition hover:text-gray-700/75"
17 |             href="#who"
18 |           >
19 |             Who
20 |           </a>
21 |         </li>
22 | 
23 |         <li>
24 |           <a
25 |             className="text-gray-700 transition hover:text-gray-700/75"
26 |             href="#why"
27 |           >
28 |             Why
29 |           </a>
30 |         </li>
31 | 
32 |         <li>
33 |           <a
34 |             className="text-gray-700 transition hover:text-gray-700/75"
35 |             href="/"
36 |           >
37 |             Collab
38 |           </a>
39 |         </li>
40 |       </ul>
41 |     </nav>
42 |   );
43 | };
44 | 
45 | export default FooterNav;
46 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavOut/NavOut.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { UiCtx } from "../../../features/ui-ctx";
 3 | import classes from "./NavOut.module.css";
 4 | 
 5 | const NavOut: React.FC = () => {
 6 |   const uiMgr = useContext(UiCtx);
 7 |   return (
 8 |     <>
 9 |       {" "}
10 |       <a
11 |         href="https://github.com/Medic1111/FINALLY-SEEN"
12 |         className="px-6 py-3"
13 |         target="_blank"
14 |       >
15 |         {" "}
16 |         Github{" "}
17 |       </a>
18 |       <a
19 |         onClick={() => uiMgr.setShowMobileNav(false)}
20 |         href="#who"
21 |         className="px-6 py-3"
22 |       >
23 |         {" "}
24 |         Who{" "}
25 |       </a>
26 |       <a
27 |         onClick={() => uiMgr.setShowMobileNav(false)}
28 |         href="#why"
29 |         className="flex items-center justify-between px-6 py-3"
30 |       >
31 |         Why
32 |       </a>
33 |       <a
34 |         href="https://github.com/Medic1111/FINALLY-SEEN/blob/main/CONTRIBUTING.md"
35 |         className="flex items-center justify-between px-6 py-3"
36 |       >
37 |         Collab
38 |       </a>
39 |     </>
40 |   );
41 | };
42 | 
43 | export default NavOut;
44 | 


--------------------------------------------------------------------------------
/client/src/components/FooterComps/Footer/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import FooterIcons from "../FooterIcons/FooterIcons";
 2 | import FooterNav from "../FooterNav/FooterNav";
 3 | 
 4 | const Footer: React.FC = () => {
 5 |   return (
 6 |     <footer aria-label="Site Footer" className="bg-gray-100">
 7 |       <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
 8 |         <div className="flex justify-center text-teal-600">
 9 |           <p
10 |             className="text-3xl"
11 |             onClick={() => {
12 |               window.scrollTo(0, 0);
13 |             }}
14 |           >
15 |             FS
16 |           </p>
17 |         </div>
18 |         <p className="mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500">
19 |           This is an open-source project with a MIT license and its purpose is
20 |           to promote contributions from developers at all levels.
21 |         </p>
22 | 
23 |         <p className="mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500">
24 |           Medic1111 {new Date().getFullYear()} Copyrights
25 |         </p>
26 |         <FooterNav />
27 |         <FooterIcons />
28 |       </div>
29 |     </footer>
30 |   );
31 | };
32 | 
33 | export default Footer;
34 | 


--------------------------------------------------------------------------------
/client/src/features/auth-ctx.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from "react";
 2 | 
 3 | interface AuthType {
 4 |   isLoggin: boolean;
 5 |   setIsLoggin: React.Dispatch<React.SetStateAction<boolean>>;
 6 |   isAuth: boolean;
 7 |   setIsAuth: React.Dispatch<React.SetStateAction<boolean>>;
 8 |   currentUser: {};
 9 |   setCurrentUser: React.Dispatch<React.SetStateAction<{}>>;
10 | }
11 | 
12 | export const AuthCtx = createContext<AuthType>({
13 |   isLoggin: false,
14 |   setIsLoggin: () => {},
15 |   isAuth: false,
16 |   setIsAuth: () => {},
17 |   currentUser: {},
18 |   setCurrentUser: () => {},
19 | });
20 | 
21 | const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
22 |   children,
23 | }) => {
24 |   const [isLoggin, setIsLoggin] = useState(false);
25 |   const [isAuth, setIsAuth] = useState(false);
26 |   const [currentUser, setCurrentUser] = useState({});
27 | 
28 |   return (
29 |     <AuthCtx.Provider
30 |       value={{
31 |         isLoggin,
32 |         setIsLoggin,
33 |         isAuth,
34 |         setIsAuth,
35 |         currentUser,
36 |         setCurrentUser,
37 |       }}
38 |     >
39 |       {children}
40 |     </AuthCtx.Provider>
41 |   );
42 | };
43 | 
44 | export default AuthProvider;
45 | 


--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <link
 7 |       rel="stylesheet"
 8 |       href="https://fonts.googleapis.com/css?family=Sofia"
 9 |     />
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
17 |     />
18 |     <link
19 |       rel="stylesheet"
20 |       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
21 |     />
22 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
23 |     <meta name="theme-color" content="#000000" />
24 |     <meta
25 |       name="description"
26 |       content="App to promote web developer's portfolios"
27 |     />
28 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
29 |     <title>Finally-Seen</title>
30 |   </head>
31 |   <body>
32 |     <div id="portal"></div>
33 |     <div id="root"></div>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/client/src/features/ui-ctx.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from "react";
 2 | 
 3 | interface UiType {
 4 |   showMobileNav: boolean;
 5 |   setShowMobileNav: React.Dispatch<React.SetStateAction<boolean>>;
 6 |   showHamburger: boolean;
 7 |   setShowHamburger: React.Dispatch<React.SetStateAction<boolean>>;
 8 |   showModal: boolean;
 9 |   setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
10 | }
11 | 
12 | export const UiCtx = createContext<UiType>({
13 |   showMobileNav: false,
14 |   setShowMobileNav: () => {},
15 |   showHamburger: false,
16 |   setShowHamburger: () => {},
17 |   showModal: false,
18 |   setShowModal: () => {},
19 | });
20 | 
21 | const UiProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
22 |   const [showMobileNav, setShowMobileNav] = useState(false);
23 |   const [showHamburger, setShowHamburger] = useState(false);
24 |   const [showModal, setShowModal] = useState(false);
25 | 
26 |   return (
27 |     <UiCtx.Provider
28 |       value={{
29 |         showMobileNav,
30 |         setShowMobileNav,
31 |         showHamburger,
32 |         setShowHamburger,
33 |         showModal,
34 |         setShowModal,
35 |       }}
36 |     >
37 |       {children}
38 |     </UiCtx.Provider>
39 |   );
40 | };
41 | 
42 | export default UiProvider;
43 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "@types/jest": "^27.5.2",
10 |     "@types/node": "^16.18.3",
11 |     "@types/react": "^18.0.25",
12 |     "@types/react-dom": "^18.0.8",
13 |     "axios": "^1.1.3",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-scripts": "5.0.1",
17 |     "typescript": "^4.8.4",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "proxy": "http://localhost:3002",
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   },
45 |   "devDependencies": {
46 |     "autoprefixer": "^10.4.13",
47 |     "postcss": "^8.4.19",
48 |     "tailwindcss": "^3.2.4"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/client/src/components/Who/Who.tsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import { useEffect, useState } from "react";
 3 | import Team from "../Team/Team";
 4 | import { TeamData } from "../../models/TeamData";
 5 | import Stats from "../Stats/Stats";
 6 | 
 7 | const Who: React.FC = () => {
 8 |   const [data, setData] = useState<TeamData>({
 9 |     collaborators: 0,
10 |     commits: 0,
11 |     prs: 0,
12 |     top: [{ avatar_url: "", login: "", html_url: "" }],
13 |   });
14 | 
15 |   const fetchData = async () => {
16 |     let count = 0;
17 |     await axios
18 |       .get("https://api.github.com/repos/Medic1111/FINALLY-SEEN/contributors")
19 |       .then((serverRes) => {
20 |         serverRes.data.forEach((obj: { contributions: 0 }) => {
21 |           return (count += obj.contributions);
22 |         });
23 | 
24 |         setData({
25 |           collaborators: serverRes.data.length,
26 |           commits: count,
27 |           prs: 0,
28 |           top: [...serverRes.data.slice(0, 8)],
29 |         });
30 |       })
31 |       .catch((err) => {
32 |         console.log(err);
33 |       });
34 |   };
35 | 
36 |   useEffect(() => {
37 |     fetchData();
38 |   }, []);
39 | 
40 |   return (
41 |     <>
42 |       <section id="who" className="bg-white">
43 |         <Stats data={data} />
44 |         <Team data={data} />
45 |       </section>
46 |     </>
47 |   );
48 | };
49 | 
50 | export default Who;
51 | 


--------------------------------------------------------------------------------
/client/src/components/Team/Team.tsx:
--------------------------------------------------------------------------------
 1 | import { TeamData } from "../../models/TeamData";
 2 | 
 3 | const Team: React.FC<{ data: TeamData }> = ({ data }) => {
 4 |   return (
 5 |     <div className="container px-6 py-8 mx-auto">
 6 |       <p className="text-center text-3xl font-bold text-gray-700 sm:text-4xl">
 7 |         Top Contributors
 8 |       </p>
 9 |       <div className=" items-center justify-center grid  gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
10 |         {data.top.map((obj, index) => {
11 |           return (
12 |             <>
13 |               <div className="w-full max-w-xs text-center">
14 |                 <img
15 |                   className="object-cover object-center w-full h-48 mx-auto rounded-lg"
16 |                   src={obj.avatar_url}
17 |                   alt="avatar"
18 |                 />
19 | 
20 |                 <div className="mt-2">
21 |                   <h3 className="text-lg font-medium text-gray-700 ">
22 |                     {obj.login}
23 |                   </h3>
24 |                   <span className="mt-1 font-medium text-gray-600 ">
25 |                     <a target="_blank" href={obj.html_url}>
26 |                       Check Github
27 |                     </a>
28 |                   </span>
29 |                 </div>
30 |               </div>
31 |             </>
32 |           );
33 |         })}
34 |       </div>
35 |     </div>
36 |   );
37 | };
38 | 
39 | export default Team;
40 | 


--------------------------------------------------------------------------------
/client/src/components/Why/Why.tsx:
--------------------------------------------------------------------------------
 1 | const Why: React.FC = () => {
 2 |   return (
 3 |     <section id="why" className="bg-white  w-full mx-auto p-8">
 4 |       <div className="flex items-center md:items-start flex-col md:flex-row justify-center">
 5 |         <div className="w-full md:w-2/3">
 6 |           <p className="py-5 text-center text-3xl font-bold text-gray-700 sm:text-4xl">
 7 |             Why
 8 |           </p>
 9 |           <p className="text-gray-600  w-full md:w-3/4 m-auto text-left text-lg md:text-2xl">
10 |             <span className="font-bold text-teal-500">“</span>
11 |             The question is "why not". The sense of community comes with kind
12 |             gestures of offering what you can from a good place. You never know
13 |             what treasure is coming with the next commit, but you know
14 |             inherently to treasure each and every single one no matter the
15 |             outcome.
16 |             <span className="font-bold text-teal-500">”</span>
17 |           </p>
18 |           <div className="flex mt-8 items-center justify-center">
19 |             <span className="font-semibold text-teal-500 mr-2 text-lg">
20 |               Aryse Pagano
21 |             </span>
22 |             <span className="text-gray-400 text-xl font-light">/</span>
23 |             <span className="text-gray-400 text-md ml-2">Project Owner</span>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </section>
28 |   );
29 | };
30 | 
31 | export default Why;
32 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | // GENERAL REQUIRES
 2 | 
 3 | const express = require("express");
 4 | const morgan = require("morgan");
 5 | const cors = require("cors");
 6 | const bcrypt = require("bcrypt");
 7 | const jwt = require("jsonwebtoken");
 8 | const mongoose = require("mongoose");
 9 | const path = require("path");
10 | require("dotenv").config();
11 | const app = express();
12 | 
13 | // GENERAL MIDDLEWARES
14 | app.use(morgan("dev"));
15 | app.use(cors({ origin: "*" }));
16 | app.use(express.json());
17 | app.use(express.static(path.resolve(__dirname, "../client/build")));
18 | 
19 | // DEV TESTING ROUTES HERE:
20 | 
21 | app.post("/api/v1/login", (req, res) => {
22 |   const { username, password } = req.body;
23 |   const mockUsers = ["medic1111", "john", "brent", "lordson"];
24 |   const correctPass = "111111";
25 | 
26 |   // THIS IS THE FIRST CHECK:
27 | 
28 |   if (!username || !password) {
29 |     return res.status(422).json({ message: "All fields are required" });
30 |   }
31 | 
32 |   // HERE WE USE MOCK DATA, BUT IT WILL BE A SEARCH ON DB
33 |   // IF SEARCH FAILS:
34 | 
35 |   if (!mockUsers.includes(username)) {
36 |     return res.status(404).json({ message: "User not found" });
37 |   }
38 | 
39 |   // IF SEARCH DOESNT FAIL, WE BCRYPT COMPARE PASSWORD
40 |   // IF COMPARISON FAILS:
41 | 
42 |   if (password !== correctPass) {
43 |     return res.status(403).json({ message: "Wrong password" });
44 |   }
45 | 
46 |   // IF ALL CHECKS, USER CAN BE LOGGED IN:
47 | 
48 |   res.status(200).json({ message: "Logging user" });
49 | 
50 |   // USE THE AUTH.REST FILE TO SEND REQUESTS AND OBSERVE
51 |   // RESPONSE. THAT WILL BE THE FIRST LINE OF TESTING
52 | });
53 | 
54 | app.get("/api", (req, res) =>
55 |   res.status(200).json({ message: "Hello from server" })
56 | );
57 | 
58 | // UNIVERSAL ROUTE
59 | 
60 | app.get("*", (req, res) => {
61 |   res.sendFile(path.resolve(__dirname, "../client/build", "index.html"));
62 | });
63 | 
64 | module.exports = app;
65 | 


--------------------------------------------------------------------------------
/ROADMAP.md:
--------------------------------------------------------------------------------
 1 | # HELLO COLLABS!
 2 | 
 3 | > Thanks for participating and I trully hope this project is adding to your contributions.
 4 | 
 5 | ---
 6 | 
 7 | ## THE GOAL:
 8 | 
 9 | The objective of this project is to have it 100% build by cotribution. Some tasks may seen too small or simple. Trust me, I remember how it was to NOT know how to contribute and based on that, my intention is to welcome ALL levels of collaborators.
10 | 
11 | The project is a MERN application which will render links to developers portfolio. It will also display a featured picture of such portfolio and give registered users the ability to vote up.
12 | 
13 | ### Where are we?
14 | 
15 | - Client:
16 | 
17 |   - [x] When I access the application URL I see the "home" page.
18 |   - [x] The home page has a header
19 |   - [ ] The header has a Logo, and a Nav bar with options to Login or Register
20 |   - [ ] The Nav will display icons if viewport less than 798px
21 |   - [x] The home page also has a footer
22 |   - [ ] The home page has its main content wrapped in a Wrapper component
23 |   - [ ] The "home" page seen at first by any user will display the top 10 portfolios based on upvotes.
24 |   - [ ] When I click Login, a login form takes over the content inside the Wrapper
25 |   - [ ] When I click Register, a Register form takes over the content inside the Wrapper
26 |   - [ ] Initially, when I submit login/register, a simple state will change, which will display a nav with different content: Top, Latest, add(icon), Logout
27 | 
28 |   ***
29 | 
30 |   > Attention: This is the first plan and may change at any time. The intention is to give as many contribution opportunities as possible. As the project evolves, such features will become more advance and likely to change.
31 | 
32 |   ***
33 | 
34 |   ### SYSTEMATIC APPROACH
35 | 
36 |   - We only move forward as we accomplish the roadmap
37 | 
38 |   - We will work on a particular feature as an epic, and move forward when that Epic is completed to achieve MVP.
39 | 
40 |   - There's absolutely no rush, and mistakes are WELCOME as we all learn from them
41 | 
42 |   - HAVE FUN!
43 | 


--------------------------------------------------------------------------------
/client/src/components/Stats/Stats.tsx:
--------------------------------------------------------------------------------
 1 | import { TeamData } from "../../models/TeamData";
 2 | 
 3 | const Stats: React.FC<{ data: TeamData }> = ({ data }) => {
 4 |   return (
 5 |     <>
 6 |       <div className="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 md:py-16 lg:px-8">
 7 |         <div className="mx-auto max-w-3xl text-center">
 8 |           <p className="text-3xl font-bold text-gray-700 sm:text-4xl">Who</p>
 9 | 
10 |           <p className="mt-4 text-gray-600 sm:text-xl">
11 |             Dynamic team of developers at all levels, always evolving but most
12 |             importantly always counting.
13 |           </p>
14 |         </div>
15 | 
16 |         <div className="mt-8 sm:mt-12">
17 |           <dl className="grid grid-cols-1 gap-4  sm:grid-cols-3">
18 |             <div className="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
19 |               <dt className="order-last text-lg font-medium text-gray-500">
20 |                 Collaborators
21 |               </dt>
22 | 
23 |               <dd className="text-4xl font-extrabold text-teal-500 md:text-5xl">
24 |                 {data.collaborators}
25 |               </dd>
26 |             </div>
27 | 
28 |             <div className="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
29 |               <dt className="order-last text-lg font-medium text-gray-500">
30 |                 Commits
31 |               </dt>
32 | 
33 |               <dd className="text-4xl font-extrabold text-teal-500 md:text-5xl">
34 |                 {data.commits}
35 |               </dd>
36 |             </div>
37 | 
38 |             <div className="flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center">
39 |               <dt className="order-last text-lg font-medium text-gray-500">
40 |                 Team {"=)"}
41 |               </dt>
42 | 
43 |               <dd className="text-4xl font-extrabold text-teal-500 md:text-5xl">
44 |                 1
45 |               </dd>
46 |             </div>
47 |           </dl>
48 |         </div>
49 |       </div>
50 |     </>
51 |   );
52 | };
53 | 
54 | export default Stats;
55 | 


--------------------------------------------------------------------------------
/client/src/components/NavComps/NavMobile/NavMobile.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { AuthCtx } from "../../../features/auth-ctx";
 3 | import { UiCtx } from "../../../features/ui-ctx";
 4 | import NavLogged from "../NavLogged/NavLogged";
 5 | import NavOut from "../NavOut/NavOut";
 6 | 
 7 | const NavMobile: React.FC = () => {
 8 |   const uiMgr = useContext(UiCtx);
 9 |   const authMgr = useContext(AuthCtx);
10 | 
11 |   return (
12 |     <section className="fixed inset-y-0 right-0 z-50 flex">
13 |       <div className="w-screen max-w-sm">
14 |         <div className="flex h-full flex-col divide-y divide-gray-200 bg-gray-50">
15 |           <div className="overflow-y-scroll">
16 |             <header className="flex h-16 items-center justify-between pl-6">
17 |               <span className="text-teal-500 text-sm font-medium uppercase tracking-widest">
18 |                 Menu
19 |               </span>
20 | 
21 |               <button
22 |                 onClick={() => uiMgr.setShowMobileNav(false)}
23 |                 aria-label="Close menu"
24 |                 className="h-16 w-16 border-l border-gray-200"
25 |                 type="button"
26 |               >
27 |                 <svg
28 |                   xmlns="http://www.w3.org/2000/svg"
29 |                   className="mx-auto h-5 w-5"
30 |                   fill="none"
31 |                   viewBox="0 0 24 24"
32 |                   stroke="currentColor"
33 |                 >
34 |                   <path
35 |                     strokeLinecap="round"
36 |                     strokeLinejoin="round"
37 |                     strokeWidth="2"
38 |                     d="M6 18L18 6M6 6l12 12"
39 |                   />
40 |                 </svg>
41 |               </button>
42 |             </header>
43 | 
44 |             <nav className="flex flex-col divide-y divide-gray-200 border-t border-b border-gray-200 text-sm font-medium text-gray-500">
45 |               {!authMgr.isAuth ? <NavOut /> : <NavLogged />}
46 |             </nav>
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </section>
51 |   );
52 | };
53 | 
54 | export default NavMobile;
55 | 


--------------------------------------------------------------------------------
/client/src/components/Hero/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { AuthCtx } from "../../features/auth-ctx";
 3 | import { UiCtx } from "../../features/ui-ctx";
 4 | 
 5 | const Hero: React.FC = () => {
 6 |   const uiMgr = useContext(UiCtx);
 7 |   const authMgr = useContext(AuthCtx);
 8 | 
 9 |   return (
10 |     <section className="relative bg-hero-img   bg-cover bg-center bg-no-repeat">
11 |       <div className="absolute  inset-0 bg-white/75 sm:bg-transparent sm:bg-gradient-to-r sm:from-white/95 sm:to-white/25"></div>
12 |       <div className="relative mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8">
13 |         <div className="max-w-xl text-center sm:text-left">
14 |           <h1 className="text-gray-700 text-3xl font-extrabold sm:text-6xl">
15 |             Where developers are
16 |             <strong className=" mb-10 block font-extrabold text-teal-500">
17 |               Finally Seen
18 |             </strong>
19 |           </h1>
20 | 
21 |           <p className="mt-4 sm:text-xl sm:leading-relaxed text-teal-800 sm:text-teal-50">
22 |             A contribution initiative as open-source.
23 |           </p>
24 | 
25 |           <div className="mt-8 flex flex-wrap gap-4 text-center">
26 |             <a
27 |               href="#"
28 |               className="block w-full rounded bg-teal-600 px-12 py-3 text-sm font-medium text-white shadow hover:bg-teal-700 focus:outline-none focus:ring active:bg-teal-500 sm:w-auto"
29 |               onClick={() => {
30 |                 uiMgr.setShowModal(true);
31 |                 authMgr.setIsLoggin(false);
32 |               }}
33 |             >
34 |               Let me in
35 |             </a>
36 | 
37 |             <a
38 |               href="#why"
39 |               className="block w-full rounded bg-teal-50 px-12 py-3 text-sm font-medium text-teal-600 shadow hover:text-teal-700 focus:outline-none focus:ring active:text-teal-500 sm:w-auto"
40 |             >
41 |               Learn More
42 |             </a>
43 |           </div>
44 |         </div>
45 |       </div>
46 |     </section>
47 |   );
48 | };
49 | 
50 | export default Hero;
51 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## WELCOME AND THANKS FOR CONTRIBUTING
 2 | 
 3 | ### First things first:
 4 | 
 5 | - We do use Github API to pull some stats including your profile picture if you're on the list of top 8 contributors. IF YOU'RE NOT OKAY WITH THAT, Please do not contribute =) or don't be top 8.
 6 | 
 7 | - Your initial contribution will be adding your contact to ROSTER.md
 8 | 
 9 | - You will find the template and instructions (hint: click raw to view markdown and copy)
10 | 
11 | - After forking, ensure to ALWAYS PULL DEVELOPMENT, which is the branch all collaboration work will be PRd to.
12 | 
13 | - NEVER PR TO MAIN, it will not be merged.
14 | 
15 | - Always work on your branch, naming it camelCase with your first and last name
16 | 
17 | > Ex: arysePagano
18 | 
19 | ### Issues
20 | 
21 | - There will be PLENTY of issues for you to choose from. If you see one that fits you, comment on it to be assigned to it.
22 | 
23 | - Please be aware that we will all be waiting on your piece of work. The easiest way to get CONFLICTS is by delivering outdated/late work.
24 | 
25 | - Be respectful and deliver within 24 hrs. Those issues will be short enough for that to be accomplished very easily.
26 | 
27 | - If you run into problems, DO comment on your task. Other people and myself will gladly give a hand.
28 | 
29 | - I intend to open GITHUB PROJECTS for this app. To be announced in the near future. For now, well organized issues will do the job.
30 | 
31 | ### Clone the repository
32 | 
33 | - Fork the repository.
34 | 
35 | - Clone the forked repository.
36 | 
37 |   ```bash
38 |   $ git clone https://github.com/your_username/FINALLY-SEEN.git
39 |   ```
40 | 
41 | - Clone all the branches from the parent repository, not only main branch.
42 | 
43 | ### Creating a branch
44 | 
45 | - When starting work on a new issue, branch off from the `development` branch.
46 | 
47 |   ```bash
48 |   $ git checkout -b <branch-name> development
49 |   ```
50 | 
51 | - Switched to a new branch "<branch-name>".
52 | 
53 | - Contributors working on same issue but in different branches can do sub-team fetches in case required.
54 | 
55 | - Commit the changes with some descriptive messgaes.
56 | 
57 |   ```bash
58 |   $ git commit -m "<commit message>"
59 |   ```
60 | 
61 | - Once the issue is finished, the contributor shall push the changes to remote after commiting.
62 |   ```bash
63 |   $ git push origin <branch-name>
64 |   ```
65 | 
66 | ### Raising a Pull request
67 | 
68 | - Once the branch has been pushed, the contributor shall raise the PR against the `development`.
69 | 
70 | - Contributor shall incorporate review comments and upon approval, the PR shall proceed for merge into `development`.
71 | 
72 | - As you update your PR and apply changes, mark each conversation as resolved.
73 | 


--------------------------------------------------------------------------------
/client/src/components/Auth/Auth.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useContext } from "react";
 2 | import { UiCtx } from "../../features/ui-ctx";
 3 | import { AuthCtx } from "../../features/auth-ctx";
 4 | 
 5 | const Auth: React.FC = () => {
 6 |   const uiMgr = useContext(UiCtx);
 7 |   const authMgr = useContext(AuthCtx);
 8 | 
 9 |   return (
10 |     <div className="mx-auto flex min-h-screen w-full items-center justify-center bg-white text-white">
11 |       <section className="flex w-[30rem] flex-col space-y-10 px-5 md:px-0">
12 |         <p className="text-center text-4xl font-medium text-teal-500">
13 |           {authMgr.isLoggin ? "Log In" : "Register"}
14 |         </p>
15 |         {authMgr.isLoggin || (
16 |           <label className="w-full transform border-b-2 bg-transparent text-lg duration-300 focus-within:border-teal-500">
17 |             <input
18 |               type="text"
19 |               placeholder="Email"
20 |               className="text-teal-900 w-full border-none bg-transparent outline-none placeholder:italic focus:outline-none"
21 |             />
22 |           </label>
23 |         )}
24 | 
25 |         <label className="w-full transform border-b-2 bg-transparent text-lg duration-300 focus-within:border-teal-500">
26 |           <input
27 |             type="text"
28 |             placeholder="Username"
29 |             className="text-teal-900 w-full border-none bg-transparent outline-none placeholder:italic focus:outline-none"
30 |           />
31 |         </label>
32 | 
33 |         <label className="w-full transform border-b-2 bg-transparent text-lg duration-300 focus-within:border-teal-500">
34 |           <input
35 |             type="password"
36 |             placeholder="Password"
37 |             className="w-full border-none bg-transparent outline-none placeholder:italic focus:outline-none text-teal-900"
38 |           />
39 |         </label>
40 | 
41 |         <button className="transform rounded-sm bg-teal-600 py-2 font-bold duration-300 hover:bg-teal-400">
42 |           {authMgr.isLoggin ? "LOG IN" : "REGISTER"}
43 |         </button>
44 | 
45 |         {authMgr.isLoggin && (
46 |           <a
47 |             href="#"
48 |             className="transform text-center font-semibold text-gray-500 duration-300 hover:text-gray-300"
49 |           >
50 |             FORGOT PASSWORD?
51 |           </a>
52 |         )}
53 | 
54 |         <p className="text-teal-500 text-center text-lg">
55 |           {authMgr.isLoggin ? "No account? " : "Already registered? "}
56 |           <a
57 |             href="#"
58 |             className="font-medium text-teal-500 underline-offset-4 hover:underline"
59 |             onClick={() => authMgr.setIsLoggin((prev) => !prev)}
60 |           >
61 |             {authMgr.isLoggin ? "Create One" : "Login"}
62 |           </a>
63 |         </p>
64 | 
65 |         <p
66 |           onClick={() => uiMgr.setShowModal(false)}
67 |           className="cursor-pointer text-center text-2xl font-medium text-teal-600"
68 |         >
69 |           FS
70 |         </p>
71 |       </section>
72 |     </div>
73 |   );
74 | };
75 | 
76 | export default Auth;
77 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # FINALLY-SEEN
 2 | 
 3 | > A contribution initiative
 4 | 
 5 | ---
 6 | 
 7 | [LIVE DEV DEMO](https://finally-seen-oizk.onrender.com/)
 8 | 
 9 | ---
10 | 
11 | ![hero image](img1.png)
12 | 
13 | ## STACK
14 | 
15 | - Client:
16 |   - React with CRA templated with TS
17 | - Server:
18 |   - NodeJS and Express
19 | - DB:
20 |   - MongoDB
21 | - Deployment:
22 |   - Render.io
23 | 
24 | ---
25 | 
26 | ## The Project:
27 | 
28 | Hello World! And welcome to FINALLY-SEEN, a soon to be a MERN stack application for which a user (a dev) will be able to post the URL of their portfolio and obtain some sort of feedback.
29 | 
30 | The Project is still to be fully defined, I just wanted to get that out there as soon as possible to help those like me who chase "good first issue"s.
31 | 
32 | The intention is to get everyone who wants to contribute, at least one task. I will personally try my best to adapt this project so anyone regardless of skills can hop in.
33 | 
34 | > Ex: You know react but do not know TS...No problem. Ill take your JS (thanks for that) and give the convertion to someone else to collab on.
35 | 
36 | ---
37 | 
38 | ## Fearful? Don't be...
39 | 
40 | While I intend to give devs a good amount of coding freedom, I will be very specific and even (if needed and requested), outline steps needed to be performed in order to achieve the task. IT'S OKAY TO MAKE MISTAKES. Fixing bugs always make great first issues.
41 | 
42 | ## WHAT IS NOT OKAY?
43 | 
44 | Leave your ego home. This industry is full of it and I'm sure you can find plenty of opportunities to take it "for a walk". This is not the place.
45 | 
46 | ---
47 | 
48 | ## HOW TO RUN?
49 | 
50 | 1. Fork this repo:
51 | 
52 |    Step 1: Click the Fork button to the right of the repository.
53 |    <img width="953" alt="image" src="https://user-images.githubusercontent.com/113319081/200523278-275f0ceb-f76c-4d0a-a61a-f1b192ba349f.png">
54 |    Step 2: We will then be navigated to the create new a fork page and click the create fork button.
55 |    <img width="532" alt="image" src="https://user-images.githubusercontent.com/113319081/200524284-fd38c701-bfbf-46d0-b4ae-51a9372071aa.png">
56 | 
57 | 2. Clone the project:
58 | 
59 |    Step 1: On your Visual Studio Code IDE (or any IDE), click terminal and click new terminal.
60 |    <img width="960" alt="image" src="https://user-images.githubusercontent.com/113319081/200526564-dc48aa53-6d40-451e-882c-b617ec24df25.png">
61 |    Step 2: On the terminal run `git clone https://github.com/Medic1111/FINALLY-SEEN` to clone the project.
62 | 
63 | 3. Install dependencies client and run client:
64 | 
65 |    Step 1: On the terminal in your VScode IDE run `cd .\FINALLY-SEEN\`
66 | 
67 |    Step 2: Then run `cd .\client\` and run `npm install` to install dependencies client.
68 | 
69 |    Step 3: With all dependencies installed, while still on the client you can run `npm start` to start the client on localhost 3000
70 | 
71 | 4. Install dependencies server and run server:
72 | 
73 |    Step 1: On the new terminal in your VScode IDE(while on the root of the project) run `cd .\server\`
74 | 
75 |    Step 2: Then run `npm install` to install dependencies server.
76 | 
77 |    Step 3: With all dependencies installed, while still on the server you can run `node app.js` to start the server.
78 | 
79 | > I highly suggest using nodemon to run the server. It is not a dependency of this project but feel free to use your globally installed one.
80 | 
81 | ---
82 | 
83 | ### WHO AM I
84 | 
85 | **:point_right: Aryse Tansy**
86 | :e-mail: paganowebdev@gmail.com
87 | :computer: [Portfolio](https://www.pagano.dev/)
88 | 
89 | ---
90 | 


--------------------------------------------------------------------------------
/client/src/pages/Portfolio.tsx:
--------------------------------------------------------------------------------
 1 | import Header from "../components/Header/Header";
 2 | 
 3 | const Portfolio: React.FC = () => {
 4 |   return (
 5 |     <section className="bg-white ">
 6 |       {/* <Header /> */}
 7 |       <div className="relative flex">
 8 |         <div className="min-h-screen lg:w-1/3"></div>
 9 |         <div className="hidden w-3/4 min-h-screen bg-gray-100  lg:block"></div>
10 | 
11 |         <div className="container flex flex-col justify-center w-full min-h-screen px-6 py-10 mx-auto lg:absolute lg:inset-x-0">
12 |           <h1 className="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl xl:text-5xl ">
13 |             Meet the <span className="text-teal-700">developer's</span> <br />{" "}
14 |             portfolios
15 |           </h1>
16 | 
17 |           <div className="mt-10 lg:mt-20 lg:flex lg:items-center">
18 |             <img
19 |               className="object-cover object-center w-full lg:w-[32rem] rounded-lg h-96"
20 |               src="https://raw.githubusercontent.com/Medic1111/FINALLY-SEEN/main/img1.png"
21 |               alt=""
22 |             />
23 | 
24 |             <div className="mt-8 lg:px-10 lg:mt-0">
25 |               <h1 className="text-2xl font-semibold text-gray-800 lg:w-72">
26 |                 Developer Title{" "}
27 |                 <span className="text-teal-500"> (Ups: 480) </span>
28 |               </h1>
29 | 
30 |               <p className="max-w-lg mt-6 text-gray-500 ">
31 |                 “ A description of the developer and short journey brief ”
32 |               </p>
33 | 
34 |               <a
35 |                 href=""
36 |                 className="block mt-6 text-lg font-medium text-teal-500"
37 |               >
38 |                 DevName LastName(link to github)
39 |               </a>
40 |               <a href="" className="text-gray-600 ">
41 |                 portfolio URL
42 |               </a>
43 |             </div>
44 |           </div>
45 | 
46 |           <div className="flex items-center justify-between w-2/5 mt-12 sm:w-1/5">
47 |             <button className="p-2 text-gray-800 transition-colors duration-300 border rounded-full rtl:-scale-x-100    hover:bg-gray-100">
48 |               <svg
49 |                 xmlns="http://www.w3.org/2000/svg"
50 |                 className="w-6 h-6"
51 |                 fill="none"
52 |                 viewBox="0 0 24 24"
53 |                 stroke="teal"
54 |                 strokeWidth="2"
55 |               >
56 |                 <path
57 |                   strokeLinecap="round"
58 |                   strokeLinejoin="round"
59 |                   d="M23.245 20l-11.245-14.374-11.219 14.374-.781-.619 12-15.381 12 15.391-.755.609z"
60 |                 />
61 |               </svg>
62 |             </button>
63 | 
64 |             <button className="p-2 text-gray-800 transition-colors duration-300 border rounded-full rtl:-scale-x-100  lg:mx-6 hover:bg-gray-100">
65 |               <svg
66 |                 xmlns="http://www.w3.org/2000/svg"
67 |                 className="w-6 h-6"
68 |                 fill="none"
69 |                 viewBox="0 0 24 24"
70 |                 stroke="teal"
71 |                 strokeWidth="2"
72 |               >
73 |                 <path
74 |                   strokeLinecap="round"
75 |                   strokeLinejoin="round"
76 |                   d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"
77 |                 />
78 |               </svg>
79 |             </button>
80 |           </div>
81 |         </div>
82 |       </div>
83 |     </section>
84 |   );
85 | };
86 | 
87 | export default Portfolio;
88 | 


--------------------------------------------------------------------------------
/client/src/components/FooterComps/FooterIcons/FooterIcons.tsx:
--------------------------------------------------------------------------------
 1 | const FooterIcons: React.FC = () => {
 2 |   return (
 3 |     <ul className="mt-12 flex justify-center gap-6 md:gap-8">
 4 |       <li>
 5 |         <a
 6 |           href="https://www.linkedin.com/in/aryse-pagano-b6bb7b237/"
 7 |           rel="noreferrer"
 8 |           target="_blank"
 9 |           className="text-gray-700 transition hover:text-gray-700/75"
10 |         >
11 |           <span className="sr-only">Linkedin</span>
12 |           <svg
13 |             className="h-6 w-6"
14 |             fill="currentColor"
15 |             viewBox="0 0 24 24"
16 |             aria-hidden="true"
17 |           >
18 |             <path
19 |               fillRule="evenodd"
20 |               d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 8c0 .557-.447 1.008-1 1.008s-1-.45-1-1.008c0-.557.447-1.008 1-1.008s1 .452 1 1.008zm0 2h-2v6h2v-6zm3 0h-2v6h2v-2.861c0-1.722 2.002-1.881 2.002 0v2.861h1.998v-3.359c0-3.284-3.128-3.164-4-1.548v-1.093z"
21 |               clipRule="evenodd"
22 |             />
23 |           </svg>
24 |         </a>
25 |       </li>
26 | 
27 |       <li>
28 |         <a
29 |           href="https://discord.com/channels/1040814003645075466/1040817922743992371"
30 |           rel="noreferrer"
31 |           target="_blank"
32 |           className="text-gray-700 transition hover:text-gray-700/75"
33 |         >
34 |           <span className="sr-only">Discord</span>
35 |           <svg
36 |             className="h-6 w-6"
37 |             fill="currentColor"
38 |             viewBox="0 0 24 24"
39 |             aria-hidden="true"
40 |           >
41 |             <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm2.784 15.584h-6.804c-.678 0-1.23-.552-1.23-1.236v-8.112c0-.684.552-1.236 1.23-1.236h8.04c.678 0 1.23.552 1.23 1.236v10.764l-1.29-1.14-.726-.672-.768-.714.318 1.11zm-1.08-2.748c1.326-.042 1.836-.912 1.836-.912 0-1.932-.864-3.498-.864-3.498-.864-.648-1.686-.63-1.686-.63l-.084.096c1.02.312 1.494.762 1.494.762-.624-.342-1.236-.51-1.806-.576-.432-.048-.846-.036-1.212.012l-.102.012c-.21.018-.72.096-1.362.378l-.354.174s.498-.474 1.578-.786l-.06-.072s-.822-.018-1.686.63c0 0-.864 1.566-.864 3.498 0 0 .504.87 1.83.912l.402-.498c-.762-.228-1.05-.708-1.05-.708l.168.102.024.018.024.013.006.004.024.013c.15.084.3.15.438.204.246.096.54.192.882.258.45.084.978.114 1.554.006.282-.048.57-.132.87-.258.21-.078.444-.192.69-.354 0 0-.3.492-1.086.714l.396.486zm-2.79-2.802c-.342 0-.612.3-.612.666 0 .366.276.666.612.666.342 0 .612-.3.612-.666.006-.366-.27-.666-.612-.666zm2.19 0c-.342 0-.612.3-.612.666 0 .366.276.666.612.666.342 0 .612-.3.612-.666 0-.366-.27-.666-.612-.666z" />
42 |           </svg>
43 |         </a>
44 |       </li>
45 | 
46 |       <li>
47 |         <a
48 |           href="https://github.com/Medic1111/FINALLY-SEEN"
49 |           rel="noreferrer"
50 |           target="_blank"
51 |           className="text-gray-700 transition hover:text-gray-700/75"
52 |         >
53 |           <span className="sr-only">GitHub</span>
54 |           <svg
55 |             className="h-6 w-6"
56 |             fill="currentColor"
57 |             viewBox="0 0 24 24"
58 |             aria-hidden="true"
59 |           >
60 |             <path
61 |               fillRule="evenodd"
62 |               d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 6c-3.313 0-6 2.686-6 6 0 2.651 1.719 4.9 4.104 5.693.3.056.396-.13.396-.289v-1.117c-1.669.363-2.017-.707-2.017-.707-.272-.693-.666-.878-.666-.878-.544-.373.041-.365.041-.365.603.042.92.619.92.619.535.917 1.403.652 1.746.499.054-.388.209-.652.381-.802-1.333-.152-2.733-.667-2.733-2.965 0-.655.234-1.19.618-1.61-.062-.153-.268-.764.058-1.59 0 0 .504-.161 1.65.615.479-.133.992-.199 1.502-.202.51.002 1.023.069 1.503.202 1.146-.776 1.648-.615 1.648-.615.327.826.121 1.437.06 1.588.385.42.617.955.617 1.61 0 2.305-1.404 2.812-2.74 2.96.216.186.412.551.412 1.111v1.646c0 .16.096.347.4.288 2.383-.793 4.1-3.041 4.1-5.691 0-3.314-2.687-6-6-6z"
63 |               clipRule="evenodd"
64 |             />
65 |           </svg>
66 |         </a>
67 |       </li>
68 |     </ul>
69 |   );
70 | };
71 | 
72 | export default FooterIcons;
73 | 


--------------------------------------------------------------------------------