careerfairsystems / nexpo-web

Welcome

Welcome to Nexpo - Next generation Expo!

This project aims to to supply ARKAD with an inhouse project management system.

Development

Development is fairly straightforward but require some dependencies:

• yarn is needed for package management and to run scripts
• A version of the backend is needed and the easiest way is to create one with docker so you need to have that installed as well

Set up backend

1. Clone the backend repository where you want to store it: git clone https://github.com/careerfairsystems/nexpo-backend
2. Enter the created folder: cd nexpo-backend
3. Switch branch to the docker-enabled version: git checkout docker
4. Build and start the backend: docker-compose up -d
5. Wait a few minutes for the backend to compile and start (a faster way is being tested but not finished yet). You can check the progress by running docker-compose logs app and if you see a mention of the server running on port 4000 you are ready to move to the next step
6. Seed the database. This is needed because we need to populate the database with some data so we can log in and access the backend. You can seed the database by running: docker-compose exec mix run priv/repo/seeds.exs
7. Done! You can now use this command to start the backend: docker-compose up -d and to stop the backend: docker-compose down and you don't have to repeat all the steps next time you want to use the backend

Set up the frontend

1. Clone this repo: git clone https://github.com/careerfairsystems/nexpo-web
2. Change directory to the created folder: cd nexpp-web
3. Install all the dependencies: yarn install
4. Run the development server: yarn start
5. To stop the server, simply press Ctrl+C. You can access the app on localhost:3000, the first time you access it can be very slow (30+ seconds) but the next will be fast.

At the moment node version 12 is required. (Optional: For nvm users run nvm use in the terminal to apply the right node version.)

*** ATTENTION *** The content below is outdated and from a time where the backend and frontend were entwined together. It can no longer be called relevant and we need to update it. Not everything is outdated though so if you wonder something you can take a look at it but don't think of it as the ultimate truth.

Table of Contents

Expand

• System Requirements
• Technical Description
  • Folder structure
• Development
  • Setup environment
  • Reset Linux environment
  • Implement things
    • Development lifecycle
    • Testing
      • Recap of TDD:
      • Writing tests for backend
  • Helpful things
  • Dev servers
  • Helpful scripts
  • Documentation
  • Setup your Editor
• Deployment
• Who do I contact?

System Requirements

The system requires these programs to be installed. The project intends to always follow stable releases. The system is verified to work with the following setup

• Elixir 1.8.2 Installation instructions
• Erlang OTP 22.0.7 - Installed automatically with Elixir
• Node 11.9.0 Installation instructions
• PostgreSQL 10.10 Installation instruction

When updating system requirements, make sure you update accordingly the following locations

• Node
  • phoenix_static_buildpack.config
  • package.json
  • priv/react_app/package.json
  • .travis.yml
• Elixir
  • mix.exs
  • elixir_buildpack.config
  • .travis.yml

Technical Description

The frontend is configured with Create React App. It handles all build configuration which makes our lifes much easier. Do not eject from the default configuration. Create React App has a fantastic User Guide.

Folder structure frontend

Structure

./priv/react_app/src/
|-- API/                      # Contains everything related to API
|   |-- index.js              # Exposes entire API as a module
|   |
|   |-- NAME.js               # Defines API for interacting with NAME
|
|-- Components/               # Composable React components
|   |
|   |-- NAME/                 # Defines a component called NAME
|       |-- index.js          # Responsible for connecting component with state
|       |-- NAME.js           # Defines React component
|       |-- NAME.test.js      # Tests for component
|
|-- Screens/                  # React components that are screens
|   |
|   |-- NAME/                 # Defines a screen called NAME
|       |-- index.js          # Responsible for connecting component with state
|       |-- NAME.js           # Defines React component
|       |-- NAME.test.js      # Tests for component
|
|-- Store/                    # Everything related to Store
|   |-- index.js              # Exposes entire store as a module
|   |
|   |-- actions/              # Contains all action creators
|   |   |-- index.js          # Exposes all action creators as module
|   |   |
|   |   |-- NAME/             # Contains action creators for NAME
|   |       |-- index.js      # Exposes all actions creators as a module
|   |       |-- NAME.js       # Defines all actions creators for NAME
|   |       |-- NAME.test.js  # Tests for actions creators
|   |
|   |-- reducers/             # Contains all reducers
|   |   |-- index.js          # Exposes a single combined reducer
|   |   |
|   |   |-- NAME/             # Contains one reducer
|   |       |-- index.js      # Exposes reducer
|   |       |-- NAME.js       # Defines the reducer
|   |       |-- NAME.test.js  # Tests for reducer
|   |
|   |-- selectors/            # Contains all selector creators
|   |   |-- index.js          # Exposes all selector creators as module
|   |   |
|   |   |-- NAME/             # Contains selector creators for NAME
|   |       |-- index.js      # Exposes all selectors creators as a module
|   |       |-- NAME.js       # Defines all selectors creators for NAME
|   |       |-- NAME.test.js  # Tests for selectors creators
|   |
|   |-- ActionTypes.js        # Defines all action types
|
|-- TestHelper/               # Defines helpers that are helpful in tests
|   |-- index.js              # Exposes all helpers as a module
|   |
|   |-- NAME.js               # Defines a single helper
|
|-- Util/                     # Miscellaneous utility helpers
|   |-- NAME.js               # Defines a single helper
|
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md

Development

Setup environment

1. Make sure you have installed all system requirements. Then open a terminal and do the following steps
2. Install the following programs
   • npm - version 5 or higher. Installation instructions
3. Navigate yourself to the project root using the terminal.
4. Based on your running dist do one of the following:
   • Mac:
     • Execute make install-mac
   • Linux:
     • Open the following file: config/dev.exs
     • After poolsize: 10, add username: "nexpo", password: "nexpo". Do not forget to add a , after poolsize.
     • Do the same thing for config/test
     • Execute make install-linux
5. Grab a cup of coffee!
6. Start the stack with npm run dev

Implement things

Development lifecycle

1. Checkout and pull latest from master
2. Make a local branch with git checkout -b featurename
3. Install dependencies (if necessary) with yarn add
4. Migrate or Reset database (if necessary) with mix ecto.migrate or mix ecto.reset
5. Populate database with mock data with mix run priv/repo/seeds.exs
6. Start the frontend with yarn start
7. Create your feature with TDD
8. Commit, and make a pull request
9. Wait for pull request to be accepted by someone
   • Review others pull requests
10. If pull request is merged, and all tests pass, your feature is automatically deployed to production

Testing

This project is developed with TDD.
This means that all code should be tested. We are urging all developers to follow this for the following reasons

• You will know for sure if you break anything when touching the code
• We are changing developers every year. You will make everything easier for the next team!

Recap of TDD:

1. Write a test
2. Make sure it fails
3. Implement code that makes it pass
4. Make sure your code is pretty and scalable

These are some commands to help you run all tests

Command	Description
yarn test	Runs all tests
yarn testwatch-frontend	Starts testwatcher for frontend

Writing tests for frontend

• All tests should be beside what is it testing. If there is a component named Component, its test should be beside it and named Component.test.js
• The frontend is configured with jest as its testrunner.
• For react tests, the project is configured with enzyme. This makes it easy to unit test a component
• There are test helpers in /priv/react_app/src/TestHelper

Helpful things

Dev servers

Command	Description
yarn start	Start frontend

• Backend server is running on localhost:4000
  • Visit localhost:4000/sent_emails to see emails sent in development
• Frontend server is run on localhost:3000
  • All api-calls are proxied transparently to the backend

Helpful scripts

Documentation

Setup your Editor

VS Code

• Install Prettier
• Install Eslint
• Install Flow Language Support

Atom

• Install Prettier
• Install Eslint
• Install Flow

Update your settings

• Enable "Set Editor Format On Save"
• Disable JavaScript format and validate
• Disable Typescript format and validate
• Enable "Prettier Eslint Integration"
• Enable "Flow Use NPM Packaged Flow"
• Enable "Flow Run On All Files"

Deployment

Who do I contact?

• Add Astons information here
• Mustafa Albayati (Head Of IT 2020)