An open-source platform for creating and sharing QR code designs.
Introduction · Deploy Your Own · Setting Up Locally · Tech Stack · Contributing · License
Qriginals is a platform for creating and sharing QR code designs. See what others have used as prompt and parameters and use it to create your own unique art!
You can deploy your own version of Qriginals to your preferred hosting platform. I prefer Vercel for this.
Qriginals is built on the following stack:
- Next.js – frontend/backend
- TailwindCSS – styles
- Supabase - database, authentication and storage
- Replicate - qr code generation
- OpenAI - prompt generation
- Vercel - hosting & analytics
- Upstash - ratelimiting
- Stripe - payments
- Sharp - image processing and thumbnail generation
To set up Qriginals, you'll need to clone the repository and create an account for each of the used services and set the environment variables. Stripe and Upstash are not needed for the local development, you just need to set a dummy value like "xyz" to the environment values or t3-env will throw an error.
With Supabase you have the advantage that you can set it up locally without even creating an account. You can follow this guide to do so. After you've set it up and started it with supabase start you will see different keys in your terminal:
API URL: http://localhost:54321
GraphQL URL: http://localhost:54321/graphql/v1
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
anon key: [...]
service_role key: [...]
You need the API URL, anon key and service_role key.
Go to OpenAI, create an account, create an API key and note it down.
Go to Replicate, create an account if you don't have one, create an API key and note it down as well.
I've used this awesome starter for the configuring stripe with supabase and nextjs. There is a much more detailed guide than I could have written here, so I just recommend you follow the steps in the Configure Stripe section there.
Upstash is used here to prevent malicious acts against the API. A user cannot make more requests than the defined interval in the API route. You can see examples for it in the /app/api/v1/... folder. To use it you need to go to the (qstash console)[https://console.upstash.com/] and create a database. Note down the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN.
Finally, copy the .env.local.example file and remove the .example part (should be .env.local). Now you can set all the collected environment variables and you're ready to go!
OPENAI_API_KEY=
REPLICATE_API_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=
NEXT_PUBLIC_SITE_URL=
Here's how you can contribute:
Open an issue if you believe you've encountered a bug. Make a pull request to add new features/make quality-of-life improvements/fix bugs.
Licensed under the Apache-2.0 license.