Skip to content

A design studio for vector illustrations. Built with React, Node and GraphQL.

License

Notifications You must be signed in to change notification settings

MaximBuz/heazy-svg-creator

Repository files navigation

LinkedIn


Logo

heazy.studio

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

About The Project

Product Name Screen Shot

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:

Backend:

Authentication, Image Storage and Analytics:

(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 - mbuz.maxim@gmail.com

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

(back to top)

About

A design studio for vector illustrations. Built with React, Node and GraphQL.

Topics

Resources

License

Stars

Watchers

Forks

Languages