serveless with next/react

serverlessComReactAndNext/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

serverlessComReactAndNext/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

serverlessComReactAndNext/README.md

@@ -0,0 +1,41 @@
+<br>
+<div align="center">
+  <img width="300" alt="NextJS-ChakraUI" src="./.github/assets/Nextjs-ChakraUI.png" />
+
+  <h4 align="center">
+     Next.js, declarative UI and design systems applied to ReactJS. Access the tutorial <a href="https://www.youtube.com/watch?v=6TEo2AxW-oQ">here</a>
+  </h4>
+</div>
+
+---
+
+<p align="center">
+  <img alt="GitHub Contributors" src="https://img.shields.io/github/contributors/eugustavo/youtube-nextjs-design-system" />
+  <img alt="Github License" src="https://img.shields.io/github/license/eugustavo/youtube-nextjs-design-system" />
+</p>
+
+<p align="center">
+  <img alt="Rocketseat" src="./.github/assets/login-rocketseat.png">
+</p>
+
+
+## 🚀 Getting started
+
+To clone and run the application, you will need to have [Git](https://git-scm.com), [Node.js](https://nodejs.org) + [Yarn](https://yarnpkg.com) installed on your machine. With all programs installed, run the following command lines:
+
+
+```bash
+# Clone this repository
+$ git clone https://github.com/rocketseat-content/youtube-nextjs-design-system
+
+# Access the repository
+$ cd youtube-nextjs-design-system
+
+# Install the dependencies
+$ yarn install
+
+# Run application
+$ yarn dev
+```
+
+

serverlessComReactAndNext/components/Divider.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Divider as ChakraDivider, Grid } from '@chakra-ui/core'
+
+// import { Container } from './styles';
+
+const Divider: React.FC = () => {
+  return (
+    <Grid
+      gridTemplateColumns="1fr 1fr"
+      columnGap={12}
+      opacity={0.4}
+    >
+      <ChakraDivider marginY={6} />
+      <ChakraDivider marginY={6} />
+    </Grid>
+  );
+}
+
+export default Divider;

serverlessComReactAndNext/components/Input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Input as ChakraInput, InputProps as ChakraInputProps } from '@chakra-ui/core'
+
+const Input: React.FC<ChakraInputProps> = (props) => {
+  return (
+    <ChakraInput
+      height="50px"
+      backgroundColor="gray.800"
+      focusBorderColor="purple.500"
+      borderRadius="sm"
+      {...props}
+    />
+  )
+}
+
+export default Input;

serverlessComReactAndNext/config/emotion.ts

@@ -0,0 +1,5 @@
+import styled, { CreateStyled } from '@emotion/styled';
+
+import theme from '../styles/theme';
+
+export default styled as CreateStyled<typeof theme>;

serverlessComReactAndNext/contexts/theme/ThemeContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { 
+  ThemeProvider as ChakraThemeProvider, 
+  ColorModeProvider,
+  CSSReset
+} from '@chakra-ui/core';
+
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
+
+import theme from '../../styles/theme';
+
+const ThemeContainer: React.FC = ({ children }) => {
+  return (
+    <ChakraThemeProvider theme={theme}>
+      <ColorModeProvider value="dark">
+        <EmotionThemeProvider theme={theme}>
+          <CSSReset />
+          {children}
+        </EmotionThemeProvider>
+      </ColorModeProvider>
+    </ChakraThemeProvider>
+  );
+}
+
+export default ThemeContainer;

serverlessComReactAndNext/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

serverlessComReactAndNext/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "skylabnext",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^0.8.0",
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
+    "@vercel/node": "^1.9.0",
+    "axios": "^0.21.1",
+    "emotion-theming": "^10.0.27",
+    "mongodb": "^3.6.4",
+    "next": "9.5.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.46",
+    "typescript": "^3.9.7"
+  }
+}

serverlessComReactAndNext/pages/_app.tsx

@@ -0,0 +1,11 @@
+import ThemeContainer from "../contexts/theme/ThemeContainer"
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeContainer>
+      <Component {...pageProps} />
+    </ThemeContainer>
+  )
+}
+
+export default MyApp

serverlessComReactAndNext/pages/_document.tsx

@@ -0,0 +1,19 @@
+import Document, { DocumentProps, Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document<DocumentProps> {
+  render(): JSX.Element {
+    return (
+      <Html>
+        <Head>
+          <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap" rel="stylesheet" />  
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

serverlessComReactAndNext/pages/api/subscribe.ts

@@ -0,0 +1,39 @@
+import { NowRequest, NowResponse } from '@vercel/node';
+import { MongoClient, Db } from 'mongodb';
+import url from 'url';
+
+let cachedDb: Db = null;
+
+async function connectToDatabase(uri: string) {
+  if (cachedDb) {
+    return cachedDb;
+  }
+
+  const client = await MongoClient.connect(uri, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  });
+
+  const dbName = url.parse(uri).pathname.substr(1);
+
+  const db = client.db(dbName);
+
+  cachedDb = db;
+
+  return db;
+}
+
+export default async (request: NowRequest, response: NowResponse) => {
+  const { email } = request.body;
+
+  const db = await connectToDatabase(process.env.MONGODB_URI);
+
+  const collection = db.collection('subscribers');
+
+  await collection.insertOne({
+    email,
+    subscribedAt: new Date(),
+  });
+
+  return response.status(201).json({ ok: true });
+};

serverlessComReactAndNext/pages/index.tsx

@@ -0,0 +1,60 @@
+import { Flex, Button, Text, Image } from '@chakra-ui/core';
+import { FormEvent, useState } from 'react';
+import Input from '../components/Input';
+import axios from 'axios';
+
+export default function Home() {
+  const [email, setEmail] = useState('');
+
+  function handleSignUpToNewsletter(event: FormEvent) {
+    event.preventDefault();
+    axios.post('/api/subscribe', { email });
+  }
+
+  return (
+    <Flex as="main" height="100vh" justifyContent="center" alignItems="center">
+      <Flex
+        as="form"
+        onSubmit={handleSignUpToNewsletter}
+        backgroundColor="gray.700"
+        borderRadius="md"
+        flexDir="column"
+        alignItems="stretch"
+        padding={8}
+        marginTop={4}
+        width="100%"
+        maxW="400px"
+      >
+        <Image marginBottom={8} src="/rocketseat.svg" alt="Rocketseat" />
+
+        <Text
+          textAlign="center"
+          fontSize="sm"
+          color="gray.400"
+          marginBottom={2}
+        >
+          Assine a newsletter da Rocketseat e receba os melhores conteúdos sobre
+          programação!
+        </Text>
+
+        <Input
+          placeholder="Seu melhor e-mail"
+          marginTop={2}
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+
+        <Button
+          type="submit"
+          backgroundColor="purple.500"
+          height="50px"
+          borderRadius="sm"
+          marginTop={6}
+          _hover={{ backgroundColor: 'purple.600' }}
+        >
+          INSCREVER
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}

serverlessComReactAndNext/prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  arrowParens: 'avoid',
+  endOfLine: 'auto',
+};

serverlessComReactAndNext/styles/theme.ts

@@ -0,0 +1,37 @@
+import { theme, DefaultTheme } from '@chakra-ui/core'
+
+const customTheme: DefaultTheme = {
+  ...theme,
+  fonts: {
+    body: 'Roboto, system-ui, sans-serif',
+    heading: 'Roboto, system-ui, sans-serif',
+    mono: 'Menlo, monospace'
+  },
+  fontWeights: {
+    ...theme.fontWeights,
+    normal: 400,
+    medium: 600,
+    bold: 700,
+  },
+  radii: {
+    ...theme.radii,
+    sm: '5px',
+    md: '8px',
+  },
+  colors: {
+    ...theme.colors,
+    purple: {
+      ...theme.colors.purple,
+      500: '#8257e5',
+    },
+    gray: {
+      ...theme.colors.gray,
+      300: '#e1e1e6',
+      600: '#29292e',
+      700: '#202024',
+      800: '#121214'
+    },
+  },
+}
+
+export default customTheme;