Firstmate: Website Basic (react-next-semantic-jest-eslint)

To be used with Firstmate Controller. A simple website with testing and linting.

Table of Contents
1. Stack
2. Deployment Instructions
3. Basic Development Usage
4. Roadmap
5. References

Stack

Tool	Description
Node.js	DOM VM
React.js	DOM Rendering Framework
Next.js	SSR Framework
Semantic UI React	CSS styles
Jest	Testing
ESLint	Javascript Linting
---	---
Google Tag Manager	Page Traffic and Analytics
Google Developers	Crawlers and Bot Traffic
MegaTags	SEO, Meta Tags, Social Essentials
FaviconGenerator	Favicon Essentials
Unsplash	Stock Photos

Deployment Instructions

Please see instructions on Firstmate for setting up the controller together with the boilerplate.

Basic Development Usage

Installation

~/boilerplate/frontend $ npm install

Dev server for manual testing

~/boilerplate/frontend $ npm run dev

Visit on localhost:3000

Testing

~/boilerplate/frontend $ npm run test

Linting

~/boilerplate/frontend $ npm run lint

Roadmap

1. Improve mobile experience with mobile architecture
2. Consider adding state management with Redux
3. Use github for roadmapping

References

General

NextJS Docs - https://nextjs.org/

NextJS Examples on Github - https://github.com/vercel/next.js/tree/canary/examples

NEXT + JEST

Next Examples - https://github.com/vercel/next.js/blob/canary/examples/with-jest/

NEXT + Google Tag Manager

Next Examples - https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager

Testing

https://testing-library.com/docs/react-testing-library/intro

https://github.com/testing-library/jest-dom

Linting

React Rules - https://github.com/yannickcr/eslint-plugin-react

Airbnb Style Config - https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

Next-config - https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js

Next-plugin - https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next

Next-with-jest - https://github.com/vercel/next.js/blob/canary/examples/with-jest/.eslintrc.json

Style Guides

CSS - https://medium.com/trabe/a-comprehensive-guide-to-using-bem-with-react-14d00c199e0d

React - https://github.com/airbnb/javascript/tree/master/react

Javascript - https://google.github.io/styleguide/jsguide.html