This is a form application [primarily] for mobile applications, using the Onsen UI API.
👵 📱 💵 📝 🏡 🚗 👴
This React form application was built mobile-first with the Onsen UI API for smooth compatibility across both Android and iOS devices.
Users are able to interact with the controlled form features (i.e., input, checkbox, radio, select-dropdown, and button) on Page1.js with solely function components. The bulk of state is managed in App.js with useState() hooks. When the user clicks the "Review" link describing the button, React Router navigates the view to Page2.js, where the changed state of the form is displayed. Changes to the state of the form are outputted on the console upon entering the display page.
Regarding UX, users enjoy specially selected fonts (i.e, Montserrat, Roboto Slab, Roboto) through the Google Fonts API. Additionally, the colors #5CDBD7 and #292829 were curated to give users the feeling of trust and security when submitting their information. To complete the form submission process, upon clicking the "Submit" button, a toast feature appears, showing, "Thanks for your submission!"
- Individual/Business needs the front end experience for a mobile form application
- Clone the repo:
git clone https://github.com/droman892/onsen-react-pages.git
After the project files are downloaded, in the terminal, run npm install to install the dependencies, followed by npm start to start the application. Once the project has loaded on to the browser, feel free to edit it as you see fit using ./src/index.css and the component files in ./src/components.
This React form application is an on-going project, open to contributions and critique. Functionality that would appropriately flesh out the application include the following:
- connect the form data in a database
- include media queries for added responsiveness
- incorporate form validation
- use the React context API instead of prop-drilling
See a bug or an issue with this project? Open a new issue here on GitHub.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
This React form application is maintained by David Roman.