Creating an app to help send your friends a self-destructing message

This is part 2 of the article, if you haven't been through the first part yet, here is the link to it -

https://saiyerniakhil.tech/creating-an-app-to-help-send-your-friends-a-self-destructing-message-1

In part 1, we have built our backend part of the application, now here we are with building the frontend part and conclude the application development.

I am using ReactJS for the frontend and bootstrap as the CSS framework. I have used the codesandbox in the initial development of my application.

My Directory structure of the react application is as follows -

I have divided my react folders into components, pages, assets each component inside components and pages has __tests__ folder which contains the unit test and integration tests.

components contains the smallest possible react components which are re-used throughout the react application
pages contains the combination of react components, which together form a single page. Since I'm using React Router in the application, it becomes more meaningful for the pages folder.
assets folder contains the static files like images, SVGs etc.
App.js is the root element of the component tree of the application.

The current application, which is built using react-router, has two different routes in actual -

/ - points to the HomePage
/result/:uuid - points to the BufferPage

While the homepage route is pretty straight forward but BufferPage isn't which I'll discuss in a moment.

The HomePage route renders the HomePage component in the pages directory. All the routes and pages contain the Header, Footer and conditionally rendered HeroImage component in general. the HomePage is where the user fills out the form to persist the message and set the expiry date into the database.

Screenshot_2021-03-24 React App.png The homepage

When the user successfully submits a message to store it, he'll be provided with a message giving him the link to the message to access it. the user also can copy the link by clicking the copy button.

The form's submit button will remain disabled until a valid input is provided and also while the request payload is being sent to the server. The user has also been provided with instruction on how the application works.

The next route is BufferPage. This page's route accepts the UUID of the message, as we have seen earlier on the homepage the user is provided with a route <application-domain>/result/<uuid> so the BufferPage picks up that UUID from the params and does a fetch call to the server at /retrieve/:uuid endpoint. Based on the result, the user will then be redirected to either a success page, which contains the message, the expiry date and on failure, the page redirects to the error page, which then tells the user that the message has been expired or it is not present in the database and also has an option to reach the homepage.

Screenshot_2021-03-24 React App(1).png The success page