DEV Community

Cover image for Challenge 1 : Card Wallet
Jimmy
Jimmy

Posted on β€’ Edited on

1

Challenge 1 : Card Wallet

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 :

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

[TailwindCss] I also discovered some utilities classes in TailwindCss and customize the font-family.
Customize TailwindCss

Improvements πŸ›«

I think it could be nice to improve this project nope ? What do you purpose for this ? I have another ideas, but I'm curious to know yours πŸ˜€

Feel free to let me your comments πŸ™ ❀

Thanks a lot to join me on this adventure and to follow me. 🀩 Continue to learn and practice by the same way. πŸš€

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (1)

Collapse
 
geminii profile image
Jimmy β€’

Next Challenge will come as soon as possible. But it could be nice to let the community choose the next project. Let me know in the comments below πŸš€

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up