Merge pull request #44 from MaxLeiter/passwordPosts

Protected posts
2022-03-21 17:43:05 -07:00 · 2022-03-21 17:43:05 -07:00 · fb38ecc932
commit fb38ecc932
parent 5b3d69d4a7 d30c34deec
44 changed files with 1280 additions and 436 deletions
--- a/README.md
+++ b/README.md
@ -30,6 +30,7 @@ You can change these to your liking.
 - `API_URL`: defaults to localhost:3001, but allows you to host the front-end separately from the backend on a service like Vercel or Netlify
 - `WELCOME_CONTENT`: a markdown string (with \n newlines) that's rendered on the home page
 - `WELCOME_TITLE`: the file title for the post on the homepage.
+- `SECRET_KEY`: a secret key used for validating API requests that is never exposed to the browser

 `server/.env`:

@ -38,6 +39,7 @@ You can change these to your liking.
 - `JWT_SECRET`: a secure token for JWT tokens. You can generate one [here](https://www.grc.com/passwords.htm).
 - `MEMORY_DB`: if `true`, a sqlite database will not be created and changes will only exist in memory. Mainly for the demo.
 - `REGISTRATION_PASSWORD`: if MEMORY_DB is not `true`, the user will be required to provide this password to sign-up, in addition to their username and account password. If it's not set, no password will be required.
+- `SECRET_KEY`: the same secret key as the client

 ## Current status

--- a/client/.env.local
+++ b/client/.env.local
@ -1,3 +1,4 @@
 API_URL=http://localhost:3000
 WELCOME_TITLE="Welcome to Drift"
 WELCOME_CONTENT="### Drift is a self-hostable clone of GitHub Gist. \nIt is a simple way to share code and text snippets with your friends, with support for the following:\n  \n  - Render GitHub Extended Markdown (including images)\n  - User authentication\n  - Private, public, and secret posts\n  \n  If you want to signup, you can join at [/signup](/signup) as long as you have a passcode provided by the administrator (which you don\'t need for this demo).\n  **This demo is on a memory-only database, so accounts and pastes can be deleted at any time.**\n  You can find the source code on [GitHub](https://github.com/MaxLeiter/drift).\n  \n  Drift was inspired by [this tweet](https://twitter.com/emilyst/status/1499858264346935297):\n  > What is the absolute closest thing to GitHub Gist that can be self-hosted?\n    In terms of design and functionality. Hosts images and markdown, rendered. Creates links that can be private or public. Uses/requires registration. I have looked at dozens of pastebin-like things."
+SECRET_KEY=secret
--- a/client/components/document/formatting-icons/index.tsx
+++ b/client/components/document/formatting-icons/index.tsx
@ -1,5 +1,8 @@
 import { ButtonGroup, Button } from "@geist-ui/core"
-import { Bold, Italic, Link, Image as ImageIcon } from '@geist-ui/icons'
+import Bold from '@geist-ui/icons/bold'
+import Italic from '@geist-ui/icons/italic'
+import Link from '@geist-ui/icons/link'
+import ImageIcon from '@geist-ui/icons/image'
 import { RefObject, useCallback, useMemo } from "react"
 import styles from '../document.module.css'

@ -20,7 +23,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
    //     return { textBefore: '', textAfter: '' }
    // }, [textareaRef,])

-    const handleBoldClick = useCallback((e) => {
+    const handleBoldClick = useCallback(() => {
        if (textareaRef?.current && setText) {
            const selectionStart = textareaRef.current.selectionStart
            const selectionEnd = textareaRef.current.selectionEnd
@ -37,7 +40,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
        }
    }, [setText, textareaRef])

-    const handleItalicClick = useCallback((e) => {
+    const handleItalicClick = useCallback(() => {
        if (textareaRef?.current && setText) {
            const selectionStart = textareaRef.current.selectionStart
            const selectionEnd = textareaRef.current.selectionEnd
@ -52,7 +55,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
        }
    }, [setText, textareaRef])

-    const handleLinkClick = useCallback((e) => {
+    const handleLinkClick = useCallback(() => {
        if (textareaRef?.current && setText) {
            const selectionStart = textareaRef.current.selectionStart
            const selectionEnd = textareaRef.current.selectionEnd
@ -73,7 +76,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
        }
    }, [setText, textareaRef])

-    const handleImageClick = useCallback((e) => {
+    const handleImageClick = useCallback(() => {
        if (textareaRef?.current && setText) {
            const selectionStart = textareaRef.current.selectionStart
            const selectionEnd = textareaRef.current.selectionEnd
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@ -2,7 +2,9 @@ import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea, Tooltip } fro
 import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react"
 import styles from './document.module.css'
 import MarkdownPreview from '../preview'
-import { Trash, Download, ExternalLink } from '@geist-ui/icons'
+import Trash from '@geist-ui/icons/trash'
+import Download from '@geist-ui/icons/download'
+import ExternalLink from '@geist-ui/icons/externalLink'
 import FormattingIcons from "./formatting-icons"
 import Skeleton from "react-loading-skeleton"
 // import Link from "next/link"
--- a/client/components/header/controls.tsx
+++ b/client/components/header/controls.tsx
@ -2,15 +2,15 @@ import React from 'react'
 import MoonIcon from '@geist-ui/icons/moon'
 import SunIcon from '@geist-ui/icons/sun'
 import { Select } from '@geist-ui/core'
-import { ThemeProps } from '../../pages/_app'
 // import { useAllThemes, useTheme } from '@geist-ui/core'
 import styles from './header.module.css'
+import { ThemeProps } from '@lib/types'
+import Cookies from 'js-cookie'

 const Controls = ({ changeTheme, theme }: ThemeProps) => {
    const switchThemes = (type: string | string[]) => {
        changeTheme()
-        if (typeof window === 'undefined' || !window.localStorage) return
-        window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
+        Cookies.set('drift-theme', Array.isArray(type) ? type[0] : type)
    }


--- a/client/components/header/index.tsx
+++ b/client/components/header/index.tsx
@ -1,11 +1,21 @@
 import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core";
-import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons";
 import { DriftProps } from "../../pages/_app";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import styles from './header.module.css';
 import { useRouter } from "next/router";
 import useSignedIn from "../../lib/hooks/use-signed-in";

+import HomeIcon from '@geist-ui/icons/home';
+import MenuIcon from '@geist-ui/icons/menu';
+import GitHubIcon from '@geist-ui/icons/github';
+import SignOutIcon from '@geist-ui/icons/userX';
+import SignInIcon from '@geist-ui/icons/user';
+import SignUpIcon from '@geist-ui/icons/userPlus';
+import NewIcon from '@geist-ui/icons/plusCircle';
+import YourIcon from '@geist-ui/icons/list'
+import MoonIcon from '@geist-ui/icons/moon';
+import SunIcon from '@geist-ui/icons/sun';
+
 type Tab = {
    name: string
    icon: JSX.Element
@ -61,7 +71,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
            {
                name: "Sign out",
                href: "/signout",
-                icon: <SignoutIcon />,
+                icon: <SignOutIcon />,
                condition: isSignedIn,
                value: "signout"
            },
@ -94,7 +104,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                        setSelectedTab('');
                    }
                },
-                icon: theme === 'light' ? <Moon /> : <Sun />,
+                icon: theme === 'light' ? <MoonIcon /> : <SunIcon />,
                condition: true,
                value: "theme",
            }
--- a/client/components/my-posts/index.tsx
+++ b/client/components/my-posts/index.tsx
@ -1,17 +1,7 @@
-import useSWR from "swr"
 import PostList from "../post-list"
-import Cookies from "js-cookie"

-const fetcher = (url: string) => fetch(url, {
-    headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${Cookies.get("drift-token")}`
-    },
-}).then(r => r.json())
-
-const MyPosts = () => {
-    const { data, error } = useSWR('/server-api/users/mine', fetcher)
-    return <PostList posts={data} error={error} />
+const MyPosts = ({ posts, error }: { posts: any, error: any }) => {
+    return <PostList posts={posts} error={error} />
 }

 export default MyPosts
--- a/client/components/new-post/drag-and-drop/index.tsx
+++ b/client/components/new-post/drag-and-drop/index.tsx
@ -1,10 +1,9 @@
-import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
-import { memo, useCallback, useEffect } from 'react'
+import { Text, useTheme, useToasts } from '@geist-ui/core'
+import { memo } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
-import { Document } from '../'
+import type { Document } from '@lib/types'
 import generateUUID from '@lib/generate-uuid'
-import { XCircle } from '@geist-ui/icons'
 const allowedFileTypes = [
    'application/json',
    'application/x-javascript',
@ -99,7 +98,7 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
    const { setToast } = useToasts()
    const onDrop = async (acceptedFiles: File[]) => {
        const newDocs = await Promise.all(acceptedFiles.map((file) => {
-            return new Promise<Document>((resolve, reject) => {
+            return new Promise<Document>((resolve) => {
                const reader = new FileReader()

                reader.onabort = () => setToast({ text: 'File reading was aborted', type: 'error' })
--- a/client/components/new-post/index.tsx
+++ b/client/components/new-post/index.tsx
@ -2,28 +2,55 @@ import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react'
 import generateUUID from '@lib/generate-uuid';
-import Document from '../document';
+import DocumentComponent from '../document';
 import FileDropzone from './drag-and-drop';
 import styles from './post.module.css'
 import Title from './title';
 import Cookies from 'js-cookie'
-
-export type Document = {
-    title: string
-    content: string
-    id: string
-}
+import type { PostVisibility, Document as DocumentType } from '@lib/types';
+import PasswordModal from './password';
+import getPostPath from '@lib/get-post-path';

 const Post = () => {
    const { setToast } = useToasts()
-
    const router = useRouter();
    const [title, setTitle] = useState<string>()
-    const [docs, setDocs] = useState<Document[]>([{
+    const [docs, setDocs] = useState<DocumentType[]>([{
        title: '',
        content: '',
        id: generateUUID()
    }])
+    const [passwordModalVisible, setPasswordModalVisible] = useState(false)
+    const sendRequest = useCallback(async (url: string, data: { visibility?: PostVisibility, title?: string, files?: DocumentType[], password?: string, userId: string }) => {
+        const res = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${Cookies.get('drift-token')}`
+            },
+            body: JSON.stringify({
+                title,
+                files: docs,
+                ...data,
+            })
+        })
+
+        if (res.ok) {
+            const json = await res.json()
+            router.push(getPostPath(json.visibility, json.id))
+        } else {
+            const json = await res.json()
+            setToast({
+                text: json.message,
+                type: 'error'
+            })
+        }
+
+    }, [docs, router, setToast, title])
+
+    const closePasswordModel = () => {
+        setPasswordModalVisible(false)
+    }

    const [isSubmitting, setSubmitting] = useState(false)

@ -31,29 +58,25 @@ const Post = () => {
        setDocs(docs.filter((doc) => doc.id !== id))
    }

-    const onSubmit = async (visibility: string) => {
+    const onSubmit = async (visibility: PostVisibility, password?: string) => {
        setSubmitting(true)
-        const response = await fetch('/server-api/posts/create', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${Cookies.get("drift-token")}`
-            },
-            body: JSON.stringify({
-                title,
-                files: docs,
-                visibility,
-                userId: Cookies.get("drift-userid"),
-            })
-        })

-        const json = await response.json()
-        setSubmitting(false)
-        if (json.id)
-            router.push(`/post/${json.id}`)
-        else {
-            setToast({ text: json.error.message, type: "error" })
+        if (visibility === 'protected' && !password) {
+            setPasswordModalVisible(true)
+            return
        }
+
+        await sendRequest('/server-api/posts/create', {
+            title,
+            files: docs,
+            visibility,
+            password,
+            userId: Cookies.get('drift-userid') || ''
+        })
+    }
+
+    const onClosePasswordModal = () => {
+        setPasswordModalVisible(false)
    }

    const updateTitle = useCallback((title: string, id: string) => {
@ -64,9 +87,9 @@ const Post = () => {
        setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc))
    }, [docs])

-    const uploadDocs = useCallback((files: Document[]) => {
+    const uploadDocs = useCallback((files: DocumentType[]) => {
        // if no title is set and the only document is empty,
-        const isFirstDocEmpty = docs.length === 1 && docs[0].title === '' && docs[0].content === ''
+        const isFirstDocEmpty = docs.length <= 1 && docs[0].title === '' && docs[0].content === ''
        const shouldSetTitle = !title && isFirstDocEmpty
        if (shouldSetTitle) {
            if (files.length === 1) {
@ -87,7 +110,7 @@ const Post = () => {
            {
                docs.map(({ content, id, title }) => {
                    return (
-                        <Document
+                        <DocumentComponent
                            remove={() => remove(id)}
                            key={id}
                            editable={true}
@ -120,9 +143,11 @@ const Post = () => {
                    <ButtonDropdown.Item main onClick={() => onSubmit('private')}>Create Private</ButtonDropdown.Item>
                    <ButtonDropdown.Item onClick={() => onSubmit('public')} >Create Public</ButtonDropdown.Item>
                    <ButtonDropdown.Item onClick={() => onSubmit('unlisted')} >Create Unlisted</ButtonDropdown.Item>
+                    <ButtonDropdown.Item onClick={() => onSubmit('protected')} >Create with Password</ButtonDropdown.Item>
                </ButtonDropdown>
+                <PasswordModal isOpen={passwordModalVisible} onClose={onClosePasswordModal} onSubmit={(password) => onSubmit('protected', password)} />
            </div>
-        </div >
+        </div>
    )
 }

--- a/client/components/new-post/password/index.tsx
+++ b/client/components/new-post/password/index.tsx
@ -0,0 +1,50 @@
+import { Input, Modal, Note, Spacer } from "@geist-ui/core"
+import { useState } from "react"
+
+type Props = {
+    isOpen: boolean
+    onClose: () => void
+    onSubmit: (password: string) => void
+}
+
+const PasswordModal = ({ isOpen, onClose, onSubmit: onSubmitAfterVerify }: Props) => {
+    const [password, setPassword] = useState<string>()
+    const [confirmPassword, setConfirmPassword] = useState<string>()
+    const [error, setError] = useState<string>()
+
+    const onSubmit = () => {
+        if (!password || !confirmPassword) {
+            setError('Please enter a password')
+            return
+        }
+
+        if (password !== confirmPassword) {
+            setError("Passwords do not match")
+            return
+        }
+
+        onSubmitAfterVerify(password)
+    }
+
+    return (<>
+        {<Modal visible={isOpen} >
+            <Modal.Title>Enter a password</Modal.Title>
+            <Modal.Content>
+                {!error && <Note type="warning" label='Warning'>
+                    This doesn&apos;t protect your post from the server administrator.
+                </Note>}
+                {error && <Note type="error" label='Error'>
+                    {error}
+                </Note>}
+                <Spacer />
+                <Input width={"100%"} label="Password" marginBottom={1} htmlType="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
+                <Input width={"100%"} label="Confirm" htmlType="password" placeholder="Confirm Password" onChange={(e) => setConfirmPassword(e.target.value)} />
+            </Modal.Content>
+            <Modal.Action passive onClick={onClose}>Cancel</Modal.Action>
+            <Modal.Action onClick={onSubmit}>Submit</Modal.Action>
+        </Modal>}
+    </>)
+}
+
+
+export default PasswordModal
--- a/client/components/new-post/title/index.tsx
+++ b/client/components/new-post/title/index.tsx
@ -1,4 +1,4 @@
-import { ChangeEvent, memo } from 'react'
+import { memo } from 'react'
 import { Text, Input } from '@geist-ui/core'
 import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'
--- a/client/components/post-list/list-item.tsx
+++ b/client/components/post-list/list-item.tsx
@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 import timeAgo from "@lib/time-ago"
 import ShiftBy from "../shift-by"
 import VisibilityBadge from "../visibility-badge"
+import getPostPath from "@lib/get-post-path"

 const FilenameInput = ({ title }: { title: string }) => <Input
    value={title}
@ -33,7 +34,7 @@ const ListItem = ({ post }: { post: any }) => {
            <Grid.Container>
                <Grid md={14} xs={14}>
                    <Text h3 paddingLeft={1 / 2} >
-                        <NextLink passHref={true} href={`/post/${post.id}`}>
+                        <NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
                            <Link color>{post.title}
                                <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
                            </Link>
--- a/client/components/preview/react-markdown-preview.tsx
+++ b/client/components/preview/react-markdown-preview.tsx
@ -1,14 +1,15 @@
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'

 // @ts-ignore because of no types in remark-a11y-emoji
-import a11yEmoji from '@fec/remark-a11y-emoji';
+// import a11yEmoji from '@fec/remark-a11y-emoji';

 import styles from './preview.module.css'
-import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
+import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
 import useSharedState from "@lib/hooks/use-shared-state";

 type Props = {
@ -20,7 +21,7 @@ const ReactMarkdownPreview = ({ content, height }: Props) => {
    const [themeType] = useSharedState<string>('theme')
    return (<div style={{ height }}>
        <ReactMarkdown className={styles.markdownPreview}
-            remarkPlugins={[remarkGfm, a11yEmoji]}
+            remarkPlugins={[remarkGfm]}
            rehypePlugins={[rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
            components={{
                code({ node, inline, className, children, ...props }) {
--- a/client/components/visibility-badge/index.tsx
+++ b/client/components/visibility-badge/index.tsx
@ -1,9 +1,8 @@
 import { Badge } from "@geist-ui/core"
-
-type Visibility = "unlisted" | "private" | "public"
+import { PostVisibility } from "@lib/types"

 type Props = {
-    visibility: Visibility
+    visibility: PostVisibility
 }

 const VisibilityBadge = ({ visibility }: Props) => {
--- a/client/lib/get-post-path.ts
+++ b/client/lib/get-post-path.ts
@ -0,0 +1,13 @@
+import type { PostVisibility } from "./types"
+
+export default function getPostPath(visibility: PostVisibility, id: string) {
+    switch (visibility) {
+        case "private":
+            return `/post/private/${id}`
+        case "protected":
+            return `/post/protected/${id}`
+        case "unlisted":
+        case "public":
+            return `/post/${id}`
+    }
+}
--- a/client/lib/types.d.ts
+++ b/client/lib/types.d.ts
@ -0,0 +1,12 @@
+export type PostVisibility = "unlisted" | "private" | "public" | "protected"
+
+export type ThemeProps = {
+    theme: "light" | "dark" | string,
+    changeTheme: () => void
+}
+
+export type Document = {
+    title: string
+    content: string
+    id: string
+}
--- a/client/next.config.js
+++ b/client/next.config.js
@ -1,6 +1,10 @@
 const dotenv = require("dotenv");
 dotenv.config();

+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
@ -21,4 +25,4 @@ const nextConfig = {
  },
 };

-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);
--- a/client/package.json
+++ b/client/package.json
@ -6,10 +6,10 @@
    "dev": "next dev --port 3001",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
-    "@fec/remark-a11y-emoji": "^3.1.0",
    "@geist-ui/core": "^2.3.5",
    "@geist-ui/icons": "^1.0.1",
    "@types/cookie": "^0.4.1",
@ -19,7 +19,8 @@
    "cookie": "^0.4.2",
    "dotenv": "^16.0.0",
    "js-cookie": "^3.0.1",
-    "next": "12.1.0",
+    "next": "^12.1.1-canary.15",
+    "prism-react-renderer": "^1.3.1",
    "prismjs": "^1.27.0",
    "react": "17.0.2",
    "react-debounce-render": "^8.0.2",
@ -31,18 +32,21 @@
    "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-katex": "^6.0.2",
+    "rehype-remark": "^9.1.2",
    "rehype-slug": "^5.0.1",
-    "rehype-stringify": "^9.0.3",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "swr": "^1.2.2"
  },
  "devDependencies": {
+    "@next/bundle-analyzer": "^12.1.0",
    "@types/node": "17.0.21",
    "@types/react": "17.0.39",
+    "@types/react-dom": "^17.0.14",
    "@types/react-syntax-highlighter": "^13.5.2",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
+    "typescript": "4.6.2",
+    "typescript-plugin-css-modules": "^3.4.0"
  }
 }
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@ -7,17 +7,8 @@ import useSharedState from '@lib/hooks/use-shared-state';
 import 'react-loading-skeleton/dist/skeleton.css'
 import { SkeletonTheme } from 'react-loading-skeleton';
 import Head from 'next/head';
-
-export type ThemeProps = {
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
-
-export type PostProps = {
-  renderedPost: any | null, // Still don't have an official data type for posts
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
+import { ThemeProps } from '@lib/types';
+import Cookies from 'js-cookie';

 type AppProps<P = any> = {
  pageProps: P;
@ -26,11 +17,10 @@ type AppProps<P = any> = {
 export type DriftProps = ThemeProps

 function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
-  const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
-  const theme = useTheme();
+  const [themeType, setThemeType] = useSharedState<string>('theme', Cookies.get('drift-theme') || 'light')
+
  useEffect(() => {
-    if (typeof window === 'undefined' || !window.localStorage) return
-    const storedTheme = window.localStorage.getItem('drift-theme')
+    const storedTheme = Cookies.get('drift-theme')
    if (storedTheme) setThemeType(storedTheme)
    // TODO: useReducer?
  }, [setThemeType, themeType])
--- a/client/pages/_middleware.tsx
+++ b/client/pages/_middleware.tsx
@ -2,7 +2,7 @@ import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'

 const PUBLIC_FILE = /.(.*)$/

-export function middleware(req: NextRequest, ev: NextFetchEvent) {
+export function middleware(req: NextRequest) {
    const pathname = req.nextUrl.pathname
    const signedIn = req.cookies['drift-token']
    const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
--- a/client/pages/api/raw/[id].ts
+++ b/client/pages/api/raw/[id].ts
@ -2,13 +2,22 @@ import { NextApiRequest, NextApiResponse } from "next"

 const getRawFile = async (req: NextApiRequest, res: NextApiResponse) => {
    const { id, download } = req.query
-    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`)
+    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
+        headers: {
+            'Accept': 'text/plain',
+            'x-secret-key': process.env.SECRET_KEY || '',
+            'Authorization': `Bearer ${req.cookies['drift-token']}`,
+        }
+    })
+
+    res.setHeader("Content-Type", "text/plain")
+    res.setHeader('Cache-Control', 's-maxage=86400');
+
    if (file.ok) {
        const data = await file.json()
        const { title, content } = data
        // serve the file raw as plain text
-        res.setHeader("Content-Type", "text/plain")
-        res.setHeader('Cache-Control', 's-maxage=86400');
+
        if (download) {
            res.setHeader("Content-Disposition", `attachment; filename="${title}"`)
        } else {
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@ -2,11 +2,11 @@ import styles from '@styles/Home.module.css'
 import { Page, Spacer, Text } from '@geist-ui/core'

 import Header from '@components/header'
-import { ThemeProps } from './_app'
 import Document from '@components/document'
 import Image from 'next/image'
 import ShiftBy from '@components/shift-by'
 import PageSeo from '@components/page-seo'
+import { ThemeProps } from '@lib/types'

 export function getStaticProps() {
  const introDoc = process.env.WELCOME_CONTENT
--- a/client/pages/mine.tsx
+++ b/client/pages/mine.tsx
@ -3,18 +3,58 @@ import { Page } from '@geist-ui/core'

 import Header from '@components/header'
 import MyPosts from '@components/my-posts'
+import cookie from "cookie";
+import { GetServerSideProps } from 'next';
+import { ThemeProps } from '@lib/types';

-const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
+const Home = ({ posts, error, theme, changeTheme }: ThemeProps & { posts: any; error: any; }) => {
  return (
    <Page className={styles.container} width="100%">
      <Page.Header>
        <Header theme={theme} changeTheme={changeTheme} />
      </Page.Header>
      <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
-        <MyPosts />
+        <MyPosts error={error} posts={posts} />
      </Page.Content>
    </Page >
  )
 }
+// get server side props 
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+  const driftToken = cookie.parse(req.headers.cookie || '')[`drift-token`]
+  if (!driftToken) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      }
+    }
+  }
+
+  const posts = await fetch(process.env.API_URL + `/posts/mine`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${driftToken}`,
+      "x-secret-key": process.env.SECRET_KEY || ''
+    }
+  })
+
+  if (!posts.ok || posts.status !== 200) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      }
+    }
+  }
+
+  return {
+    props: {
+      posts: await posts.json(),
+      error: posts.status !== 200,
+    }
+  }
+}

 export default Home
--- a/client/pages/new.tsx
+++ b/client/pages/new.tsx
@ -3,12 +3,10 @@ import NewPost from '@components/new-post'
 import { Page } from '@geist-ui/core'
 import useSignedIn from '@lib/hooks/use-signed-in'
 import Header from '@components/header'
-import { ThemeProps } from './_app'
-import { useRouter } from 'next/router'
 import PageSeo from '@components/page-seo'
+import { ThemeProps } from '@lib/types'

 const New = ({ theme, changeTheme }: ThemeProps) => {
-  const router = useRouter()
  const isSignedIn = useSignedIn()

  return (
--- a/client/pages/post/[id].tsx
+++ b/client/pages/post/[id].tsx
@ -1,45 +1,32 @@
 import { Button, Page, Text } from "@geist-ui/core";
-import Skeleton from 'react-loading-skeleton';

-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import Document from '../../components/document'
-import Header from "../../components/header";
-import VisibilityBadge from "../../components/visibility-badge";
-import { PostProps } from "../_app";
+import Document from '@components/document'
+import Header from "@components/header";
+import VisibilityBadge from "@components/visibility-badge";
 import PageSeo from "components/page-seo";
 import styles from './styles.module.css';
-import Cookies from "js-cookie";
-import cookie from "cookie";
-import { GetServerSideProps } from "next";
+import type { GetStaticPaths, GetStaticProps } from "next";
+import { PostVisibility, ThemeProps } from "@lib/types";

+type File = {
+    id: string
+    title: string
+    content: string
+}

-const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
-    const [post, setPost] = useState(renderedPost);
-    const [isLoading, setIsLoading] = useState(true)
-    const [error, setError] = useState<string>()
-    const router = useRouter();
+type Files = File[]

-    useEffect(() => {
-        async function fetchPost() {
-            setIsLoading(true);
-
-            if (renderedPost) {
-                setPost(renderedPost)
-                setIsLoading(false)
-                
-                return;
-            }
-
-            if (!Cookies.get('drift-token')) {
-                router.push('/signin');
-            } else {
-                setError('Something went wrong fetching the post');
-            }
-        }
-        fetchPost()
-    }, [router, router.query.id])
+export type PostProps = ThemeProps & {
+    post: {
+        id: string
+        title: string
+        description: string
+        visibility: PostVisibility
+        files: Files
+    }
+}

+const Post = ({ post, theme, changeTheme }: PostProps) => {
    const download = async () => {
        const clientZip = require("client-zip")

@ -59,80 +46,74 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {

    return (
        <Page width={"100%"}>
-            {!isLoading && (
-                <PageSeo
-                    title={`${post.title} - Drift`}
-                    description={post.description}
-                    isPrivate={post.visibility === 'private'}
-                />
-            )}
+            <PageSeo
+                title={`${post.title} - Drift`}
+                description={post.description}
+                isPrivate={false}
+            />

            <Page.Header>
                <Header theme={theme} changeTheme={changeTheme} />
            </Page.Header>
            <Page.Content width={"var(--main-content-width)"} margin="auto">
                {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
-
-                {error && <Text type="error">{error}</Text>}
-                {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
-                    <Document skeleton={true} />
-                </>}
-                {!isLoading && post && <>
-                    <div className={styles.header}>
-                        <div className={styles.titleAndBadge}>
-                            <Text h2>{post.title}</Text>
-                            <span><VisibilityBadge visibility={post.visibility} /></span>
-                        </div>
-                        <Button auto onClick={download}>
-                            Download as ZIP archive
-                        </Button>
+                <div className={styles.header}>
+                    <div className={styles.titleAndBadge}>
+                        <Text h2>{post.title}</Text>
+                        <span><VisibilityBadge visibility={post.visibility} /></span>
                    </div>
-                    {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
-                        <Document
-                            key={id}
-                            id={id}
-                            content={content}
-                            title={title}
-                            editable={false}
-                            initialTab={'preview'}
-                        />
-                    ))}
-                </>}
+                    <Button auto onClick={download}>
+                        Download as ZIP archive
+                    </Button>
+                </div>
+                {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
+                    <Document
+                        key={id}
+                        id={id}
+                        content={content}
+                        title={title}
+                        editable={false}
+                        initialTab={'preview'}
+                    />
+                ))}
            </Page.Content>
        </Page >
    )
 }

-export const getServerSideProps: GetServerSideProps = async (context) => {
-
-    const headers = context.req.headers;
-    const host = headers.host;
-    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`];
-    
-    let post;
-    
-    if (context.query.id) {
-        post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${driftToken}`
-            }
-        });
-
-        try {
-            post = await post.json();
-        } catch (e) {
-            console.log(e);
-            post = null;
+export const getStaticPaths: GetStaticPaths = async () => {
+    const posts = await fetch(process.env.API_URL + `/posts/`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            "x-secret-key": process.env.SECRET_KEY || "",
        }
-    }
+    })
+
+    const json = await posts.json()
+    const filtered = json.filter((post: any) => post.visibility === "public" || post.visibility === "unlisted")
+    const paths = filtered.map((post: any) => ({
+        params: { id: post.id }
+    }))
+
+    return { paths, fallback: 'blocking' }
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+    const post = await fetch(process.env.API_URL + `/posts/${params?.id}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            "x-secret-key": process.env.SECRET_KEY || "",
+        }
+    })

    return {
        props: {
-            renderedPost: post
-        }
+            post: await post.json()
+        },
    }
 }

 export default Post
+
--- a/client/pages/post/private/[id].tsx
+++ b/client/pages/post/private/[id].tsx
@ -0,0 +1,129 @@
+import { Button, Page, Text } from "@geist-ui/core";
+
+import Document from '@components/document'
+import Header from "@components/header";
+import VisibilityBadge from "@components/visibility-badge";
+import PageSeo from "components/page-seo";
+import styles from '../styles.module.css';
+import cookie from "cookie";
+import type { GetServerSideProps } from "next";
+import { PostVisibility, ThemeProps } from "@lib/types";
+
+type File = {
+    id: string
+    title: string
+    content: string
+}
+
+type Files = File[]
+
+export type PostProps = ThemeProps & {
+    post: {
+        id: string
+        title: string
+        description: string
+        visibility: PostVisibility
+        files: Files
+    }
+}
+
+const Post = ({ post, theme, changeTheme }: PostProps) => {
+    const download = async () => {
+        const clientZip = require("client-zip")
+
+        const blob = await clientZip.downloadZip(post.files.map((file: any) => {
+            return {
+                name: file.title,
+                input: file.content,
+                lastModified: new Date(file.updatedAt)
+            }
+        })).blob()
+        const link = document.createElement("a")
+        link.href = URL.createObjectURL(blob)
+        link.download = `${post.title}.zip`
+        link.click()
+        link.remove()
+    }
+
+    return (
+        <Page width={"100%"}>
+            <PageSeo
+                title={`${post.title} - Drift`}
+                description={post.description}
+                isPrivate={true}
+            />
+
+            <Page.Header>
+                <Header theme={theme} changeTheme={changeTheme} />
+            </Page.Header>
+            <Page.Content width={"var(--main-content-width)"} margin="auto">
+                {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
+                <div className={styles.header}>
+                    <div className={styles.titleAndBadge}>
+                        <Text h2>{post.title}</Text>
+                        <span><VisibilityBadge visibility={post.visibility} /></span>
+                    </div>
+                    <Button auto onClick={download}>
+                        Download as ZIP archive
+                    </Button>
+                </div>
+                {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
+                    <Document
+                        key={id}
+                        id={id}
+                        content={content}
+                        title={title}
+                        editable={false}
+                        initialTab={'preview'}
+                    />
+                ))}
+            </Page.Content>
+        </Page >
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    const headers = context.req.headers
+    const host = headers.host
+    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`]
+
+    if (context.query.id) {
+        const post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${driftToken}`,
+                "x-secret-key": process.env.SECRET_KEY || "",
+            }
+        })
+
+        if (!post.ok || post.status !== 200) {
+            return {
+                redirect: {
+                    destination: '/',
+                    permanent: false,
+                },
+            }
+        }
+        try {
+            const json = await post.json();
+
+            return {
+                props: {
+                    post: json
+                }
+            }
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
+    return {
+        props: {
+            post: null
+        }
+    }
+}
+
+export default Post
+
--- a/client/pages/signin.tsx
+++ b/client/pages/signin.tsx
@ -2,7 +2,7 @@ import { Page } from "@geist-ui/core";
 import PageSeo from "@components/page-seo";
 import Auth from "@components/auth";
 import Header from "@components/header";
-import { ThemeProps } from "./_app";
+import { ThemeProps } from "@lib/types";

 const SignIn = ({ theme, changeTheme }: ThemeProps) => (
    <Page width={"100%"}>
--- a/client/pages/signup.tsx
+++ b/client/pages/signup.tsx
@ -2,7 +2,7 @@ import { Page } from "@geist-ui/core";
 import Auth from "@components/auth";
 import Header from "@components/header";
 import PageSeo from '@components/page-seo';
-import { ThemeProps } from "./_app";
+import { ThemeProps } from "@lib/types";

 const SignUp = ({ theme, changeTheme }: ThemeProps) => (
    <Page width="100%">
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@ -1,15 +1,26 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
--- a/client/yarn.lock
+++ b/client/yarn.lock
--- a/server/src/lib/config.ts
+++ b/server/src/lib/config.ts
--- a/server/src/lib/middleware/jwt.ts
+++ b/server/src/lib/middleware/jwt.ts
--- a/server/src/lib/middleware/secret-key.ts
+++ b/server/src/lib/middleware/secret-key.ts
@ -0,0 +1,14 @@
+import { NextFunction, Request, Response } from 'express';
+
+const key = process.env.SECRET_KEY;
+if (!key) {
+    throw new Error('SECRET_KEY is not set.');
+}
+
+export default function authenticateToken(req: Request, res: Response, next: NextFunction) {
+    const requestKey = req.headers['x-secret-key']
+    if (requestKey !== key) {
+        return res.sendStatus(401)
+    }
+    next()
+}
--- a/server/src/lib/models/File.ts
+++ b/server/src/lib/models/File.ts
--- a/server/src/lib/models/Post.ts
+++ b/server/src/lib/models/Post.ts
@ -38,7 +38,7 @@ export class Post extends Model {
  @BelongsToMany(() => User, () => PostAuthor)
  users?: User[];

-  @HasMany(() => File)
+  @HasMany(() => File, { constraints: false })
  files?: File[];

  @CreatedAt
@ -48,6 +48,9 @@ export class Post extends Model {
  @Column
  visibility!: string;

+  @Column
+  password?: string;
+
  @UpdatedAt
  @Column
  updatedAt!: Date;
--- a/server/src/lib/models/PostAuthor.ts
+++ b/server/src/lib/models/PostAuthor.ts
--- a/server/src/lib/models/User.ts
+++ b/server/src/lib/models/User.ts
--- a/server/src/lib/sequelize.ts
+++ b/server/src/lib/sequelize.ts
--- a/server/src/routes/auth.ts
+++ b/server/src/routes/auth.ts
@ -1,9 +1,9 @@
 import { Router } from 'express'
 import { genSalt, hash, compare } from "bcrypt"
-import { User } from '../../lib/models/User'
+import { User } from '../lib/models/User'
 import { sign } from 'jsonwebtoken'
-import config from '../../lib/config'
-import jwt from '../../lib/middleware/jwt'
+import config from '../lib/config'
+import jwt from '../lib/middleware/jwt'

 const NO_EMPTY_SPACE_REGEX = /^\S*$/

--- a/server/src/routes/files.ts
+++ b/server/src/routes/files.ts
@ -1,10 +1,10 @@
 import { Router } from 'express'
-// import { Movie } from '../models/Post'
-import { File } from '../../lib/models/File'
+import secretKey from '../lib/middleware/secret-key';
+import { File } from '../lib/models/File'

 export const files = Router()

-files.get("/raw/:id", async (req, res, next) => {
+files.get("/raw/:id", secretKey, async (req, res, next) => {
    try {
        const file = await File.findOne({
            where: {
@ -12,18 +12,18 @@ files.get("/raw/:id", async (req, res, next) => {
            },
            attributes: ["title", "content"],
        })
-        // TODO: fix post inclusion
-        // if (file?.post.visibility === 'public' || file?.post.visibility === 'unlisted') {
-        res.setHeader("Cache-Control", "public, max-age=86400");
-        res.json(file);
-        // } else {
-        // TODO: should this be `private, `?
-        // res.setHeader("Cache-Control", "max-age=86400");
-        // res.json(file);
-        // }
+
+        // TODO: JWT-checkraw files
+        if (file?.post?.visibility === "private") {
+            // jwt(req as UserJwtRequest, res, () => {
+            //     res.json(file);
+            // })
+            res.json(file);
+        } else {
+            res.json(file);
+        }
    }
    catch (e) {
        next(e);
    }
 });
-
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@ -1,10 +1,11 @@
 import { Router } from 'express'
 // import { Movie } from '../models/Post'
-import { File } from '../../lib/models/File'
-import { Post } from '../../lib/models/Post';
-import jwt, { UserJwtRequest } from '../../lib/middleware/jwt';
+import { File } from '../lib/models/File'
+import { Post } from '../lib/models/Post';
+import jwt, { UserJwtRequest } from '../lib/middleware/jwt';
 import * as crypto from "crypto";
-import { User } from '../../lib/models/User';
+import { User } from '../lib/models/User';
+import secretKey from '../lib/middleware/secret-key';

 export const posts = Router()

@ -26,7 +27,6 @@ posts.post('/create', jwt, async (req, res, next) => {
            throw new Error("Please provide a visibility.")
        }

-        // Create the "post" object 
        const newPost = new Post({
            title: req.body.title,
            visibility: req.body.visibility,
@ -35,7 +35,6 @@ posts.post('/create', jwt, async (req, res, next) => {
        await newPost.save()
        await newPost.$add('users', req.body.userId);
        const newFiles = await Promise.all(req.body.files.map(async (file) => {
-            // Establish a "file" for each file in the request
            const newFile = new File({
                title: file.title,
                content: file.content,
@ -59,7 +58,47 @@ posts.post('/create', jwt, async (req, res, next) => {
    }
 });

-posts.get("/:id", async (req: UserJwtRequest, res, next) => {
+posts.get("/", secretKey, async (req, res, next) => {
+    try {
+        const posts = await Post.findAll({
+            attributes: ["id", "title", "visibility", "createdAt"],
+        })
+        res.json(posts);
+    } catch (e) {
+        next(e);
+    }
+});
+
+posts.get("/mine", jwt, secretKey, async (req: UserJwtRequest, res, next) => {
+    if (!req.user) {
+        return res.status(401).json({ error: "Unauthorized" })
+    }
+
+    try {
+        const user = await User.findByPk(req.user.id, {
+            include: [
+                {
+                    model: Post,
+                    as: "posts",
+                    include: [
+                        {
+                            model: File,
+                            as: "files"
+                        }
+                    ]
+                },
+            ],
+        })
+        if (!user) {
+            return res.status(404).json({ error: "User not found" })
+        }
+        return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
+    } catch (error) {
+        next(error)
+    }
+})
+
+posts.get("/:id", secretKey, async (req, res, next) => {
    try {
        const post = await Post.findOne({
            where: {
@ -78,20 +117,21 @@ posts.get("/:id", async (req: UserJwtRequest, res, next) => {
                },
            ]
        })
+        if (!post) {
+            throw new Error("Post not found.")
+        }

-        if (post?.visibility === 'public' || post?.visibility === 'unlisted') {
-            res.setHeader("Cache-Control", "public, max-age=86400");
+        if (post.visibility === 'public' || post?.visibility === 'unlisted') {
            res.json(post);
-        } else {
-            // TODO: should this be `private, `?
-            res.setHeader("Cache-Control", "max-age=86400");
-            jwt(req, res, () => {
+        } else if (post.visibility === 'private') {
+            jwt(req as UserJwtRequest, res, () => {
                res.json(post);
-            });
+            })
+        } else if (post.visibility === 'protected') {
+
        }
    }
    catch (e) {
        next(e);
    }
 });
-
--- a/server/src/routes/users.ts
+++ b/server/src/routes/users.ts
@ -1,9 +1,7 @@
 import { Router } from 'express'
 // import { Movie } from '../models/Post'
-import { User } from '../../lib/models/User'
-import { File } from '../../lib/models/File'
-import jwt, { UserJwtRequest } from '../../lib/middleware/jwt'
-import { Post } from '../../lib/models/Post'
+import { User } from '../lib/models/User'
+import jwt from '../lib/middleware/jwt'

 export const users = Router()

@ -16,31 +14,3 @@ users.get('/', jwt, async (req, res, next) => {
    }
 })

-users.get("/mine", jwt, async (req: UserJwtRequest, res, next) => {
-    if (!req.user) {
-        return res.status(401).json({ error: "Unauthorized" })
-    }
-
-    try {
-        const user = await User.findByPk(req.user.id, {
-            include: [
-                {
-                    model: Post,
-                    as: "posts",
-                    include: [
-                        {
-                            model: File,
-                            as: "files"
-                        }
-                    ]
-                },
-            ],
-        })
-        if (!user) {
-            return res.status(404).json({ error: "User not found" })
-        }
-        return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
-    } catch (error) {
-        next(error)
-    }
-})
--- a/server/src/server.ts
+++ b/server/src/server.ts
@ -1,7 +1,7 @@
 import { createServer } from 'http';
 import { app } from './app';
-import config from '../lib/config';
-import { sequelize } from '../lib/sequelize';
+import config from './lib/config';
+import { sequelize } from './lib/sequelize';

 (async () => {
  await sequelize.sync();
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -15,6 +15,6 @@
    "strictPropertyInitialization": true,
    "outDir": "dist"
  },
-  "include": ["lib/**/*.ts", "index.ts", "src/**/*.ts"],
+  "include": ["index.ts", "src/**/*.ts"],
  "exclude": ["node_modules"]
 }