Frontend challenge for the 2021 Jump2Digital Hackathon. A minimalistic and responsive payment gateway layout with client-side form validation.
Barcelona Digital Talent have organized a Hackathon with a series of challenges around three tech profiles:
- Frontend
- Backend
- Data
The first phase is online, from 22 to 28 of November. The best 80 participants will take part in a face-to-face competition organized by teams the next 10th December, as part of a tech event with conferences and bussiness meetings, among other activities. More info here
This project use ES6 syntaxis and async/ await pattern with axios to call the API.
...
# API call
const getData = async() => {
setCallError(false)
try {
const answer = await axios.get(API_URL);
const result = answer.data.data
# Extract the data in variables with map function...
}catch(error){
setCallError(true)
alert('Is something wrong with API call')
}
} Willing to keep practicing React and trying new libraries combination, I have chosen to build this challenge with:
The folder structure is divided in assets, components and hooks, with a custom hook for responsiveness using conditional rendering -credits to this source. Conditional classNames have been used as well.
Components are imported to App.js except Button, which is reused twice in PayForm component. The logic is placed in App component and passed to child components through props. Semantic HTML tags and aria-label attributes have been applied when necessary. The list of countries and codes is called from useEffect hook and form validation is coded with vanilla JS, regular expressions and validator.js library inside arrow functions.
If you want to play with it:
# Clone it in your local folder
git clone https://github.com/MinervaLong/jump-to-digital-vp-2021
# Install node modules
cd jump-to-digital-vp-2021
npm install # run command
npm startSee the project in action here.
[email protected] || Vanesa Perea
Dollar icon by Ahkâm | Arrow Icon by P. J. Onori | Apple logo by FreePNGImg.com | Macbook image by imgpng.ru