Always start with a sketch/ diagram/ doodle outlining the following for any feature.

~ System Design -> Breakdown components (server and client), static components, dynamic components, data flow, API call in which component to make sure loading and error states don't break.

~ How will this help? In a long project with a team, someone else might need to debug your feature. Your very structured plan will be a life saver.

Chrome Dev Tools' Network Tab is your best friend.

While the static development phase of converting Figma designs, always make sure the backend is aware of the appropriate fields in a design flow, to avoid missing fields.

Always maintain loading and error states, so that when backend is undergoing development, the frontend doesn't break.

~ Add meaningful UIs for the user to understand.

~ We all have seen facebook, linkedin, twitter go down. It should be as easy for the user of your application as it is for us to understand.

As a frontend developer, you should start getting familiar with data structures right now!!!

~ The backend might often give you objects in the data, but often times for backend developers who don't know the frontend, it is on us to make sure that they are giving us the right data structure to ensure smooth coding, and optimized performance.