Skip to content
oscarsb edited this page Mar 22, 2021 · 2 revisions

Hilfling-frontend is the repo to where we write our gui for foto.samfundet.no. It is written using React TypeScript and Redux.

1 Structure

The project consists of four folders, and the root configuration files.

src folder

The src folder consists of six folders and some root files.

assets

Put any assets needed in this folder

interfaces

The interfaces matches our models from the backend code, and represents the data being passed and fetched from our API.

store

Our store is written using using React-Redux.

utils

Our utils folder contains two folders, api and auth.

api: @sindre du må skrive om api<3

auth: @caroline du må skrive om auth<3

views

The views contains the components representing one specific view/page in our application. For each view, create a folder containing the name of the view. The folder should only contain one component and one css file with the page css. Remember to name the css file MyView.module.css. You can read more about css-modules in the hilfling-gui wiki.

components

The components are grouped in folders that represents a specific part of the webpage so that it is easier to navigate through the code.

files in the src folder

index.tsx: This file is the file the entire webpage is rendered from, and contains the Root component. The root component contains the header and footer so that they are always rendered, no matter what page you are on. In addition it includes the Routes component, that can be read more about bellow.

figma

Link to figma: https://www.figma.com/file/umh8QbNm8fKo8UlhwUGXFZ/Hilfling?node-id=0%3A1

Routes.tsx: This component contains all routes that it is possible to route to in our application. The Security component is what decides

Clone this wiki locally