Welcome to Nexpo - Next generation Expo!
This project aims to to supply ARKAD with an inhouse project management system.
Development is fairly straightforward but require some dependencies:
yarnis needed for package management and to run scripts- A version of the backend is needed and the easiest way is to create one with
dockerso you need to have that installed as well
- Clone the backend repository where you want to store it:
git clone https://github.com/careerfairsystems/nexpo-backend - Enter the created folder:
cd nexpo-backend - Switch branch to the docker-enabled version:
git checkout docker - Build and start the backend:
docker-compose up -d - 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 appand if you see a mention of the server running on port 4000 you are ready to move to the next step - 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 - Done! You can now use this command to start the backend:
docker-compose up -dand to stop the backend:docker-compose downand you don't have to repeat all the steps next time you want to use the backend
- Clone this repo:
git clone https://github.com/careerfairsystems/nexpo-web - Change directory to the created folder:
cd nexpp-web - Install all the dependencies:
yarn install - Run the development server:
yarn start - 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.
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
- Elixir
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.
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
- Make sure you have installed all system requirements. Then open a terminal and do the following steps
- Install the following programs
npm- version 5 or higher. Installation instructions
- Navigate yourself to the project root using the terminal.
- Based on your running dist do one of the following:
- Mac:
- Execute
make install-mac
- Execute
- Linux:
- Open the following file:
config/dev.exs - After
poolsize: 10, addusername: "nexpo", password: "nexpo". Do not forget to add a,after poolsize. - Do the same thing for
config/test - Execute
make install-linux
- Open the following file:
- Mac:
- Grab a cup of coffee!
- Start the stack with
npm run dev
- Checkout and pull latest from master
- Make a local branch with
git checkout -b featurename - Install dependencies (if necessary) with
yarn add - Migrate or Reset database (if necessary) with
mix ecto.migrateormix ecto.reset - Populate database with mock data with
mix run priv/repo/seeds.exs - Start the frontend with
yarn start - Create your feature with TDD
- Commit, and make a pull request
- Wait for pull request to be accepted by someone
- Review others pull requests
- If pull request is merged, and all tests pass, your feature is automatically deployed to production
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!
- Write a test
- Make sure it fails
- Implement code that makes it pass
- 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 |
- All tests should be beside what is it testing. If there is a component named
Component, its test should be beside it and namedComponent.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
| 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
- Install Prettier
- Install Eslint
- Install Flow Language Support
- 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"
- Add Astons information here
- Mustafa Albayati (Head Of IT 2020)