Challenge 1 : Card Wallet

Vue小助理

24人浏览 · 2022-08-11 04:26:18

Vue小助理 · 2022-08-11 04:26:18 发布

Welcome to the first challenge 🚀
I will really proud if you enjoy to follow me in this crazy adventure.
Each challenge will be organize of the same way : description about the project, roadmap to scope the project, deployment and of course clear documentation.

Project overview 📝

The goal of this project is to build a card wallet and manage recent payment entries. A demo is available to see the result.

Vue Card Wallet

Define your roadmap 🖊

To realize this project, i started to create a projet into my Github called vue-card-wallet.

Github permits you to define a roadmap for your project as you can see here :
Github Roadmap

Before to start to code, it's really important to define the scope of your project. You got the design, and the features but you need to put a limit.

Create your roadmap to structure your ideas, and organize them through a priority order. I recommend that you rank in ascending order from most to least important.

What I wanted to do 👷‍♂️

Templating Html/Css from FigmaCrush template
Responsive even if no mobile version in the Figma template
Create Card component to add a card in your wallet
Manage recent payment (add and delete) with animation

Technologies used 🛠

For this project, I decided to focus on the use of these technologies :

Vue3
TypeScript
TailwindCss

What I learned 👀

Every project is different and it's always exciting to find out why.

[Vue3] In this one, there is a lot of discovery in practice on Vue3 with TypeScript. But also the use of API composition to allow code reuse.
RecentPayments Component

[CSS] Animation is a good way to improve your user experience. So simple and so fun to create. I wanted to experiment it through transition-group
Bounce-in animation