readme-en.md

🇺🇸 English

🇧🇷 Português

💳 GenCard Project

Video   |    Technologies   |    About   |    Highlights   |    Cloning   |    Contact

📹 Project Video Presentation

gencard-video.mp4

If the video has any errors, reload the page!
Access the project online HERE

🚀 Technologies Used

• SweetAlert
• Vanilla-Tilt
• Dom-To-Image
• Sass
• iMask
• UI Ball Loaders
• CSS Buttons
• Regex
• ViteJS
• NodeJS
• npm
• Javascript
• CSS
• HTML

📝 About

Watching the video above and/or accessing the project online will help you understand the explanation!

Inspired by RocketPay, GenCard simulates a credit card filling form, where the focus was to practice handling HTML elements via DOM and use the IMask to validate the information.
Since I already had this knowledge, I took the opportunity to give room to my ideas and explore more about Regex and Sass, thus developing several modifications and improvements, such as the creation of extra validations, the development of a more elaborate and performative CSS, among others. mentioned in the highlights section.

📌 Some Highlights

• Extra validations;
• More card possibilities;
• Improved layout, user experience and animations with the use of Sass, the Vanilla-Tilt lib, and Loaders and Buttons components.;
• Option to generate and download the card image using the Dom-To-Image - functionality that may not make much sense in this context, but even so I wanted to put into practice this idea that came to mind;
• User feedback modal with user information using SweetAlert;
• Fully responsive design;

📖 Cloning the Project

To clone and run this project on your computer you will need Git and Node.js v16.13.2 or higher and previously installed.
After that, in the terminal:

# Clone this repository with:
> git clone https://github.com/Luk4x/gencard.git

# Enter the repository with:
> cd gencard

# Install dependencies with:
> npm install

# Run the project with:
> npm run dev

# Once this is done, you will be able to access the project through the link that will appear in the terminal! (something like http://localhost:3000/ or http://127.0.0.1:5173/)

🤝 Contributor Contact

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 💳 GenCard 🏷️ Tecnologias sass, regex, imask, sweetalert, nodejs, npm, css-buttons, dom-to-image, vitejs, vanilla-tilt, ui-ball-loaders, javascript, css, html 📷 Img

MaykBrito.Dev 🪟 Mayk Brito

Back to Top