heazy.studio

Generate stylish SVG design assets with ease.
Developed by Maxim Buz
YouTube Showcase

About The Project

Heazy let's you generate cool SVG designs for your website projects (and presentations, if thats your thing). Easily generate unique and funky vector graphics within minutes right inside your browser, without having to learn any advanced tools like Adobe Illustrator. Create a user account to save your very own design templates and explore the desings other users have made public.

You can download any design in PNG and SVG, or copy code snippets for your JavaScript or TypeScript React projects.

(back to top)

Built With

heazy.studio was created by using the following awesome tools:

Frontend:

• TypeScript
• React.js
• React Query
• Chakra UI

Backend:

• TypeScript
• Node / Express
• GraphQL
• Prisma
• PostgreSQL

Authentication, Image Storage and Analytics:

• Firebase

(back to top)

Run locally

Firebase

• Visit Firebase and add a new project
• Make sure to enable Google Analytics
• As soon as the project was set up by Google, click on "Add Firebase to your web app" and give it a nickname
• Leave "Firebase hosting" unchecked
• Inside your local repo, go into ./src/firebase/index.ts and switch out firebaseConfig with the new API keys provided by Firebase
• Back on the firebase website click on "continue to console" and add Authentication and Storage to your project

Frontend

npm install

(fyi: due to the use of Chakra UI and the recent update of React 18, you will receive some npm warnings)

npm start

Backend

cd server && npm install

touch .env

• Make sure you have a running postgres server and have all connection information available to you
• Visit Firebase, go to project settings > Service accounts and generate a new private key
• Open the generated file and copy all its contents
• open the .env file and add the following environment variables

DATABASE_URL="postgresql://DB_USERNAME:DB_PASSWORD@HOST:5432/heazy?schema=public"
GOOGLE_CREDS=paste_firebase_full_object_here
PORT=4000

• To setup the database, run the following command

npx prisma migrate dev --name init

npm run start

Now you should have frontend and backend up and running!

(back to top)

Contact

Maxim Buz - LinkedIn - [email protected]

Project Link: https://github.com/MaximBuz/heazy-svg-creator

(back to top)