This is not a tutorial, or anything even informational. Just a place to share my project, hoping to inspire some creativity. Hopefully you learn about a new resource or try a new project. Repo is available!
Hey devs, we're pretty fortunate 😉
This badass platform gives us the ability to show off a project with the "#showdev" community tag and I am taking that opportunity!
Resources
Try different credit card issuers:
- Visa cards start with 4
- Mastercards 51
- Discover 6011 / or 65
- Diners Club 300
Features
- ReactJS
- JSX
- Basic Javascript
- Custom SCSS
- Cleave.JS
- Dynamic rendering
Something to point out
The FUNNIEST thing about the entire project, what I am also the most proud of, is the holographic sticker on the top left! It's a picture of raindrops on a window! 🤣
Conclusion
Let me know what you think about it. So much more could be added to this. For example, I would like to add a rotateX animation that allows the user to instead enter their security code on the back, once they click on the form field! That would be cool.
If you are practicing frontend development and using React, give it a go! It's really based on all the fundamentals of React and the basics of Javascript.
Show off your project below if you end up giving a shot! I'm sure you can do something even better! 😎
Follow me on Twitter
for byte-sized web dev content!
You should also follow my Instagram
Dev-related stuff only!
Top comments (9)
I'm particularly interested in your Credit Card Payment UI project. I've been meaning to work on something similar myself, so seeing your repo available is definitely exciting. I'm looking forward to checking it out and maybe even learning some new tricks. By the way, have you heard of Vclub new domain? It's a great resource I've been using for making payments online. I think it could be particularly useful in conjunction with your Credit Card Payment UI project. It's always great to have a reliable and secure payment option when working on web development projects.
Thanks a lot! I appreciate you taking the time just to let me know :)
It will be interesting to see how you evolve this Chris.
So many possibilities to take it from here.
Giving context on the UI for the credit card payment, is one possible expansion of this demo UI.
Hey, thanks a lot for the vote of encouragement 💯 Context is definitely a way to go. There is error handling, yup, Formik, slicker animations. Seems like something I'm going to work on soon!
Yes, error handling and user messaging will be valuable!
Absolutely!
Your project is looking fresh, Chris Hansen, and I wish you good luck with improving the project. I think you can create a great application for people to check their credit card availability, especially for people traveling a lot. It would be a useful application, in my opinion. Also, you can provide a good tutorial service for many customers with advice like - how to increase my credit score, take a mortgage with a bad credit score, and check my credit score with the bank. I bet these are important topics.
It looks awesome, there's only one issue, the month and year are wrong
You're right l, are you talking about how I have month displayed first on the card, but year is the first users choice? Good catch if so 💯👌