Teini

Teini (tiny, [ˈtīnē]) is an extremely small webshop leveraging awesome and free solutions like Github and Vercel.

Main purpose is to get you started fast and cheap. Hit the deploy button to create your own version of Teini or see a working demo here: https://teini.vercel.app/

Installation

…if you’re not a developer

💡 If you need help at any stage contact me. If you want me to setup Teini contact me as well.

Accounts needed

Running Teini should be easy and for free. Although you’ll need to create some accounts to make it work:

Account
Description/What it does
Link

Vercel
Deploys and keeps the actual website running. It’s awesome.
https://vercel.com/

Stripe
Provides the whole checkout and payment infrastructure. It’s awesome, too.
https://stripe.com

Github/Gitlab
The place where the source code is stored. Awesome – yep.
https://github.com

🤑 While Vercel and Github should be free while respecting their fair use policies, Stripe will cost some money. Fortunately, these are transaction-dependent.

Environment Variables

To configure your store you need to set some meta data and credentials upfront. The following data needs to be set:

Environment Variable
Description
Default

STRIPE_SECRET_KEY
The Stripe secret key: https://stripe.com/docs/keys#obtain-api-keys

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
The Stripe publishable key: https://stripe.com/docs/keys#obtain-api-keys

SHOP_NAME
Will show up in the browser tab and in the seo config.

SHOP_CONTACT
A way customers can contact your. Could be an email or a Twitter handle. Will show up in the footer.

SHOP_HEADLINE
Will show up on the index (start) page and in the seo config.

SHOP_SUBHEADLINE
Will show up on the index (start) page and in the seo config.

Once you got everything together you can finally deploy your own version for Teini:

Usage

Once your store is up and running you definitly what to add your own products. Here is how to do this:

1. Access the repository

To make changes you need to access the repository and change the actual source code. To do this you’ll need the following tools (all of them are for free):

Git -> https://git-scm.com/
VSCode -> https://code.visualstudio.com/
Prisma Studio -> https://www.prisma.io/studio

Once you got everything installed open a terminal and type the following command:

git clone https://github.com/username/reponame

💡 The repo url depends on your choosen service, username and repo name.

2. Make changes to the product database

Open Prisma Studio and open the product.db file. It is located at the root level of your repo and called products.db. Once the database add, update or delete products.

3. Add product images

Teini holds all its static files like product images in the public folder. Product images in particular are store under public/prodcuts/[productid]. To add product images you just need to add a folder with the corresponding product-id (see your products.db) and put all product images in there.

💡 Google recommends using the WebP as image format. You can convert your files here: https://cloudconvert.com/webp-converter

3. Make changes to the store itself

Open a terminal and navigate (cd) to your local repository copy. Run this command:

code .

Now VSCode should open and you can change what ever you want.

4.Push your changes

To make your changes visible you need to run the following commands:

git add .
git commit -m "A message describing your work like; Added images for product 1."
git push

If your go to https://vercel.com and open your project you should see that a deployment is started. If it is successfull you customers can see your changes. If it failed feel free to create an issue: https://github.com/zeekrey/teini/issues/new/choose

…if you’re a developer

Clone, Edit, Push. Do what ever you want.

Notes

Credits for the used photos:
Product photos
Photo by Boxed Water Is Better on Unsplash
Success Page photo
Photo by Jason Dent on Unsplash