Feat/nextjs

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [
+        "emotion",
+        "inline-react-svg",
+        [
+            "styled-components",
+            { "ssr": true, "displayName": true, "preprocess": false }
+        ]
+    ]
+}

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.dockerignore

@@ -0,0 +1,12 @@
+.git
+.gitignore
+.cache
+*.md
+!README*.md
+/node_modules
+/.next
+/docs
+/.github
+.env
+.vscode
+CHANGELOG.md

.gitignore

@@ -1 +1,31 @@
-node_modules
+# 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
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.prettierignore

@@ -0,0 +1,2 @@
+/.next
+/.node_modules

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 80,
+  "arrowParens": "avoid"
+}

.storybook/config.js

@@ -0,0 +1,24 @@
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import themeDecorator from './themeDecorator';
+import { withKnobs } from '@storybook/addon-knobs';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const customViewports = {
+  smallScreen: {
+    name: 'Small Screen',
+    styles: {
+      width: '578px',
+      height: '100%',
+    },
+  },
+};
+
+addParameters({
+  viewport: {
+    viewports: { ...INITIAL_VIEWPORTS, ...customViewports },
+  },
+});
+addDecorator(themeDecorator);
+addDecorator(withKnobs);
+
+configure(require.context('../src/', true, /\.stories\.tsx?$/), module);

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  addons: [
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport/register',
+  ],
+};

client/.storybook/manager.js → .storybook/manager.js

@@ -2,6 +2,6 @@ import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({
-    theme: themes.dark,
-    panelPosition: 'right',
+  theme: themes.dark,
+  panelPosition: 'right',
 });

.storybook/themeDecorator.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled, { ThemeProvider, css } from 'styled-components';
+import { select, boolean } from '@storybook/addon-knobs';
+import { backgroundColor, cardColor } from '../src/styles/Themes';
+
+const StyledBackground = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 100px 0;
+  ${({ withBackground, cardBackground }) =>
+    withBackground &&
+    css`
+      background: ${cardBackground ? cardColor : backgroundColor};
+    `}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ThemeDecorator = storyFn => {
+  const background = boolean('No Background', false);
+  const cardBackground = boolean('Card Background', true);
+  return (
+    <ThemeProvider theme={{ mode: select('Theme', ['dark', 'light'], 'dark') }}>
+      <StyledBackground
+        withBackground={!background}
+        cardBackground={cardBackground}
+      >
+        {storyFn()}
+      </StyledBackground>
+    </ThemeProvider>
+  );
+};
+
+export default ThemeDecorator;

.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [require.resolve('babel-preset-react-app')],
+    },
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

@types/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.gif';

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:alpine
+
+# Create app directory
+# RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Install app dependencies
+COPY package.json /usr/src/app/
+COPY yarn.lock /usr/src/app/
+RUN yarn install --production=true
+
+# Bundle app source
+COPY . /usr/src/app
+RUN yarn build
+EXPOSE 3000
+CMD [ "yarn", "start" ]

README.md

@@ -1,7 +1,7 @@
 # **ThunderHub - Lightning Node Manager**
 
-![Home Screenshot](assets/Home.png)
-[![license](https://img.shields.io/github/license/DAVFoundation/captain-n3m0.svg?style=flat-square)](https://github.com/DAVFoundation/captain-n3m0/blob/master/LICENSE) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=client/package.json)](https://snyk.io/test/github/apotdevin/thunderhub) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=server/package.json)](https://snyk.io/test/github/apotdevin/thunderhub) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+![Home Screenshot](./docs/Home.png)
+[![license](https://img.shields.io/github/license/DAVFoundation/captain-n3m0.svg?style=flat-square)](https://github.com/DAVFoundation/captain-n3m0/blob/master/LICENSE)
 
 ## Table Of Contents
 
@@ -16,21 +16,13 @@ ThunderHub is an **open-source** LND node manager where you can manage and monit
 
 ### Tech Stack
 
-The repository consists of two packages (client and server) and is maintained with LernaJS and Yarn Workspaces.
-
-#### Client
-
-[![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=client/package.json)](https://snyk.io/test/github/apotdevin/thunderhub)
+This repository consists of a **NextJS** server that handles both the backend **Graphql Server** and the frontend **React App**.
 
+- NextJS
 - ReactJS
 - Typescript
 - Styled-Components
 - Apollo
-
-#### Server
-
-[![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=server/package.json)](https://snyk.io/test/github/apotdevin/thunderhub)
-
 - Apollo-Server
 - GraphQL
 - Ln-Service
@@ -99,47 +91,29 @@ git clone https://github.com/apotdevin/thunderhub.git
 - Node installed
 - Yarn installed
 
-After cloning the repository run `yarn` to get all the necessary modules installed. Yarn workspaces will handle installing modules for both the client and the server.
+After cloning the repository run `yarn` to get all the necessary modules installed.
 
-### **ThunderHub - Server**
-
-To be able to use the HodlHodl integration create a `.env` file in the `/server` folder with `HODL_KEY='[YOUR API KEY]'` and replace `[YOUR API KEY]` with the one that HodlHodl provides you.
-
-#### To get the server running use the following commands
+After `yarn` has finished installing all the dependencies you can proceed to build and run the app with the following commands.
 
 ```javascript
-yarn server:prod
-yarn server:run
+yarn build
+yarn start
 ```
 
-If the server starts succesfully, you should see `info [server.js]: Server ready at http://localhost:3001/` in the terminal
-
-### **ThunderHub - Client**
+This will start the server on port 3000, so just head to `localhost:3000` to see the app running.
 
-#### To get the React frontend running use the following commands
+#### HodlHodl Integration
 
-##### This must be done in the `/client` folder
-
-```javascript
-yarn start
-```
-
-If the frontend starts succesfully, you should see `Compiled successfully! You can now view app in the browser.` in the terminal and a browser window should have opened in your browser.
+To be able to use the HodlHodl integration create a `.env` file in the root folder with `HODL_KEY='[YOUR API KEY]'` and replace `[YOUR API KEY]` with the one that HodlHodl provides you.
 
 ## Development
 
 If you want to develop on ThunderHub and want hot reloading when you do changes, use the following commands:
 
-### ThunderHub - Server
-
 ```javascript
-yarn server:dev
+yarn dev
 ```
 
-### ThunderHub - Client
-
-Running the commands `yarn start` in the `client` folder works for development.
-
 #### Storybook
 
 You can also get storybook running for quicker component development.