App Skeleton using Next.js, Node/Express, React

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["."],
+        "alias": {
+          "client": "./client",
+          "server": "./server"
+        }
+      }
+    ]
+  ]
+}

.eslintignore

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

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "prettier/prettier": ["error", { "singleQuote": true }],
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "react/display-name": 0,
+    "@typescript-eslint/no-explicit-any": 0
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "parser": "@typescript-eslint/parser"
+}

README.md

@@ -4,7 +4,7 @@ After several years of being dissatisfied with existing group event tools (Meetu
 
 This will be a self-hosted Docker container that you can one-click deploy to the cloud, then configure through an admin panel. No coding required.
 
-Your nonprofit can sub-domain it to your website like `chapter.sierraclub.org` or `chapter.womenwhocode.org`. 
+Your nonprofit can sub-domain it to your website like `chapter.sierraclub.org` or `chapter.womenwhocode.org`.
 
 You can use your own authentication tools. And all your user data will stay on your own server.
 
@@ -15,7 +15,7 @@ We use [Open API 3.0](https://www.openapis.org/about) to define the API structur
 ```bash
 npm run speccy
 ```
-Navigate to http://localhost:5000 to see API docs
+Navigate to http://localhost:8001 to see API docs
 
 ## Terminology
 To better communicate and more easily build an API and UI, we've decided on a collection of terminology to discuss about the Chapter project in a clear way:
@@ -29,17 +29,78 @@ To better communicate and more easily build an API and UI, we've decided on a co
 
 We are planning to use the following tools:
 
-- [Node.js](https://nodejs.org) / [Express](https://expressjs.com) for our backend
+- [Node.js](https://nodejs.org) / [Express](https://expressjs.com) for our backend using JavaScript/TypeScript
 - [Postgres](https://www.postgresql.org) with [Sequelize ORM](https://sequelize.org)
 - [Elasticsearch](https://www.elastic.co/what-is/elasticsearch)
-- A [React](https://reactjs.org/) frontend using JavaScript (not TypeScript) and CSS (not Sass)
+- A [React](https://reactjs.org/) frontend using JavaScript/TypeScript and CSS (not Sass)
+- [Next.js](https://nextjs.org/) for server-side rendering
 
 A lot of people know these tools, and they're proven to work well at scale.
 
 We are considering using a tool like [Next.js](https://nextjs.org) to get up and running faster.
 
 We will focus on building an open API first. Then developers can use the API to build their own mobile clients and voice interface clients.
 
+## Development Setup
+
+Requirements: Node.js, Docker, internet access
+
+### Installing Node.js
+
+Follow instructions for downloading and installing Node.js for your opreating system from the [official Node.js website](https://nodejs.org/en/download/).
+
+Ensure you are installing Node 10 or greater and npm 6 or greater.
+
+### Installing Docker
+
+Click [here](https://docs.docker.com/v17.12/install/) for the Docker installation site.  Scroll down to "Supported Platforms" and follow the instructions to download & install Docker Desktop for your operating system (or Docker CE for linux).
+
+You can find more resources on Docker here:
+- [Docker: What and Why](https://stackoverflow.com/questions/28089344/docker-what-is-it-and-what-is-the-purpose)
+- [Docker Lessons on KataCoda](https://www.katacoda.com/learn?q=docker)
+- [Play with Docker Classroom](https://training.play-with-docker.com/)
+
+### Starting the Development Server
+
+Open up Terminal/Powershell/bash and navigate to the directory where you want the project to live.
+
+Clone this repository:
+```
+git clone https://github.com/freeCodeCamp/chapter
+```
+
+Navigate to the newly cloned repo:
+```
+cd chapter
+```
+
+Install dependencies:
+```
+npm install
+```
+
+Ensure that Docker Desktop is up and running, then run the following command:
+```
+docker-compose up
+```
+
+Wait for the logs to show "server started on port 8000", then navigate to `localhost:8000` to view the app.
+
+The server will automatically restart anytime you save a `.ts` or `.js` file within the `server/` directory.
+
+You can run any command within the container by prefixing it with `docker-compose exec app`, e.g. `docker-compose exec app npm install express`
+
+## Testing 
+Run tests
+```
+npm run test
+```
+
+Run tests in watch mode
+```
+npm run test:watch
+```
+
 ## Schema
 
 ![a diagram illustrating the proposed schema for chapter](https://user-images.githubusercontent.com/2755722/66802465-7d181900-eeea-11e9-9c6a-48012839d5f2.png)
@@ -94,9 +155,9 @@ Quincy Larson is the project lead. freeCodeCamp.org will start "dogfooding" this
 
 Here's an out-dated example of an app with similar functionality: [The freeCodeCamp Study Group Directory](https://study-group-directory.freecodecamp.org).
 
-You should [join our Discord server](https://discord.gg/vbRUYWS) to get connected with people interested in this project and to be aware of our future announcements. 
+You should [join our Discord server](https://discord.gg/vbRUYWS) to get connected with people interested in this project and to be aware of our future announcements.
 
-## Contributing 
+## Contributing
 
 ### [Take part in discussions or Contribute code to this opensource codebase.](CONTRIBUTING.md)
 

client/components/SomeComponent.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default () => <div>This is an imported component</div>;

client/components/__test__/SomeComponent.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { SomeComponent } from 'client/components/';
+
+describe('SomeComponent', () => {
+  it('should render text', () => {
+    const { getByText } = render(<SomeComponent />);
+    expect(getByText('This is an imported component')).toBeDefined();
+  });
+});

client/components/index.ts

@@ -0,0 +1,3 @@
+import SomeComponent from './SomeComponent';
+
+export { SomeComponent };

docker-compose.yml

@@ -0,0 +1,24 @@
+version: '3.7'
+services:
+  app:
+    image: node:10-alpine
+    command: 'npm run dev'
+    working_dir: /usr/chapter/
+    volumes:
+      - data:/usr/chapter/
+    ports:
+      - '8000:8000'
+  speccy:
+    image: node:10-alpine
+    command: 'npm run speccy:watch'
+    working_dir: /usr/chapter/
+    volumes:
+      - data:/usr/chapter
+    ports:
+      - '8001:8001'
+volumes: 
+  data: 
+    driver_opts: 
+      type: bind
+      o: bind
+      device: ${PWD}/

next-env.d.ts

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

next.config.js

@@ -0,0 +1,10 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  webpack(config, options) {
+    config.resolve.alias.client = './client';
+    config.resolve.alias.server = './server';
+    config.plugins.push(new ForkTsCheckerWebpackPlugin());
+    return config;
+  },
+};

nodemon.json

@@ -0,0 +1,12 @@
+{
+  "ignore": [
+    ".git",
+    "node_modules",
+    ".next"
+  ],
+  "watch": [
+    "server"
+  ],
+  "exec": "npm run dev",
+  "ext": "js,ts"
+}