uzh-bf / dev-challenge Goto Github PK

As a system administrator, I would like to track user behavior.

• Google Analytics is integrated into the React application.
• Route changes in React Router are tracked as page views in Google Analytics.

Hints

• It is easiest to use a library like react-ga.
• Look up how to integrate it with React Router.

This is a bonus user story.

As a user, I would like to be able to organize my tasks on a Kanban board and always see how many tasks are in each column.

• Tasks can be organized in named columns (i.e., "Backlog", "In Progress", "Done").
  • The columns do not have to be modifiable. You can use fixed ones with the names above.
• Tasks can be moved between columns using Drag & Drop.
• The column header displays the number of tasks in the column.

Hints

• Use the following library: lourenci/react-kanban.
  • Install the package directly from github by using npm install git://github.com/uzh-bf/react-kanban.git#render-custom-card-adder because for task 3, we're going to use a feature available only in the branch render-custom-card-adder
  • The documentation was also changed, so always refer to the documentation of branch render-custom-card-adder here: documentation of branch
• Use an uncontrolled board, as it includes a lot of functionality and saves you time.

As a user, I would like to have my tasks represented in a nicely formatted fashion, so that I can clearly distinguish the different properties.

• The application includes Semantic UI React for styling.
• A task card is represented by the Card component of Semantic UI.

Hints

• Install Semantic UI as described in https://react.semantic-ui.com/usage (Option 1).
• Make sure to add import 'semantic-ui-css/semantic.min.css' to the index.js file.

As a user, I would like to be able to add new tasks to the board.

• A new task can be added to the board, resulting in a new card.
• A task can be added to any of the existing columns.

Hints

• Please use the new feature introduced to the branch render-custom-card-adder: the prop renderCustomCardAdder
• This prop is only available if you installed the package by using npm install git://github.com/uzh-bf/react-kanban.git#render-custom-card-adder (This installs the package from our repo on the correct branch)
• Make sure to also add the props onCardNew and onNewCardConfirm as described in the react-kanban documentation, as the custom card adder will not work otherwise.

This is a bonus user story.

As a developer, I want to ensure type-safety in my application so that I can prevent some bugs early on.

• TypeScript is installed and integrated with create-react-app.
• The application is implemented using TypeScript.

Hints

If you want to implement this user story, we recommend you start writing TypeScript from the beginning, rather than converting your code.

This is a bonus user story and not mandatory.

Setup the Application as follows:

1. Install nodejs
2. Open your console
3. Change directory to dev-challenge/app
4. Run command npx create-react-app ibf-challenge
5. Change into the new directory by running cd ibf-challenge
6. To install all dependencies run npm install
7. Start the app with npm run start

To install new dependencies (packages), you can stop the development server and run the command npm install PKG_NAME

As a developer, I want that the app gets deployed whenever I push changes to the repository

• Setup GitHub Actions to deploy the app to Heroku

Hints

• You can also set this up by connecting the repository to Heroku
• We prefer the GitHub Actions approach as you have to set up the pipeline yourself.

This is a bonus user story.

As a user, I would like to have my tasks represented by cards that summarize the most important metadata.

• A task is represented by a card that provides the following information:
  • Task title
  • Task description
  • Priority
  • Due date
  • Assignee
• The data model of the card should correspond to example-data.json

Hints

• When using the renderCard functionality of react-kanban, other props need to be set as well (see the react-kanban documentation).

As a project manager, I would like to have a separate page that displays project name and description.

• Add the react-router-dom package.
• Add a new route as the Homepage that shows project title and description.
• Add a route for the Kanban board.
• Add a Button or Menu to switch from the Homepage to Kanban and vice versa.

Hints

• Use import HashRouter from react-router and not BrowserRouter, this is much easier to setup (no props needed).
• When using <Route exact path="...">, don't forget the exact keyword.