├── frontend
    ├── .gitignore
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   ├── logo.png
    │   │   ├── lowpolybgrd.png
    │   │   ├── stackedbgrd.png
    │   │   └── lightmodelogowithname.png
    │   ├── pages
    │   │   ├── Hero.css
    │   │   ├── Layout.js
    │   │   ├── Repositories.css
    │   │   ├── Footer.css
    │   │   ├── Hero.js
    │   │   ├── Footer.js
    │   │   ├── index.js
    │   │   ├── Card.js
    │   │   ├── Card.css
    │   │   ├── About.css
    │   │   ├── Repositories.js
    │   │   ├── Navbar.css
    │   │   ├── Navbar.js
    │   │   ├── About.js
    │   │   ├── Form.css
    │   │   └── Form.js
    │   ├── setupTests.js
    │   ├── App.test.js
    │   ├── index.css
    │   ├── reportWebVitals.js
    │   ├── logo.svg
    │   ├── index.js
    │   ├── App.js
    │   └── App.css
    └── package.json
├── Logo
    ├── club_gamma.png
    ├── dark mode logo.png
    ├── light mode logo.png
    ├── dark mode logo with name.png
    ├── light mode logo with name.png
    └── README.md
├── LICENSE
├── CONTRIBUTING.md
├── README.md
└── CODE_OF_CONDUCT.md


/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/Logo/club_gamma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/Logo/club_gamma.png


--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/Logo/dark mode logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/Logo/dark mode logo.png


--------------------------------------------------------------------------------
/Logo/light mode logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/Logo/light mode logo.png


--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/frontend/src/assets/logo.png


--------------------------------------------------------------------------------
/Logo/dark mode logo with name.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/Logo/dark mode logo with name.png


--------------------------------------------------------------------------------
/Logo/light mode logo with name.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/Logo/light mode logo with name.png


--------------------------------------------------------------------------------
/frontend/src/assets/lowpolybgrd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/frontend/src/assets/lowpolybgrd.png


--------------------------------------------------------------------------------
/frontend/src/assets/stackedbgrd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/frontend/src/assets/stackedbgrd.png


--------------------------------------------------------------------------------
/frontend/src/assets/lightmodelogowithname.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clubgamma/Good_First_Issue_Web_App/HEAD/frontend/src/assets/lightmodelogowithname.png


--------------------------------------------------------------------------------
/frontend/src/pages/Hero.css:
--------------------------------------------------------------------------------
 1 | .hero-bg {
 2 |   min-height: 100vh;
 3 |   background: #f3ebeb;
 4 |   display: grid;
 5 |   place-items: center;
 6 | }
 7 | 
 8 | @media only screen and (width < 425px) {
 9 |   .hero-bg img {
10 |     width: 8rem;
11 |   }
12 | }


--------------------------------------------------------------------------------
/frontend/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/frontend/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Navbar, Footer} from './index'
 3 | import {Outlet} from 'react-router-dom'
 4 | 
 5 | function Layout() {
 6 |   return (
 7 |     <>
 8 |       <Navbar />
 9 |       <Outlet />
10 |       <Footer />
11 |     </>
12 |   )
13 | }
14 | 
15 | export default Layout


--------------------------------------------------------------------------------
/frontend/src/pages/Repositories.css:
--------------------------------------------------------------------------------
 1 | .repo-bg {
 2 |   min-height: 100vh;
 3 |   background: #f3ebeb;
 4 |   text-align: center;
 5 |   padding: 2rem 12rem;
 6 | }
 7 | 
 8 | .repo-bg h2 {
 9 |   margin-bottom: 2rem;
10 | }
11 | 
12 | @media only screen and (width < 900px) {
13 |   .repo-bg {
14 |     padding: 2rem 2rem;
15 |   }
16 | }


--------------------------------------------------------------------------------
/frontend/src/pages/Footer.css:
--------------------------------------------------------------------------------
 1 | .footer-bg {
 2 |   background: #22272e;
 3 |   padding: 15px;
 4 |   position: static;
 5 |   bottom: 0;
 6 |   width: 100%;
 7 | }
 8 | 
 9 | .repo-link {
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   gap: 5px;
14 |   text-decoration: none;
15 |   color: #acb9c6;
16 | }


--------------------------------------------------------------------------------
/frontend/src/pages/Hero.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Hero.css'
 3 | import {lightModeLogoWithName} from './index'
 4 | 
 5 | function Hero() {
 6 |   return (
 7 |     <div className='hero-bg'>
 8 |       <div>
 9 |         <img src={lightModeLogoWithName} alt="Light Mode Logo" />
10 |         {/* <h1>Welcome to Club Gamma</h1> */}
11 |       </div>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default Hero


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/frontend/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Footer.css'
 3 | import { GoRepo, GoPerson } from "react-icons/go";
 4 | 
 5 | function Footer() {
 6 |   return (
 7 |     <div className='footer-bg'>
 8 |       <a className='repo-link' href="https://github.com/clubgamma/Good_First_Issue_Web_App" target={"_blank"}>
 9 |         <GoRepo />
10 |         <p>Go to repository</p>
11 |       </a>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default Footer


--------------------------------------------------------------------------------
/frontend/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Navbar from './Navbar'
 2 | import Hero from './Hero'
 3 | import About from './About'
 4 | import Repositories from './Repositories'
 5 | import Footer from './Footer'
 6 | import Form from './Form'
 7 | import Layout from './Layout'
 8 | import logo from "../assets/logo.png";
 9 | import lightModeLogoWithName from '../assets/lightmodelogowithname.png'
10 | 
11 | export {Navbar, Hero, About, Repositories, Footer, Form, Layout, logo, lightModeLogoWithName}
12 | 


--------------------------------------------------------------------------------
/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 25.417 25.417"><path d="M18.059 0l7.358 7.358V0zM15.402 0H0v15.741a7.626 7.626 0 0 1 1.764-2.749 7.649 7.649 0 0 1 6.62-2.147l-.281 3.659a4 4 0 1 0 2.821 2.741l-2.601 2.601-2.593-2.593 5.245-5.244-3.791-3.791 6.541-6.541 2.554 2.554-3.948 3.948 1.237 1.237 3.948-3.948 2.593 2.593-3.948 3.948 3.889 3.889-2.592 2.593-3.348-3.348a7.662 7.662 0 0 1-3.843 10.275h15.15V10.53l-1.007 1.007L14.138 1.265 15.402 0z"/></svg>


--------------------------------------------------------------------------------
/frontend/src/pages/Card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Card.css'
 3 | import { GoRepo } from "react-icons/go";
 4 | import { Link } from 'react-router-dom';
 5 | 
 6 | function Card({url, title, desc}) {
 7 |   return (
 8 |     <div className='card-bg'>
 9 |       <div className='card'>
10 |         <Link to={url} target='_blank' className='repo-title'>
11 |           <div><GoRepo size={20} /></div>
12 |           <h3>{title}</h3>
13 |         </Link>
14 |         <p>{desc}</p>
15 |       </div>
16 |     </div>
17 |   )
18 | }
19 | 
20 | export default Card


--------------------------------------------------------------------------------
/Logo/README.md:
--------------------------------------------------------------------------------
1 | ![first](https://user-images.githubusercontent.com/114768158/194959778-c9a47c37-f4dd-4af6-a9e2-a68414c1dc69.png)
2 | ![second](https://user-images.githubusercontent.com/114768158/194959797-6b3783f5-6f12-4940-99f3-06d5ec730366.png)
3 | ![third](https://user-images.githubusercontent.com/114768158/194959803-020e035c-6dca-4861-8ee7-5143c18ede43.png)
4 | 
5 | ![fourth](https://user-images.githubusercontent.com/114768158/194960051-ef25be68-ddbc-45c4-ae0c-2f3d7f900856.png)
6 | ![fifth](https://user-images.githubusercontent.com/114768158/194960058-838ee18a-16b0-4d4f-bf0f-cea164edb1d9.png)
7 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Card.css:
--------------------------------------------------------------------------------
 1 | .card-bg {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   margin: 10px;
 5 | }
 6 | 
 7 | .card-bg .card {
 8 |   background: lightgrey;
 9 |   padding: 15px;
10 |   border: 1px solid lightslategray;
11 |   border-radius: 12px;
12 | }
13 | 
14 | .card-bg .repo-title {
15 |   text-decoration: none;
16 |   display: flex;
17 |   justify-content: center;
18 |   align-items: center;
19 |   gap: 5px;
20 | }
21 | 
22 | .card-bg .repo-contr {
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 |   gap: 5px;
27 |   font-weight: bold;
28 | }


--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import {Hero, About, Repositories, Form, Layout} from './pages'
 3 | import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
 4 | 
 5 | const router = createBrowserRouter(
 6 |   createRoutesFromElements(
 7 |     <Route path='/' element={<Layout />}>
 8 |       <Route path='' element={<Hero />} />
 9 |       <Route path='about' element={<About />} />
10 |       <Route path='repositories' element={<Repositories />} />
11 |       <Route path='form' element={<Form />} />
12 |     </Route>
13 |   )
14 | )
15 | 
16 | function App() {
17 |   return <RouterProvider router={router} />
18 | }
19 | 
20 | export default App;
21 | 


--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/frontend/src/pages/About.css:
--------------------------------------------------------------------------------
 1 | .about-container {
 2 |   padding: 2rem 12rem;
 3 |   background: #f3ebeb;
 4 |   text-align: center;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   justify-content: center;
 8 |   align-items: center;
 9 |   gap: 2rem;
10 |   min-height: 100vh;
11 | }
12 | 
13 | .about-container .About-logo {
14 |   margin: auto;
15 |   border-radius: 100%;
16 |   margin-bottom: 1.5rem;
17 |   width: 10rem;
18 | }
19 | 
20 | .about-container h2 {
21 |   color: #601f2a;
22 | }
23 | 
24 | .about-container p {
25 |   color: #474747;
26 | }
27 | 
28 | .about-container hr {
29 |   border: 10px dotted #acb9c6;
30 |   border-top: none;
31 |   width: 10%;
32 | }
33 | 
34 | @media only screen and (width < 768px) {
35 |   .about-container {
36 |     padding: 2rem 4rem;
37 |   }
38 |   
39 |   .about-container hr {
40 |     border-width: 5px;
41 |   }
42 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Club Gamma
 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 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 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 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-icons": "^4.4.0",
12 |     "react-multi-select-component": "^4.3.4",
13 |     "react-router-dom": "^6.16.0",
14 |     "react-scripts": "5.0.1",
15 |     "react-select": "^5.7.7",
16 |     "web-vitals": "^2.1.4"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test",
22 |     "eject": "react-scripts eject"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": [
26 |       "react-app",
27 |       "react-app/jest"
28 |     ]
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Repositories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Repositories.css'
 3 | import Card from './Card'
 4 | 
 5 | function Repositories() {
 6 |   return (
 7 |     <div className='repo-bg'>
 8 |       <h2>My Repositories</h2>
 9 |       <Card url="https://github.com/clubgamma/uneasy" title="Uneasy" desc="Uneasy is a Web Application where you can select and remove multiple followings from your twitter." />
10 |       <Card url="https://github.com/clubgamma/give-my-resume" title="Give my resume" desc="A online quick platform and easy-to-use open-source tool which reduces time of creating resume" />
11 |       <Card url="https://github.com/clubgamma/Trendit" title="Trendit" desc="This website provide Top Trending keywords for content creators." />
12 |       <Card url="https://github.com/clubgamma/directlywa" title="DirectlyWA" desc="Direct WhatsApp ( DirectlyWA ) an app to go to chat of any number that is on whatsapp . Not limited to only this . Other features like getting quotes , meme and sharing from in app. Reminder to schedule the message via push notification." />
13 |       <Card url="https://github.com/clubgamma/All-About-Food" title="All About Food" desc="No description, website, or topics provided." />
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default Repositories


--------------------------------------------------------------------------------
/frontend/src/pages/Navbar.css:
--------------------------------------------------------------------------------
 1 | .navbar-bg {
 2 |   background: #22272e;
 3 |   color: #acb9c6;
 4 |   padding: 15px;
 5 |   display: flex;
 6 |   justify-content: space-between;
 7 |   align-items: center;
 8 | }
 9 | 
10 | .navbar-bg .navbar-title {
11 |   display: flex;
12 |   justify-content: flex-start;
13 |   align-items: center;
14 |   gap: 15px;
15 | }
16 | 
17 | .navbar-bg .navbar-title img {
18 |   border: none;
19 |   border-radius: 100%;
20 |   height: 50px;
21 |   width: 50px;
22 | }
23 | 
24 | .navbar-bg .navbar-title h1 {
25 |   text-transform: capitalize;
26 | }
27 | 
28 | .navbar-bg ul {
29 |   list-style: none;
30 |   display: flex;
31 |   flex-wrap: wrap;
32 |   justify-content: space-around;
33 |   align-items: center;
34 |   gap: 20px;
35 |   padding: 0;
36 | }
37 | 
38 | .navbar-bg ul li a {
39 |   display: flex;
40 |   justify-content: space-around;
41 |   align-items: center;
42 |   gap: 10px;
43 |   color: #acb9c6;
44 |   text-decoration: none;
45 | }
46 | 
47 | .navbar-bg ul li a:hover {
48 |   color: #e1e6eb;
49 | }
50 | 
51 | .navbar-bg .navbar-container {
52 |   display: flex;
53 | }
54 | 
55 | @media only screen and (width < 768px) {
56 |   .navbar-bg {
57 |     flex-direction: column;
58 |   }
59 | }
60 | 
61 | @media only screen and (width < 900px) {
62 |   .navbar-bg ul {
63 |     gap: 10px;
64 |   }
65 | }


--------------------------------------------------------------------------------
/frontend/src/pages/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './Navbar.css'
 3 | import {logo} from './index'
 4 | import { FaGithub, FaTwitter } from "react-icons/fa";
 5 | import {Link, NavLink} from 'react-router-dom'
 6 | 
 7 | function Navbar() {
 8 |   return (
 9 |     <div className='navbar-bg'>
10 |       <div className='navbar-title'>
11 |         <img src={logo} className="About-logo" alt="logo" />
12 |         <h1>club gamma</h1>
13 |       </div>
14 | 
15 |       <div className='navbar-tabs'>
16 |         <ul>
17 |           <li>
18 |             <NavLink to='/'>Home</NavLink>
19 |           </li>
20 |           <li>
21 |             <NavLink to='/about'>About</NavLink>
22 |           </li>
23 |           <li>
24 |             <NavLink to='/repositories'>Repositories</NavLink>
25 |           </li>
26 |           <li>
27 |             <NavLink to='/form'>Form</NavLink>
28 |           </li>
29 |         </ul>
30 |       </div>
31 |       <div className="social-links">
32 |         <ul>
33 |           <li>
34 |             <Link to="https://github.com/clubgamma" target='_blank'>
35 |               <FaGithub />
36 |               <p>GitHub</p>
37 |             </Link>
38 |           </li>
39 |           <li>
40 |             <Link to="https://twitter.com/club_gamma" target='_blank'>
41 |               <FaTwitter />
42 |               <p>Twitter</p>
43 |             </Link>
44 |           </li>
45 |         </ul>
46 |       </div>
47 |     </div>
48 |   )
49 | }
50 | 
51 | export default Navbar


--------------------------------------------------------------------------------
/frontend/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 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Club Gamma (GFI)</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/frontend/src/pages/About.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./About.css";
 3 | import {logo} from './index'
 4 | 
 5 | 
 6 | const About = () => {
 7 |   return (
 8 |     <div className="about-container">
 9 |       <div className="about-bg">
10 |         <img src={logo} className="About-logo" alt="logo" />
11 |         <h2>About Club Gamma</h2>
12 |         <p>Empowering Student Tech Community</p>
13 |       </div>
14 |       <hr />
15 |       <div className="what-gfi">
16 |         <h2>What is GFI</h2>
17 |         <p>GitHub advises the usage of "good first issue" (GFI) labels to identify issues that are feasible for newcomers to handle in order to speed up beginner onboarding. However, prior research demonstrates the scarcity and inappropriateness of manually classified GFIs, demonstrating the need for automated suggestions. In this project, we propose <strong>GFI-Web-app</strong>, a <strong>proof-of-concept</strong> for automatic GFI recommendation in reality (available at <a href="https://pending.com">https://pending.com</a>). Project administrators can set up GFI-app to find and tag potential GFIs so that beginners can quickly find issues to fix when submitting their first contributions.</p>
18 |       </div>
19 |       <hr />
20 |       <div className="why-gfi">
21 |         <h2>Why GFI</h2>
22 |         <p>This website is primarily intended for developers who wish to contribute to open source software but are unsure of where or how to begin. This website gives developers filters so they may search and choose issues and repositories based on the programming languages they are most familiar with. Additionally, they have a choice in the issues they choose to address.</p>
23 |       </div>
24 |       <hr />
25 | 
26 |       <div className="contribution">
27 |         <h2>Contribution Guidelines</h2>
28 |         <p>Welcome hackers it is really awesome have you here! Before start contributing with this project make sure you read our <a href="https://github.com/clubgamma/Good_First_Issue_Web_App/blob/main/CODE_OF_CONDUCT.md">Code Of Conduct</a>, it is really important to make this inclusive and open to everyone, otherwise, it would not be awesome to have you here</p>
29 |       </div>
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default About;
35 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | _Welcome hackers it is really **awesome** have you here! Before start contributing with this project make sure you read our [Code Of Conduct](https://github.com/clubgamma/Good_First_Issue_Web_App/blob/main/CODE_OF_CONDUCT.md), it is really important to make this inclusive and open to everyone, otherwise, it would not be awesome to have you here_
 4 | 
 5 | ## Submitting a pull request
 6 | 
 7 | 
 8 | 1.Read the [Code of Conduct](https://github.com/clubgamma/code-of-conduct) before starting contributing.  
 9 | 2. [Fork](https://github.com/clubgamma/Good_First_Issue_Web_App/fork) and clone the repository.  
10 | 3. Create a new branch: `git checkout -b my-branch-name`.  
11 | 4. Add a file with your name in the contributions folder telling about your contributions and also link that file in the readme.  
12 | 5. Push to your fork and [submit a pull request](https://github.com/clubgamma/Good_First_Issue_Web_App/fork/compare).  
13 | 6. Pat your self on the back and wait for your pull request to be reviewed and merged.
14 | 
15 | ## Coding conventions to be followed -
16 | 
17 | 1. Maintain a proper project folder structure
18 | 2. Follow proper naming conventions
19 | 3. Read the instructions - [Hacktober fest 2022](https://hacktoberfest.com/participation/)
20 | 
21 | Also add the below 2 lines in the description. It is compulsory for sucessful submission.
22 | 
23 | - [x] I have read the Code Of Conduct.
24 | 
25 | - [x] I have followed all the steps of submission properly.
26 | 
27 | **Congratulations on making your open source contribution.**   
28 | 
29 | ## Resources
30 | 
31 | If you are new to GitHub/Open-Source, it is advisable that you go through [GitHub For Beginners](http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1/) **before** moving to ahead.  
32 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
33 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
34 | - [GitHub Help](https://help.github.com)
35 | 
36 | ## Want to Contribute to more awesome Hacktoberfest repository?
37 | 
38 | **Hacktoberfest repository :** 
39 | 
40 | 
41 | | **Repositories**       | **URL**           |
42 | | --- |--- |
43 | | **Uneasy**      | https://github.com/clubgamma/uneasy |
44 | | **Give-my-resume**      | https://github.com/clubgamma/give-my-resume |
45 | | **Trendit**     | https://github.com/clubgamma/Trendit |
46 | | **Directlywa**     | https://github.com/clubgamma/directlywa |
47 | | **All-About-Food**      | https://github.com/clubgamma/All-About-Food |
48 | 
49 | ---
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Good_First_Issue_Web_App
 2 | 
 3 | ## Contents
 4 | 
 5 | 1. [Background](#description)
 6 | 2. [Architecture](#an-overview-of-the-gfi-web-app-architecture)
 7 | 3. [Why "GFI"?](#why-gfi)
 8 | 4. [Contribution Guidelines](#contribution-guidelines)
 9 | 
10 | 
11 | ## Description
12 | GitHub advises the usage of "good first issue" (GFI) labels to identify issues that are feasible for newcomers to handle in order to speed up beginner onboarding. However, prior research demonstrates the scarcity and inappropriateness of manually classified GFIs, demonstrating the need for automated suggestions. In this project, we propose GFI-Web-app, a proof-of-concept for automatic GFI recommendation in reality (available at https://pending.com). Project administrators can set up GFI-app to find and tag potential GFIs so that beginners can quickly find issues to fix when submitting their first contributions. 
13 | 
14 | 
15 | ## An Overview of the GFI-Web App Architecture
16 | <p align="center">
17 |    <img src="https://github.com/Nishu0/GFI_Web_App/blob/main/images/flow.PNG" alt="GFI Architecture"/>
18 | </p>
19 | 
20 | ## Why GFI
21 | 
22 | This website is primarily intended for developers who wish to contribute to open source software but are unsure of where or how to begin. This website gives developers filters so they may search and choose issues and repositories based on the programming languages they are most familiar with. Additionally, they have a choice in the issues they choose to address.
23 | 
24 | ## Contribution Guidelines
25 | 
26 | _Welcome hackers it is really **awesome** have you here! Before start contributing with this project make sure you read our [Code Of Conduct](https://github.com/clubgamma/Good_First_Issue_Web_App/blob/main/CODE_OF_CONDUCT.md), it is really important to make this inclusive and open to everyone, otherwise, it would not be awesome to have you here_
27 | 
28 | ## Submitting a pull request
29 | 
30 | 1. [Fork](https://github.com/clubgamma/Good_First_Issue_Web_App/fork) and clone the repository
31 | 2. Create a new branch: `git checkout -b my-branch-name`
32 | 3. Add a file with your name in the contributions folder telling about your contributions and also link that file in the readme
33 | 5. Push to your fork and [submit a pull request](https://github.com/clubgamma/Good_First_Issue_Web_App/compare)
34 | 6. Pat your self on the back and wait for your pull request to be reviewed and merged.
35 | 
36 | ### Resources
37 | 
38 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
39 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
40 | - [GitHub Help](https://help.github.com)
41 | 
42 | ## Want to Contribute to more awesome Hacktoberfest repository?
43 | 
44 | **Hacktoberfest repository :** 
45 | 
46 | 
47 | | **Repositories**       | **URL**           |
48 | | --- |--- |
49 | | **Uneasy**      | https://github.com/clubgamma/uneasy |
50 | | **Give-my-resume**      | https://github.com/clubgamma/give-my-resume |
51 | | **Trendit**     | https://github.com/clubgamma/Trendit |
52 | | **Directlywa**     | https://github.com/clubgamma/directlywa |
53 | | **All-About-Food**      | https://github.com/clubgamma/All-About-Food |
54 | 
55 | ---
56 | 
57 | **[⬆ back to top](#contents)**
58 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Form.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
  2 | 
  3 | /*
  4 |   1. Use a more-intuitive box-sizing model.
  5 | */
  6 | *,
  7 | *::before,
  8 | *::after {
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | 
 13 | 
 14 | 
 15 | /*
 16 |   2. Remove default margin
 17 | */
 18 | * {
 19 |   margin: 0;
 20 | }
 21 | 
 22 | /*
 23 |   3. Allow percentage-based heights in the application
 24 | */
 25 | html,
 26 | body {
 27 |   height: 100%;
 28 | }
 29 | 
 30 | /*
 31 |   Typographic tweaks!
 32 |   4. Add accessible line-height
 33 |   5. Improve text rendering
 34 | */
 35 | /* body {
 36 |   line-height: 1.7;
 37 |   -webkit-font-smoothing: antialiased;
 38 | } */
 39 | 
 40 | /*
 41 |   6. Improve media defaults
 42 | */
 43 | img,
 44 | picture,
 45 | video,
 46 | canvas,
 47 | svg {
 48 |   display: block;
 49 |   max-width: 100%;
 50 | }
 51 | 
 52 | /*
 53 |   7. Remove built-in form typography styles
 54 | */
 55 | input,
 56 | button,
 57 | textarea,
 58 | select {
 59 |   font: inherit;
 60 | }
 61 | 
 62 | /*
 63 |   8. Avoid text overflows
 64 | */
 65 | p,
 66 | h1,
 67 | h2,
 68 | h3,
 69 | h4,
 70 | h5,
 71 | h6 {
 72 |   overflow-wrap: break-word;
 73 | }
 74 | 
 75 | h1,
 76 | h2,
 77 | h3 {
 78 |   line-height: 1.3;
 79 | }
 80 | 
 81 | /* General Styling */
 82 | 
 83 | body {
 84 |   font-size: 16px;
 85 |   font-family: "Poppins", sans-serif;
 86 | }
 87 | 
 88 | .intro {
 89 |   min-height: 100vh;
 90 |   background: url('../assets/stackedbgrd.png');
 91 |   background-size: cover;
 92 |   display: flex;
 93 |   justify-content: center;
 94 |   align-items: center;
 95 |   width: 100%;
 96 |   
 97 |   padding: 4.5rem 0;
 98 | }
 99 | 
100 | .container {
101 |   display: flex;
102 |   flex-direction: column;
103 |   justify-content: space-between;
104 |   align-items: center;
105 |   max-width: 1300px;
106 | 
107 |   text-align: center;
108 |   
109 |   margin: 1.5rem;
110 | }
111 | 
112 | .left-col {
113 |   flex: 1;
114 | 
115 |   color: white;
116 |   margin-bottom: 2.5rem;
117 |   
118 |   font-weight: 400;
119 |   max-width: 500px;
120 | }
121 | 
122 | .left-col h1 {
123 |   margin-bottom: 1rem;
124 | }
125 | 
126 | .github_link{
127 |   display: block;
128 |   font-size: 1.2rem;
129 |   
130 |   font-weight: 500;
131 | }
132 | .github_link a{
133 |   text-decoration:none;
134 | }
135 | 
136 | /* .left-col p {} */
137 | 
138 | .right-col {
139 |   flex: 1;
140 | }
141 | 
142 | .top-box {
143 |   padding: 1rem 2rem;
144 |   background-color: hsl(248, 32%, 49%);
145 |   border-radius: 0.5rem;
146 |   color: white;
147 |   box-shadow: 0 5px white;
148 |   margin-bottom: 2rem;
149 | }
150 | 
151 | .top-box p {
152 |   font-weight: 400;
153 | }
154 | 
155 | .top-box span {
156 |   font-weight: 600;
157 | }
158 | 
159 | .form-container {
160 |   background-color: white;
161 |   border-radius: 0.5rem;
162 |   box-shadow: 0 7px green;
163 |   overflow: hidden;
164 |   padding-top: 0.5rem;
165 | }
166 | 
167 | .input-group {
168 |   position: relative;
169 |   margin: 1rem 1rem;
170 |   display: flex;
171 |   flex-direction: column;
172 | }
173 | 
174 | .input-group label {
175 |   /* display: none; */
176 |   text-align: left;
177 |   font-weight: 500;
178 | }
179 | 
180 | .input-group input {
181 |   width: 100%;
182 |   height: 3rem;
183 |   padding-left: 1rem;
184 |   border-radius: 0.3rem;
185 |   border: 1.5px solid hsl(246, 25%, 77%);
186 |   outline: none;
187 |   color: hsl(249, 10%, 26%);
188 |   font-weight: 600;
189 | }
190 | 
191 | textarea {
192 |   border: 1.5px solid hsl(246, 25%, 77%);
193 |   font-size: 0.9rem;
194 | }
195 | 
196 | input:focus {
197 |   border: 2px solid hsl(249, 10%, 26%);
198 | }
199 | 
200 | input::placeholder {
201 |   font-size: 0.8rem;
202 | }
203 | 
204 | textarea::placeholder {
205 |   font-size: 0.8rem;
206 |   padding-left: 0.7rem;
207 | }
208 | 
209 | button {
210 |   width: 92%;
211 |   height: 3.5rem;
212 |   margin-bottom: 1.5rem;
213 |   cursor: pointer;
214 |   border-radius: 0.3rem;
215 |   border: none;
216 |   outline: none;
217 |   background-color: hsl(154, 82%, 40%);
218 |   box-shadow: 0 5px hsl(154, 91%, 33%);
219 |   color: white;
220 |   font-weight: 700;
221 |   text-transform: uppercase;
222 | }
223 | 
224 | button:hover {
225 |   background-color: hsl(154, 59%, 51%);
226 | }
227 | 
228 | .form-footer {
229 |   /* border: 2px solid blue; */
230 |   margin: 0 1.5rem;
231 |   margin-bottom: 1.5rem;
232 |   color: hsl(246, 25%, 77%);
233 |   font-size: 0.7rem;
234 |   font-weight: 700;
235 | }
236 | 
237 | .form-footer span {
238 |   color: hsl(0, 100%, 74%);
239 |   font-size: 0.8rem;
240 |   font-weight: 700;
241 | }
242 | 
243 | .error-icon {
244 |   position: absolute;
245 |   top: 25%;
246 |   right: 20px;
247 | }
248 | 
249 | .error-text {
250 |   text-align: right;
251 |   margin-top: 0.3rem;
252 | 
253 |   font-size: 0.7rem;
254 |   font-style: italic;
255 |   font-weight: 600;
256 |   color: hsl(0, 100%, 74%);
257 | }
258 | 
259 | .error-border {
260 |   border: 3px solid red;
261 | }
262 | 
263 | .no-error {
264 |   display: none;
265 | }
266 | 
267 | @media (min-width: 1000px) {
268 |   .container {
269 |     flex-direction: row;
270 |   }
271 | 
272 |   .left-col {
273 |     text-align: left;
274 |     margin-right: 4.5rem;
275 |     width: 400px;
276 |   }
277 | 
278 |   .left-col h1 {
279 |     font-size: 2rem;
280 |   }
281 | 
282 |   .left-col p {
283 |     font-size: 0.8rem;
284 |   }
285 | 
286 |   .right-col {
287 |     max-width: 500px;
288 |   }
289 | 
290 |   .form-container {
291 |     padding: 1.5rem;
292 |   }
293 | 
294 |   .form-footer {
295 |     margin: 0 3rem;
296 |   }
297 | }


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | itsthakkarnisarg@gmail.com.
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Form.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import Select from "react-select";
  3 | 
  4 | import "./Form.css";
  5 | 
  6 | // Tech Stack Array
  7 | // Can update or Delete tech as per needed
  8 | const options = [
  9 |   { label: "HTML", value: "html" },
 10 |   { label: "CSS", value: "css" },
 11 |   { label: "Javascript", value: "js" },
 12 |   { label: "React.js", value: "js" },
 13 |   { label: "Express.js", value: "js" },
 14 |   { label: "Angular", value: "js" },
 15 |   { label: "Vue.js", value: "js" },
 16 |   { label: "Node.js", value: "js" },
 17 |   { label: "Ruby on Rails", value: "js" },
 18 |   { label: "JSON", value: "js" },
 19 |   { label: "C#", value: "js" },
 20 |   { label: ".NET", value: "js" },
 21 |   { label: "Django", value: "js" },
 22 |   { label: "Python", value: "js" },
 23 |   { label: "PyCharm", value: "js" },
 24 |   { label: "Flask", value: "js" },
 25 |   { label: "MySQL", value: "js" },
 26 |   { label: "MongoDB", value: "js" },
 27 |   { label: "Flutter", value: "js" },
 28 |   { label: "Firebase", value: "js" },
 29 |   { label: "Java", value: "js" },
 30 |   { label: "Laravel", value: "js" },
 31 |   { label: "Java", value: "js" },
 32 |   { label: "Java", value: "js" },
 33 |   { label: "Java", value: "js" },
 34 | ];
 35 | 
 36 | function Form() {
 37 |   const [selected, setSelected] = useState();
 38 | 
 39 |   //Fuction handling the tech-stack options
 40 |   function handleSelect(data) {
 41 |     setSelected(data);
 42 |   }
 43 |   return (
 44 |     <>
 45 |       {/* HTML for Form */}
 46 |       <section class="intro">
 47 |         <div class="container">
 48 |           <div class="left-col">
 49 |             <h1>Welcome Organisations!</h1>
 50 |             <p>
 51 |               Just add the Issues, and let the Open source contributers show
 52 |               their magic with the respetive Tech-Stack.
 53 |               <span className="github_link"><a href="https://github.com/clubgamma/Good_First_Issue_Web_App">Github link</a> </span>
 54 |             </p>
 55 |           </div>
 56 |           <div class="rigth-col">
 57 |             <div class="top-box">
 58 |               <p>
 59 |                 <span>CLUB GAMMA </span> invites you all
 60 |               </p>
 61 |             </div>
 62 |             <div class="form-container">
 63 |               <form action="#" autocomplete="off">
 64 |                 <div class="input-group">
 65 |                   <label htmlFor="repoName">Repo Name</label>
 66 |                   <input
 67 |                     type="text"
 68 |                     id="repoName"
 69 |                     placeholder="Repo Name"
 70 |                     required
 71 |                   />
 72 |                   {/* <img
 73 |                     src="images/icon-error.svg"
 74 |                     class="error-icon no-error"
 75 |                     alt=""
 76 |                   /> */}
 77 |                   <p class="error-text no-error">Repo Name cannot be empty</p>
 78 |                 </div>
 79 |                 <div class="input-group">
 80 |                   <label htmlFor="repoLink">Repo Link</label>
 81 |                   <input
 82 |                     type="text"
 83 |                     id="repoLink"
 84 |                     placeholder="Repo Link"
 85 |                     required
 86 |                   />
 87 |                   {/* <img
 88 |                     src="images/icon-error.svg"
 89 |                     class="error-icon no-error"
 90 |                     alt=""
 91 |                   /> */}
 92 |                   <p class="error-text no-error">Repo Link cannot be empty</p>
 93 |                 </div>
 94 |                 <div class="input-group">
 95 |                   <label for="description">description</label>
 96 |                   <textarea
 97 |                     name="description"
 98 |                     rows="5"
 99 |                     cols="60"
100 |                     placeholder="Add small description for the Good first Issue"
101 |                   ></textarea>
102 |                   {/* <img
103 |                     src="images/icon-error.svg"
104 |                     class="error-icon no-error"
105 |                     alt=""
106 |                   /> */}
107 |                   <p class="error-text no-error">
108 |                     Looks like this is not an description
109 |                   </p>
110 |                 </div>
111 |                 <div class="input-group">
112 |                   <label for="techStack">techStack</label>
113 | 
114 |                   {/* <input
115 |                     type="text"
116 |                     id="tesxStack"
117 |                     placeholder="Tech-Stack"
118 |                     required
119 |                   /> */}
120 |                   <Select
121 |                     options={options}
122 |                     value={selected}
123 |                     onChange={handleSelect}
124 |                     isSearchable={true}
125 |                     isMulti
126 |                     placeholder="Select Tech-Stack"
127 |                   />
128 |                   {/* <img
129 |                     src="images/icon-error.svg"
130 |                     class="error-icon no-error"
131 |                     alt=""
132 |                   /> */}
133 |                   <p class="error-text no-error">Tech Stack cannot be empty</p>
134 |                 </div>
135 | 
136 |                 <button type="submit" class="">
137 |                   Submit
138 |                 </button>
139 |                 <p class="form-footer">
140 |                   By clicking the button, you are agreeing to our{" "}
141 |                   <span>Terms and Services</span>
142 |                 </p>
143 |               </form>
144 |             </div>
145 |           </div>
146 |         </div>
147 |       </section>
148 |     </>
149 |   );
150 | }
151 | 
152 | export default Form;
153 | 


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