Skip to main content

👨‍💻 Frontend

We developed our frontend with the following technologies:

  • React
  • Mantine
  • Redux / Redux Toolkit
  • Axios

✨ Code Standards​

We also have here some git hooks. Please do a npm prepare and then the formatter and the linter are good to go. We use eslint and prettier to keep our code tidy

🐛 Debugging​

React Debug Tool​

React provides a debug tool, which you can download here

Redux Debug Tool​

Redux also provides a debug tool, to debug the actions and states here

WDYR​

WDYR explains to you why a component re-rendered. To activate it, add WDYR=True to your development .env. For more detail, look up the docs.

REST API​

Our Rest API is documented with Swagger and ReDoc. After you start up LibrePhotos, you can find them under:

localhost:3000/api/swagger
localhost:3000/api/redoc

Some APIs are not yet well documented, as the generation of the swagger API throws error Link

🏙️ Structure​

  • You can find all the routes in App.js.
  • The pages are in layouts
  • Pages should be split up into React Components, which you can find in components
  • The API calls are made into split into actions, which you can find in actions
  • To handle the state for the whole page, we use Redux. You can find the states and reducers in reducers
  • api_client is just a simple Axios client
  • In util you can find miscellaneous functions.