Project : What APIs should be developed for specific Web Page FE & BE

#Foreword

Below is the design that is going to be used for the login page. While designing the API, we missed design of PUT /password API. Be referring to the UX/UI Design, I realized what I should do to make up for it. I started considering how to solve these problems, and this document will address those concerns.

#Approach As Backend

#비밀번호 찾기 (Search Password) API

In this case, what APIs are needed? Before updating the password, we need to verify the user with email verification.

At this point, We need Email verification API.

and then, refer to below

Another API is needed : For updating new password API

#2 APIs are needed - Email Verification + Update Password

In a nutshell, Two APIs are needed:

Simply put, to implement that specific webpage, as a backend, I just need to consider two APIs: (Email verification + Update password)

If so, what about the Front End (FE)?

Before discussing this, we need to understand what a URL is.

A URL, or Uniform Resource Locator, is an address used to access a specific API.

Eventually, to construct a specific webpage, the front end uses URLs.

In other words, even if it's the same page, the backend and the frontend approach this differently.

To implement the 'Search Password' feature's webpage, the backend just needs to consider creating the two APIs mentioned above. However, the frontend needs to consider which API should be called for that specific page.

Like below, FE calls Email Verification API

After Verification, if user is verified well -> Next page

FE calls Update Password API

#In conclusion,

As seen in this documentation, when we need to create a specific webpage, which can be described as development, the front end and back end have completely different approaches. Surprisingly, through this analysis, my approach became simpler. Ah, in this case, I just need to develop 2 APIs. This simple approach led me to approach API design easily.

Additionally, when I design the Entity-Relationship Diagram (ERD), using a Domain-Based approach made it easier than other approaches.