Q: Architecture and Framework for Cypress Automation Testing I am new to cypress and started automation on cypress architecture for web applications .Can anybody recommend which testing architecture and/or framework must be most suitable to work with considering react Ui and microservice api testing??

A: The framework shouldn't matter nor is you use microservices etc. Cypress is a tool that can click around in your UI no matter if you use, VueJS, Angular, raw html or something else. In general I'd suggest caution of any framework that dictate a specific architecture.
To get you started this have a lot of goodies: https://docs.cypress.io/guides/references/best-practices.html.
Another advice, as they suggest use data-cy attributes for selection of data. Don't make them overly specific, instead make hierarchies. You can always do cy.get("foo").find("baz") and cy.get("bar").find("baz") and have baz be specific in the context of foo and bar respectively.
Another advice is make things specific to their purpose, not their components. A simple example, say you have a web shop, where you can add items to the basket. Does it matter if you add to a basket with a link or a button? No of course not, so data-cy="add-to-basket-button" or data-cy="add-to-basket-link" is bad. Instead do data-cy="add-to-basket-action" or maybe even better just: data-cy="add-to-basket" (after all, doe the action-part of the name give any information that's not already clear?). So to iterate, the component doesn't matter, the purpose does, keep a focus on the requirements, and abstract away from the solution.
I hope that's enough to get you started on a good structure

A: If you are testing your react app in isolation with the source code or writing functional UI test cases, you can consider a Cypress plugin called cypress-react-selector. It helps you identify web elements by component, props, and state even after the minification. You need to use React Dev Tool to identify the component names in that case. 
Here is an example:
Suppose your react app:
const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
)

const App = () => (
  <div id='root'>
    <MyComponent />
    <MyComponent someBooleanProp={true} />
  </div>
)

ReactDOM.render(<App />, document.getElementById('root'))

Then you can simply identify the react element like:
cy.react('MyComponent', { someBooleanProp: true })

Find more sample test here
Hope it will help!
