Reconstruire une WebApp reactjs avec Redux

I created a WebApp with Reactjs a few months ago. The Webapp is on the touchscreen of my smartlockers (for parcel deliveries). The main goal of the app is to let the user do two thing:

1) Enter a deposit code we give them to open a door on the locker

2) Search a list of members connected to the locker, select a user and select a box size to deposit a parcel.

The App is already un and running, but I did it myself with poor understanding of ReactJs. I did not used Redux and it can be optimized in a lot of ways.

This is a live demo of the app: [login to view URL]

This is a full video showing the locker, the screen and the door opening system: [login to view URL]

I would like to optimize API requests, make the application more efficient, work on the visual and make the platform more professional. This requires to redo much of the app.

Here's what the platform needs to do:

1) Present a homepage with 3 buttons (Enter a code, Search among a member, Information)

2) Enter Code page allows you to enter a code that is sent to the server for validation. If validated, the page sends a simple request to a Webhook. If the code is not good, present a 'Unavailable' page.

3) 'Info' page, presents simple text

4) Page 'Search among members'. First API request fetch the list of members. The list must be saved in the state (to limit the need to always fetch the list again each time you interact with the locker. The state must be cleaned when the user return on the 'Home page'. By choosing a member, one must then press on a second button among three that determines the parcel size that will be selected. Once selected, an API request is sent and if successful, the app sends a new request to a Webhook for opening a door.

5) The 'Search among members' page is accessible only when you enter a valid access code. At the end of the interactions with the locker, the user can press a button that 'locks' the locker and removes the temporary DB.

-After X seconds of inactivity, the Webapp automatically returns to the home page and delete the state

- The pages must have beautiful effects of transitions with a small delay, to prevent going too fast from one page to another.

React.js

Nº du projet : #19921714

À propos du projet