Skip to content

Home

Jump to bottom
Angelo Teixeira edited this page Oct 3, 2019 · 5 revisions

NiJobs Frontend Wiki

Goal

This wiki will dive into how the application is built and how you should incorporate your changes, bearing in mind our way of doing things to ensure a decent level of consistency.

Feature incorporation workflow

An important aspect of keeping a project clean and newcomers friendly is to have a standard way of making changes and contribute. Thus, like other projects at NIAEFEUP, we like to follow the Feature Branch Workflow. For all you know, there's only the develop branch, and whichever branch you create for what you are working on. To start developing, you should create a branch from the tip of develop. Normally, we name them according to the following rule:

<feature|fix>/<small_title>-<related_issue_number>

An example is feature/homepage-10 that was created to solve issue #10

Once you are done, you should create a Pull Request from your branch to develop and explain what you problems you solved and the overall ideas of how you did it in the description. Ask for a reviewer (or more, if possible), normally some with more experience are recommended so that a better and more in-depth review is provided.

Tip: We like to keep our git history as clean as possible. To do that, you should squash your commits in a way that only the most relevant are there

  • don't:
    • Created enum field
    • Added switch statement
    • Updated errors thrown to use new enum
  • do:
    • Implemented Error Handler A very useful tool to help you do this after you committed more than you should is git rebase -i See here

General Structure

The project is built in React.js, so you can expect a lot of Components. However, there are other parts needed and they need to be structured in a way that makes sense so that we can easily find what we are looking for at any time.

The main structure looks like this:

.
├── ...
└── src
    ├── actions
    ├── components
    │   └── ...
    ├── hooks
    ├── pages
    ├── reducers
    └── utils

As you can see, there are 6 main directories:

  • actions - Contains the functions that generate Redux actions, as well as some service call helpers (that may dispatch Redux actions)
  • components - Contains the React components. Here you should create as many sub-directories as you need, in order to clearly separate the components. Inside we have, for example, the HomePage directory which has further sub-directories regarding the Home Page's components
  • hooks - Here we define our own custom React Hooks to be reused across the application
  • pages - These are also React Components, but only the entrypoints for the application's pages
  • reducers - Contains the Redux reducers
  • utils - Generic utils that may be used across the application

Testing

asd

Pages/Routing

asdsa

Redux

asd

Styling Solution

asd

Theme

Notification System

asd

Logging Metrics

asd

Clone this wiki locally