Mini Store

🗒️ Table of Contents

• About
  • Stripe Testing Card
• Built Using
• Getting Started / Setup
• Final Thoughts

💡 About

As the name suggests, just a small and simple store (and sort of a database-less application).
When visiting Stripe's website, I became curious about how its API worked. So I decided to combine the useful with pleasant, integrating its payment API and in the process, improve some skills such as TS+Node and TS+Vue, as well as learning new tools such as Tailwind CSS.

• Features

  • Products data are stored in Stripe
  • Mobile-Friendly
  • PWA
  • Webhooks (At the moment, only for payment confirmation event. 🫠)

• Stripe Testing Card

  • You can use this card to test the application under development or at MiniStore.rangelpereira.com
    

  BRAND	NUMBER	CVC	DATE
  Mastercard	5555 5555 5555 4444	Any 3 digits	Any future date

⛏️ Built Using

• NPM
• Stripe CLI
• Cyclic.sh (Free API deploy)
• Readme Pattern (Readme.md template generator)
• Backend
  • TypeScript
  • Node.js
  • Express
  • Stripe-node
• Frontend
  • TypeScript
  • Vue.js
  • Pinia
  • Vite PWA
  • Tailwind CSS
  • Stripe-js

🏁 Getting Started / Setup

These instructions will set the project up and running on your local machine for development and testing purposes.

1. Use /frontend/.env.example & /backend/.env.example to set up your environment.

Backend Prerequisites

1. Stripe secret key
2. Stripe endpoint secret key (if you want to use webhooks)
3. To make webhooks work on development env, it is necessary to use Stripe CLI.
4. Make sure that your products are in this format within Stripe.

{
  "id": "generated_by_strip",
  "name": "name",
  "images": ["image_url"],
  "metadata": {
  "description_en": "description.",
  "description_pt": "description.",
  "maximum_brl": "25000",
  "maximum_usd": "5000",
  "minimum_brl": "1399",
  "minimum_usd": "269",
  "title_en": "product title",
  "title_pt": "product title",
  "total_raised_brl": "0",
  "total_raised_usd": "0",
  "total_sold": "0"
  }
}

5. Now you can follow these steps to get the server running.

Frontend Prerequisites

1. Stripe public key
2. Now you can follow these steps to get the client running.

📝 Final Thoughts

• The Stripe service has a limit on the number of requests per second, which can ruin the user experience and even bring the system down if the application has a high volume of traffic.
  Considering this, a solution that comes to mind and that I plan to study and implement in the future would be storing products in cache and updating them every 30/60 seconds, possibly using Redis.
• Well, at the moment the application doesn't use any database, but obviously in a real scenario where the level of complexity increases and the data structure must follow a business rule, a storage solution beyond Stripe would be necessary.