Built a Registration Form in React JS with an API that Receives Data in Power Automate.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• Your users should be able to:

1. View the optimal layout for the site depending on their device's screen size
2. See all countries from the API on the homepage
3. Search for a country using an input field
4. Filter countries by region
5. Click on a country to see more detailed information on a separate page
6. Click through to the border countries on the detail page
7. Toggle the color scheme between light and dark mode

Screenshot

Home Page	Success Page

Mobile View	Mobile View

Links

• Live Site URL: Deployed Site

My process

Built with

• JSX
• Tailwind CSS - For styles
• Flexbox
• Desktop-first workflow
• React - JS library
• Axios - HTTP Request
• React-router - For routing
• React Hook Form - For Form Validation and handling
• Power Automate - For animations
• Microsoft Excel - For data Storage
• Vercel - For deployment

What I learned

I learned how to build the Power Automate flow to recieve data when a user submits the form. I used Axios to make HTTP requests to the API. I still looking for more ways to build Web Apps that leverages on APIs.

Continued development

I still looking for more ways to build Web Apps that leverages on APIs. I will be building more projects that uses APIs.

Useful resources

• ChatGPT - ChatGPT helped me get answers to my questions during development. And general errors I had during development.
• The official documentation for the libraries I used helped me alot.

Author

• Website - Prince Adimado's Blog
• Twitter - @_primado
• LinkedIn - Prince Adimado