feat: simplifies on-boarding process

backend/.env.example

@@ -0,0 +1,6 @@
+HASURA_GRAPHQL_ADMIN_SECRET=secret
+PORT=8080
+DATABASE_URL=postgresql://user:password@db:5432/database
+POSTGRES_USER=user
+POSTGRES_PASSWORD=password
+POSTGRES_DB=database

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM hasura/graphql-engine:v1.3.1.cli-migrations-v2
+FROM hasura/graphql-engine:v1.3.3.cli-migrations-v2
 
 # # Copy migrations directory
 COPY ./migrations /hasura-migrations

backend/docker-compose.yml

@@ -8,23 +8,18 @@ services:
       context: .
     depends_on:
       - db
-    environment:
-      DATABASE_URL: postgres://postgres:@db:5432/postgres
-      HASURA_GRAPHQL_JWT_SECRET: '{"type":"RS256", "key": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0U3NR0eyMehHBlx6DK5s\nJ+Pys9dTWf558kpKVeQvL2oIZEY3LvS3/jdrIm/dU4WrIGPki1r/AWXQAyBZ2FKn\nZROcUWN0IqdmxrC5zTDymuscqhKXqxjSwrwOVWHc+zWWmXCQGmDdoCokXd9ZW66n\nA0BN66MdMC2+d5GrZdKUF305dpzTUdzDE12/XwOEUalCM0703eGu8zFwutLYc3+v\nf2CFOQ1z+rvDQD4N2aZABKTxZRtEkMHljnoyKlF9rljNzT/5N8YQE7qn4pBh6CMa\n1zcSilk9nhgl55n/Kjn2xMieWdIalaOEKw1LqqIjiT1ESkAKfPaIoSSnmTaYy78g\nbwIDAQAB\n-----END PUBLIC KEY-----\n"}'
-      HASURA_GRAPHQL_ADMIN_SECRET: secret
-      PORT: 8080
+    env_file: ./.env
     ports:
       - "8080:8080"
-    restart: on-failure
 
   db:
     container_name: nextjs-hasura-boilerplate-db
-    image: postgres:11.3-alpine
+    image: postgres:latest
     ports:
       - "5432:5432"
     volumes:
       - db_data:/var/lib/postgresql/data
-    restart: unless-stopped
+    env_file: ./.env
 
 volumes:
   db_data:

frontend/.env.example

@@ -1,7 +1,6 @@
 NEXT_PUBLIC_API_URL=http://localhost:8080/v1/graphql
 NEXT_PUBLIC_WS_URL=ws://localhost:8080/v1/graphql
-DATABASE_URL=postgres://postgres:@localhost:5432/postgres
-AUTH_PRIVATE_KEY='{"type":"RS256", "key": "-----BEGIN RSA PRIVATE KEY-----\nMIIEowIBAAKCAQEA0U3NR0eyMehHBlx6DK5sJ+Pys9dTWf558kpKVeQvL2oIZEY3\nLvS3/jdrIm/dU4WrIGPki1r/AWXQAyBZ2FKnZROcUWN0IqdmxrC5zTDymuscqhKX\nqxjSwrwOVWHc+zWWmXCQGmDdoCokXd9ZW66nA0BN66MdMC2+d5GrZdKUF305dpzT\nUdzDE12/XwOEUalCM0703eGu8zFwutLYc3+vf2CFOQ1z+rvDQD4N2aZABKTxZRtE\nkMHljnoyKlF9rljNzT/5N8YQE7qn4pBh6CMa1zcSilk9nhgl55n/Kjn2xMieWdIa\nlaOEKw1LqqIjiT1ESkAKfPaIoSSnmTaYy78gbwIDAQABAoIBAF+3t+AYLqraMdj7\n46j2/2lCupR6LZkjYntmdBZRky6YzBunbMchjR9KEsmd5Na0c20NodAFHkdyWy2C\n1vOx4PG9hShHVi4e5kaJPX9UGi60xNgWRpwtbv01aUysw5VyjVvAeXZGxDPh8d2o\nLcJa3fADsV7IqqmE0ez2hi67nZQbkbEUbKs7aGfCE6srCfjCfOadfNnto9+7qDjJ\nnd4rK18H1rBSLTqj4T7wd1K8THgo25vjEuVRbGsEVrNB/B1Dz0pdOqhqukzixfcS\nVL/7uYDXehLasmUQu2VtMFsLqDpAbQgvpoNnzeZuB0WARvygSi/n4t+pCi84hXXe\na1m/01kCgYEA6+i5FwJAPxe2oCc0iignHjA20itTalyUhgJrLa8tTs721GJ3ku0A\n/EJVgmoNOLCQnZMldWvEDGmf6QuaWitq8ZWK/0BmHrEjbDA7m1fPdf3hrNx6eH/i\nazxjAoWA/u0yZg6QvUC7hSOO6WEpFYGuc2+/mHlnm5RLdL3QNIlHyyUCgYEA4yEI\n2deZ9MgmxbnFc76u7VhT1lc1MHpuAcDR3hqKT9xH2fTBaTDpVqeFbQJR5Hu+ZqgT\nL3+zV5kzIz3RaNMGN1IaxDEEx+tDnL9aw8sqawauWZtp7W2EeFvtP8uhHiBWpqVl\nvus6Gpl6hpNg6X96vHRcW+mB13I/h5YWA25EEwMCgYA5YbkrvJNuBVGZsQ+Zj1y8\nfhPHmVxH4c8KranuSc7mfXcSgAT/ywBTW7s65prisCfs/C6/WgAs2MBZykW4Kxlv\nO+W8Yqi0THgGR9En3vsKgz+ScWqkxs6HMQAQS/LtjzqUEnToY8d5AgYwBD8fCRUq\n5QKgjt9Bu5eDBOyQ6td4tQKBgBtDrOdRfTaoDBdyHGSvgBoXn0C8iTL/j1MAjXDG\n6NF7VNiyC8GP0ILJazfRrnjp7cou5Nav0pxyVHQniIq3wihD39irNbK16BDZ25Bj\nQ/1C+Qzing2VNvCnwEwHKpkOMrigZB1N6VSmFdIvwNNmrRoQMcIKvr5ZBY1GE/Bn\nfR53AoGBAIXaWIoDW5d9XwFa8HdxkgMPyLlizckZKyXASYEGWD2VU8P1NwA/bZ1t\nymioQPRJymTBfUL6E44Ebwx25DezjYEun1yqouZ+WZBlsEYtssffzTs2IocZ6aCN\nYfzt3orUEI/rWbRSqYFEuOntzzf3a7r3MtDU41e7iXcNkRSxCAIV\n-----END RSA PRIVATE KEY-----\n"}'
+DATABASE_URL=postgres://user:password@localhost:5432/database
 NEXTAUTH_URL=http://localhost:3000
 GOOGLE_CLIENT_ID=""
 GOOGLE_CLIENT_SECRET=""

frontend/components/access-denied-indicator/index.tsx

@@ -1,7 +1,8 @@
-import React, { FC } from "react";
-import { Icon, Flex, Button, Stack, Box } from "@chakra-ui/core";
-import Link from "next/link";
+import { WarningTwoIcon } from "@chakra-ui/icons";
+import { Box, Button, Flex, Stack } from "@chakra-ui/react";
 import { signIn } from "next-auth/client";
+import Link from "next/link";
+import React, { FC } from "react";
 
 interface IProps {
   message?: string;
@@ -11,7 +12,7 @@ const AccessDeniedIndicator: FC<IProps> = ({
   message = "You need to Sign In to view this content!",
 }) => {
   const iconNode = () => {
-    return <Icon name="warning-2" color="purple" size="50px" />;
+    return <WarningTwoIcon color="purple" size="50px" />;
   };
 
   const signInButtonNode = () => {

frontend/components/layout/index.tsx

@@ -1,16 +1,15 @@
-import React, { FC } from "react";
-import { ColorModeProvider, LightMode } from "@chakra-ui/core";
-import Container from "components/layout/container";
+import { Box, ChakraProvider, theme, VStack } from "@chakra-ui/react";
 import Navbar from "components/navbar";
+import React, { FC } from "react";
 
 const Layout: FC = ({ children }) => {
   return (
-    <ColorModeProvider>
-      <LightMode>
-        <Navbar />
-        <Container>{children}</Container>
-      </LightMode>
-    </ColorModeProvider>
+    <ChakraProvider theme={theme}>
+      <Navbar />
+      <Box maxW="xl" mx="auto" w="full" py={8}>
+        {children}
+      </Box>
+    </ChakraProvider>
   );
 };
 

frontend/components/loader/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Box, CircularProgress } from "@chakra-ui/core";
+import { Box, CircularProgress } from "@chakra-ui/react";
 
 interface Props {
   size?: string;

frontend/components/navbar/index.tsx

@@ -1,15 +1,16 @@
-import React from "react";
-import { NextComponentType } from "next";
-import Link from "next/link";
-import { signIn, signOut, useSession } from "next-auth/client";
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 import {
   Box,
-  Stack,
-  Link as _Link,
   Button,
   IconButton,
+  Link as _Link,
+  Stack,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
+import { NextComponentType } from "next";
+import { signIn, signOut, useSession } from "next-auth/client";
+import Link from "next/link";
+import React from "react";
 
 const Navbar: NextComponentType = () => {
   const [session] = useSession();
@@ -18,8 +19,6 @@ const Navbar: NextComponentType = () => {
   const color = { light: "gray.800", dark: "gray.100" };
 
   const handleToggleTheme = () => {
-    console.log("hello");
-
     toggleColorMode();
   };
 
@@ -91,7 +90,7 @@ const Navbar: NextComponentType = () => {
       <IconButton
         aria-label="Toggle theme"
         fontSize="20px"
-        icon={colorMode === "dark" ? "sun" : "moon"}
+        icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
         onClick={handleToggleTheme}
       />
     );

frontend/components/pages/error/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Box, Heading, Stack, Text, Button, Flex } from "@chakra-ui/core";
+import { Box, Heading, Stack, Text, Button, Flex } from "@chakra-ui/react";
 import Link from "next/link";
 
 interface IProps {

frontend/components/pages/feeds/add-new-feed-form.tsx

@@ -13,7 +13,7 @@ import {
   CloseButton,
   Textarea,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { useSession } from "next-auth/client";
 import AccessDeniedIndicator from "components/access-denied-indicator";
 

frontend/components/pages/feeds/feed.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Box, Stack, Text, Avatar, useColorMode } from "@chakra-ui/core";
+import { Box, Stack, Text, Avatar, useColorMode } from "@chakra-ui/react";
 import IFeed from "types/feed";
 import timeFromNow from "lib/time-from-now";
 

frontend/components/pages/feeds/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useSubscription } from "urql";
-import { Box, Stack } from "@chakra-ui/core";
+import { Box, Stack } from "@chakra-ui/react";
 import IFeed from "types/feed";
 import Feed from "components/pages/feeds/feed";
 import AddNewFeedForm from "components/pages/feeds/add-new-feed-form";

frontend/components/pages/index/index.tsx

@@ -7,7 +7,7 @@ import {
   Button,
   Flex,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { signIn, signOut, useSession } from "next-auth/client";
 import Link from "next/link";
 

frontend/components/pages/my-account/index.tsx

@@ -15,7 +15,7 @@ import {
   AlertIcon,
   AlertTitle,
   CloseButton,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import Loader from "components/loader";
 import { useSession } from "next-auth/client";
 
@@ -98,42 +98,39 @@ const MyAccountPageComponent = () => {
   };
 
   return (
-    <Stack spacing={4}>
+    <Stack spacing={8}>
       <Heading color={color[colorMode]}>My Account</Heading>
       {errorNode()}
-      <Grid templateColumns="repeat(1, 1fr)" gap={4}>
-        <Box
-          p={4}
-          bg={bgColor[colorMode]}
-          color={color[colorMode]}
-          shadow="sm"
-          rounded="lg"
-        >
-          <Stack spacing={4}>
-            <FormControl isRequired>
-              <FormLabel htmlFor="name">Name</FormLabel>
-              <Input
-                type="text"
-                id="name"
-                value={name}
-                onChange={(e: FormEvent<HTMLInputElement>) =>
-                  setName(e.currentTarget.value)
-                }
-                isDisabled={updateUserFetching}
-              />
-            </FormControl>
-            <FormControl>
-              <Button
-                loadingText="Saving..."
-                onClick={handleSubmit}
-                isLoading={updateUserFetching}
-              >
-                Save
-              </Button>
-            </FormControl>
-          </Stack>
-        </Box>
-      </Grid>
+      <Box
+        bg={bgColor[colorMode]}
+        color={color[colorMode]}
+        shadow="sm"
+        rounded="lg"
+      >
+        <Stack spacing={4}>
+          <FormControl isRequired>
+            <FormLabel htmlFor="name">Name</FormLabel>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e: FormEvent<HTMLInputElement>) =>
+                setName(e.currentTarget.value)
+              }
+              isDisabled={updateUserFetching}
+            />
+          </FormControl>
+          <FormControl>
+            <Button
+              loadingText="Saving..."
+              onClick={handleSubmit}
+              isLoading={updateUserFetching}
+            >
+              Save
+            </Button>
+          </FormControl>
+        </Stack>
+      </Box>
     </Stack>
   );
 };

frontend/package.json

@@ -12,11 +12,12 @@
     "type-check": "tsc"
   },
   "dependencies": {
-    "@chakra-ui/core": "^0.8.0",
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@chakra-ui/icons": "^1.0.3",
+    "@chakra-ui/react": "^1.1.4",
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "dayjs": "^1.10.3",
-    "emotion-theming": "^10.0.27",
+    "framer-motion": "^3.2.1",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
@@ -26,8 +27,8 @@
     "next-auth": "^3.1.0",
     "next-urql": "^2.1.1",
     "pg": "^8.5.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
     "subscriptions-transport-ws": "^0.9.18",
     "urql": "^1.11.5",

frontend/pages/_app.tsx

@@ -1,9 +1,8 @@
-import React from "react";
+import Layout from "components/layout";
+import { Provider as NextAuthProvider } from "next-auth/client";
 import { AppProps } from "next/app";
 import Head from "next/head";
-import { Provider as NextAuthProvider } from "next-auth/client";
-import { ThemeProvider, CSSReset, theme } from "@chakra-ui/core";
-import Layout from "components/layout";
+import React from "react";
 
 const App = ({ Component, pageProps }: AppProps) => {
   const { session } = pageProps;
@@ -14,12 +13,9 @@ const App = ({ Component, pageProps }: AppProps) => {
         <link rel="shortcut icon" href="/images/favicon.ico" />
       </Head>
       <NextAuthProvider session={session}>
-        <ThemeProvider theme={theme}>
-          <CSSReset />
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
-        </ThemeProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </NextAuthProvider>
     </>
   );