credit-card-proto's Introduction

💳 Credit Card Prototype 💳

Description::v:

The project is a prototype application which uses React.js as frontend library. A simple credit card info filling form with detailed work.

The project aims to showcase my own skills 😎

https://www.loom.com/share/75033a926507440faacb3577bac710e8

Key Takeaways:

💨 React App
🐣 React Animations Used
✅ Appropriate Form Validation
😍 No styling framework used here, all Hand-crafted (using SASS(SCSS))
✋ Error Boundaries for App level error handling :error
🚫 404 fallback for not found pages (incase someone tries to fiddle with :) )

Live Link 👊

🔗 https://mohdashraf010897-credit-card-proto.netlify.app/

🏠 Project Structure 🏠

src
├── assets
│   └── Images
│
├── components
│   ├── Card
│   │    └── index.jsx
|   ├── common
│   │    ├── ErrorBoundary
│   │    │      └── index.jsx
│   │    ├── Loader
│   │    │      └── index.jsx
│   │    └── Success
│   │           └── index.jsx
│   │
│   └── ErrorBoundary
│        └── index.jsx
│
├── pages
│   └── index.jsx
│
├── styles
│   ├── abstracts
│   │    ├── _animations.scss
│   │    ├── _mixins.scss
│   │    └── _variables.scss
│   │
│   ├── components
│   │    ├── _card.scss
│   │    ├── _formform.scss
│   │    ├── _loader_.scss
│   │    └── _success_.scss
│   │
│   ├── core
│   │    ├── _base.scss
│   │    ├── _meyer_reset_.scss
│   │    └── _utilities_.scss
│   │
│   ├── pages
│   │    └──  _landing_.scss
│   └── main.scss
│
├── utils
│   ├── carTypes.js
│   ├── constants.js
│   └── functions.js
│
└── index.js