├── .gitignore
├── README.md
├── components
    ├── Card.tsx
    ├── Layout.tsx
    └── Nav.tsx
├── next-env.d.ts
├── package.json
├── pages
    ├── _app.tsx
    ├── api
    │   ├── join-queue.ts
    │   └── queue.ts
    ├── index.tsx
    └── join-queue.tsx
├── postcss.config.js
├── public
    └── face.png
├── styles
    └── index.css
├── tailwind.config.js
├── tsconfig.json
├── utils
    └── connectToDb.ts
├── vercel.json
└── yarn.lock


/.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 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 
32 | .vercel


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # livestream-queue
2 | 
3 | https://livestream-queue.benawad.vercel.app/
4 | 


--------------------------------------------------------------------------------
/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | interface CardProps {
 4 |   discordName: string;
 5 |   technology: string;
 6 | }
 7 | 
 8 | export const Card: React.FC<CardProps> = ({ discordName, technology }) => {
 9 |   return (
10 |     <div className="mb-4 max-w-sm rounded overflow-hidden shadow-lg">
11 |       <div className="px-6 py-4">
12 |         <div className="font-bold text-xl mb-2">{discordName}</div>
13 |         <p className="text-gray-700 text-base">{technology}</p>
14 |       </div>
15 |     </div>
16 |   );
17 | };
18 | 


--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Nav } from "./Nav";
 3 | 
 4 | interface LayoutProps {}
 5 | 
 6 | export const Layout: React.FC<LayoutProps> = ({ children }) => {
 7 |   return (
 8 |     <>
 9 |       <Nav />
10 |       <div className="container mx-auto">{children}</div>
11 |     </>
12 |   );
13 | };
14 | 


--------------------------------------------------------------------------------
/components/Nav.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { classnames } from "tailwindcss-classnames";
 3 | import Link from "next/link";
 4 | 
 5 | interface navProps {}
 6 | 
 7 | export const Nav: React.FC<navProps> = ({}) => {
 8 |   return (
 9 |     <nav className="flex items-center justify-between flex-wrap bg-blue p-6">
10 |       <div className="container">
11 |         <Link href="/">
12 |           <a>
13 |             <div className="flex items-center flex-shrink-0 text-white mr-6">
14 |               <img
15 |                 className={classnames("rounded-full")}
16 |                 src="/face.png"
17 |                 width="54"
18 |                 height="54"
19 |               />
20 |               <span className="ml-5 font-semibold text-xl tracking-tight">
21 |                 Pair Programming Queue
22 |               </span>
23 |             </div>
24 |           </a>
25 |         </Link>
26 |       </div>
27 |     </nav>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "with-tailwindcss",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next",
 6 |     "build": "next build",
 7 |     "start": "next start"
 8 |   },
 9 |   "dependencies": {
10 |     "mongodb": "^3.5.9",
11 |     "next": "^9.2.0",
12 |     "react": "^16.12.0",
13 |     "react-dom": "^16.12.0",
14 |     "tailwindcss-classnames": "^1.4.1"
15 |   },
16 |   "devDependencies": {
17 |     "@types/mongodb": "^3.5.25",
18 |     "@types/node": "^14.0.22",
19 |     "@types/react": "^16.9.42",
20 |     "postcss-preset-env": "^6.7.0",
21 |     "tailwindcss": "^1.4.0",
22 |     "typescript": "^3.9.6"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/index.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/join-queue.ts:
--------------------------------------------------------------------------------
 1 | import { connectToDb } from "../../utils/connectToDb";
 2 | 
 3 | export default async function handler(req, res) {
 4 |   if (
 5 |     typeof req.body.discordName !== "string" ||
 6 |     typeof req.body.technology !== "string"
 7 |   ) {
 8 |     throw new Error("bad input");
 9 |   }
10 |   const db = await connectToDb();
11 |   const today = new Date();
12 |   await db.collection("queue").insert({
13 |     discordName: req.body.discordName,
14 |     technology: req.body.technology,
15 |     date:
16 |       today.getFullYear() +
17 |       "-" +
18 |       (today.getMonth() + 1) +
19 |       "-" +
20 |       today.getDate(),
21 |   });
22 |   res.status(200).json({ ok: true });
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/api/queue.ts:
--------------------------------------------------------------------------------
1 | import { connectToDb } from "../../utils/connectToDb";
2 | 
3 | export default async function handler(req, res) {
4 |   const db = await connectToDb();
5 |   const queue = await db.collection("queue").find().toArray();
6 |   res.status(200).json(queue);
7 | }
8 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Nav } from "../components/Nav";
 2 | import { Card } from "../components/Card";
 3 | import Link from "next/link";
 4 | import { Layout } from "../components/Layout";
 5 | import { useState, useEffect } from "react";
 6 | import { classnames } from "tailwindcss-classnames";
 7 | 
 8 | export default function IndexPage() {
 9 |   const [queue, setQueue] = useState([]);
10 |   useEffect(() => {
11 |     fetch("/api/queue")
12 |       .then((x) => x.json())
13 |       .then((x) => setQueue(x));
14 |   }, []);
15 |   return (
16 |     <Layout>
17 |       <div className={classnames("text-4xl", "mt-4")}>How it works</div>
18 |       <pre>
19 |         {`
20 | 1. You need a mic
21 | 2. Send me a VSCode LiveShare link in Discord
22 | 3. I will call you on Discord and we will code
23 | 
24 | Discord: https://discord.gg/Vehs99V
25 | 
26 | We will code on whatever you like
27 | 
28 | total beginners to intermediates to experts are welcome
29 | 
30 | pick a technology I know
31 | 
32 | frameworks that start with the letter A are banned
33 | 
34 | make sure you have your dev environment setup and have a specific thing you want to discuss/debug
35 | 
36 | PS: I don't know Vue
37 | 
38 | no resumes (I suck at evaluated them)`}
39 |       </pre>
40 |       <h2 className={classnames("text-3xl", "mb-4")}>Queue</h2>
41 |       <Link href="/join-queue">
42 |         <a className="btn btn-green">join queue</a>
43 |       </Link>
44 |       <div className={classnames("mt-4")}>
45 |         {queue.map((q) => (
46 |           <Card discordName={q.discordName} technology={q.technology} />
47 |         ))}
48 |       </div>
49 |     </Layout>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/join-queue.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Layout } from "../components/Layout";
  3 | import { classnames } from "tailwindcss-classnames";
  4 | import Router from "next/router";
  5 | 
  6 | interface Props {}
  7 | 
  8 | const JoinQueue: React.FC<Props> = ({}) => {
  9 |   const [values, setValues] = useState({ discordName: "", technology: "" });
 10 |   const [errors, setErrors] = useState({ discordName: "", technology: "" });
 11 |   return (
 12 |     <Layout>
 13 |       <form
 14 |         onSubmit={(e) => {
 15 |           e.preventDefault();
 16 |           const newErrors = { discordName: "", technology: "" };
 17 |           let hasError = false;
 18 |           Object.keys(values).forEach((k) => {
 19 |             if (!values[k] || !values[k].trim()) {
 20 |               newErrors[k] = "required";
 21 |               hasError = true;
 22 |             }
 23 |           });
 24 | 
 25 |           if (hasError) {
 26 |             setErrors(newErrors);
 27 |             return;
 28 |           }
 29 | 
 30 |           fetch("/api/join-queue", {
 31 |             method: "POST",
 32 |             headers: {
 33 |               "Content-type": "application/json",
 34 |             },
 35 |             body: JSON.stringify(values),
 36 |           })
 37 |             .then((x) => x.json())
 38 |             .then(() => {
 39 |               Router.push("/");
 40 |             })
 41 |             .catch((err) => {
 42 |               setErrors({ discordName: "internal error", technology: "" });
 43 |             });
 44 |         }}
 45 |         className="mt-10 mx-auto w-full max-w-sm"
 46 |       >
 47 |         <div className="mb-4">
 48 |           <label className="block text-gray-700 text-sm font-bold mb-2">
 49 |             Discord Name
 50 |           </label>
 51 |           <input
 52 |             className={classnames(
 53 |               "shadow",
 54 |               "appearance-none",
 55 |               "border",
 56 |               "rounded",
 57 |               "w-full",
 58 |               "py-2",
 59 |               "px-3",
 60 |               "text-gray-700",
 61 |               "leading-tight",
 62 |               "focus:outline-none",
 63 |               "focus:shadow-outline",
 64 |               {
 65 |                 ["border-red-500"]: !!errors.discordName,
 66 |               }
 67 |             )}
 68 |             value={values.discordName}
 69 |             onChange={(e) =>
 70 |               setValues({ ...values, discordName: e.target.value })
 71 |             }
 72 |             type="text"
 73 |             placeholder="jimbob45"
 74 |           />
 75 |           {errors.discordName && (
 76 |             <p className="text-red-500 text-xs italic">{errors.discordName}</p>
 77 |           )}
 78 |         </div>
 79 |         <div className="mb-4">
 80 |           <label className="block text-gray-700 text-sm font-bold mb-2">
 81 |             Technology
 82 |           </label>
 83 |           <input
 84 |             value={values.technology}
 85 |             onChange={(e) =>
 86 |               setValues({ ...values, technology: e.target.value })
 87 |             }
 88 |             className={classnames(
 89 |               "shadow",
 90 |               "appearance-none",
 91 |               "border",
 92 |               "rounded",
 93 |               "w-full",
 94 |               "py-2",
 95 |               "px-3",
 96 |               "text-gray-700",
 97 |               "leading-tight",
 98 |               "focus:outline-none",
 99 |               "focus:shadow-outline",
100 |               {
101 |                 ["border-red-500"]: !!errors.technology,
102 |               }
103 |             )}
104 |             type="text"
105 |             placeholder="react"
106 |           />
107 |           {errors.technology && (
108 |             <p className="text-red-500 text-xs italic">{errors.technology}</p>
109 |           )}
110 |         </div>
111 |         <div className="flex items-center justify-between">
112 |           <button className="btn btn-green" type="submit">
113 |             submit
114 |           </button>
115 |         </div>
116 |       </form>
117 |     </Layout>
118 |   );
119 | };
120 | 
121 | export default JoinQueue;
122 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ['tailwindcss', 'postcss-preset-env'],
3 | }
4 | 


--------------------------------------------------------------------------------
/public/face.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/livestream-queue/63215ded1b8641786f8d454660b6f9112275725a/public/face.png


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .btn {
 6 |   @apply font-bold py-2 px-4 rounded;
 7 | }
 8 | .btn-green {
 9 |   @apply bg-green text-white;
10 | }
11 | .btn-green:hover {
12 |   @apply bg-darkBlue;
13 | }
14 | 
15 | a {
16 |   color: blue;
17 | }
18 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
 3 |   theme: {
 4 |     extend: {
 5 |       colors: {
 6 |         darkBlue: "#011C40",
 7 |         blue: "#023E73",
 8 |         green: "#355934",
 9 |         tan: "#F2EBD5",
10 |         salmon: "#F29991",
11 |       },
12 |       container: {
13 |         center: true,
14 |       },
15 |     },
16 |   },
17 |   variants: {},
18 |   plugins: [],
19 | };
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "exclude": [
22 |     "node_modules"
23 |   ],
24 |   "include": [
25 |     "next-env.d.ts",
26 |     "**/*.ts",
27 |     "**/*.tsx"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/utils/connectToDb.ts:
--------------------------------------------------------------------------------
 1 | import { MongoClient, Db } from "mongodb";
 2 | import url from "url";
 3 | 
 4 | // Create cached connection variable
 5 | let cachedDb: Db = null;
 6 | 
 7 | // A function for connecting to MongoDB,
 8 | // taking a single parameter of the connection string
 9 | export async function connectToDb(uri = process.env.MONGODB_URI) {
10 |   // If the database connection is cached,
11 |   // use it instead of creating a new connection
12 |   if (cachedDb) {
13 |     return cachedDb;
14 |   }
15 | 
16 |   // If no connection is cached, create a new one
17 |   const client = await MongoClient.connect(uri, { useNewUrlParser: true });
18 | 
19 |   // Select the database through the connection,
20 |   // using the database path of the connection string
21 |   const db = await client.db(url.parse(uri).pathname.substr(1));
22 | 
23 |   // Cache the database connection and return the connection
24 |   cachedDb = db;
25 |   return db;
26 | }
27 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "my-mongodb-api",
3 |   "version": 2,
4 |   "env": {
5 |     "MONGODB_URI": "@my-mongodb-uri"
6 |   }
7 | }
8 | 


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