NS Group Finder

Meet the people who will share your NS trip.

---

This project was bootstrapped with Create React App. You can find the most recent version of this guide here.

Table of Contents

• Quick Start
• Available Scripts
  • yarn start
  • yarn test
  • yarn lint
  • yarn flow
  • yarn prettier
  • yarn analyze
  • yarn build
  • yarn eject
• Folder Structure
• Component Structure
• Firebase
• Formatting Code Automatically
• Static Typing
• Material
• CSS-in-JS

External links:

• Snippets

---

Quick Start

1. Clone the project.
2. Install the last LTS version of node.
3. Run yarn install inside the project.
4. Install the VSCode extensions:
   1. ESLint
   2. Flow Language Support
   3. Prettier - Code formatter
5. To allow Prettier to auto-format your current file on save, add this line in your workspace settings: "editor.formatOnSave": true,.
6. Read the Available Scripts section to start the project.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn lint

Runs eslint to check the files for syntax errors.

yarn flow

Runs flow to check the files for type errors.

yarn prettier

Format all the project files with Prettier.
See the section about prettier for more information.

yarn analyze

Analyze JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Folder Structure

nsgroupfinder/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    actions/
    assets/
    common/
      components/
        index.js
        ExamplePresentationalComponent.js
      containers/
        index.js
        ExampleContainerComponent.js
    config/
    epics/
    reducers/
    utils/
    views/
      ExampleView/
        index.js
        AComponentSpecificToThisView.js
        AnotherComponentSpecificToThisView.js
    index.js
    registerServiceWorker.js

Details

public/

More info

Only files inside public can be used from public/index.html.

src

Contain all the source code.

For faster rebuilds, only files inside src are processed by Webpack.
You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

src/actions

Contain all the Redux Actions.

src/assets

Where all static assets are stored (e.g. images/*.{svg|png|jpg|...} or fonts/*.{ttf|otf|...}).

src/common

Contain all reusable components (i.e. those who are not specific to a particular view or container):

• src/common/components for presentational components
• src/common/containers for container components

Please read this in order to learn the presentational and container components concepts.

Read this learn the component structure used in this project.

When you create a new component, please add this line in the src/common/components/index.js (and same for containers):

export { default as ComponentName } from './ComponentName';

The created component can be imported like this:

import { ComponentName } from 'common/components';

(thanks to absolute imports)

src/config

All config files.

src/epics

All epics files
A function who build the root epic lives in src/epics/index.js.

src/reducers

Contain all the Redux Reducers.
A function who build the root reducer lives in src/reducers/index.js.

src/utils

Helpers classes / functions / libraries.
For example, the createStore.js lives here.

src/views

All views will live here and take the form of container components (created with a classes).

Read this learn the component structure used in this project.

A view can contain his own specific presentational and container components those who are not in src/common/.

Example:

Home/
  index.js : The view (always named `index.js` !)
  HomeWelcomingMessage.js : A component specific to this view (which will be used nowhere else)

Requirements

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

Component Structure

A component will always lives in a single .js file.
You can check the snippets to save time during the creation of your components.

Formatting Code Automatically

Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the Prettier's GitHub page for more information, and look at this page to see it in action.

In this project, Prettier will format the changed files automatically when you make a commit.
To allow Prettier to auto-format your current file on save, add this line in your workspace settings: "editor.formatOnSave": true,.

You can also:

• Format all the project files with yarn prettier.
• Format the current file / selection like describe here.

Static Typing

Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.

As you installed the Flow Language Support VSCode extention, the files will be checked in real-time in VSCode. You can also run yarn flow.

To learn more about Flow, check out its documentation. To learn who to use it with React, read this and this.

Firebase

This project use Firebase.

We use Firestore and not Realtime Database for all the data (even the user profiles).

In order to use Firebase with Redux, we use React Redux Firebase;

Material

This UI of this projet will use Material UI Next (in beta) for the Material integration.

CSS-in-JS

The project use a CSS-in-JS solution (we writing the CSS with JS).
I suggest this reading to know a little more about the subject and how it is implemented in the project.