👨‍💻 Frontend

We developed our frontend with the following technologies:

  • React
  • Semantic UI
  • Redux
  • 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

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

🏙️ 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.

To-Do

You can look into the issues here, on what features are missing from the frontend.

We currently are working on improving maintainability, by converting our code base to TypeScript.

You can also work on other issues. Most of the files are too large and should be under 300 lines of code. To achieve that we can do multiple things:

  • The layouts should be split into components
  • Functions that are used in multiple classes should be moved into utils
  • One file should only contain one class

It would also be great if we could introduce some test coverage and automated testing.

Updated: