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


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 - 

![Code_Xls06zk4Kg.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616577820560/ZaJ7nZaMb.png)

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.
1. `components` contains the smallest possible react components which are re-used throughout the react application
2.  `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.
3. `assets` folder contains the static files like images, SVGs etc.
4. `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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616578872428/PN_GKKmlt.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.

![chrome_XmZnUwwO9c.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616579200222/0A-mCwBu5.png)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1616579860569/k2IXeT4k5.png)
*The success page*


![Screenshot_2021-03-24 React App(2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616579941632/TotLILZz2.png)
*The error page*

The entire application is also responsive for mobile devices.

![collage.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616580481158/v0SBFbr9k.png)

The application is hosted at - [short-url-gen.netlify.app](https://short-url-gen.netlify.app/)

Illustration credits - [undraw.co](https://undraw.co/)