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.