https://github.com/MaximBuz/heazy-svg-creator
A design studio for vector illustrations. Built with React, Node and GraphQL.
https://github.com/MaximBuz/heazy-svg-creator
design react svg svg-animations
Last synced: over 1 year ago
JSON representation
A design studio for vector illustrations. Built with React, Node and GraphQL.
- Host: GitHub
- URL: https://github.com/MaximBuz/heazy-svg-creator
- Owner: MaximBuz
- License: mit
- Created: 2022-04-26T17:18:05.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T08:35:43.000Z (almost 3 years ago)
- Last Synced: 2024-07-31T19:50:35.676Z (almost 2 years ago)
- Topics: design, react, svg, svg-animations
- Language: TypeScript
- Homepage: https://heazystudio.com/
- Size: 54 MB
- Stars: 164
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![LinkedIn][linkedin-shield]][linkedin-url]
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://heazy.studio/)
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.
### Built With
heazy.studio was created by using the following awesome tools:
Frontend:
* [TypeScript](https://www.typescriptlang.org/)
* [React.js](https://reactjs.org/)
* [React Query](https://react-query.tanstack.com/)
* [Chakra UI](https://chakra-ui.com/)
Backend:
* [TypeScript](https://www.typescriptlang.org/)
* [Node / Express](https://expressjs.com/)
* [GraphQL](https://graphql.org/)
* [Prisma](https://www.prisma.io/)
* [PostgreSQL](https://www.postgresql.org/)
Authentication, Image Storage and Analytics:
* [Firebase](https://firebase.google.com/)
## 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
```bash
npm install
```
(fyi: due to the use of Chakra UI and the recent update of React 18, you will receive some npm warnings)
```bash
npm start
```
### Backend
```bash
cd server && npm install
```
```bash
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
```bash
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
```bash
npx prisma migrate dev --name init
```
```bash
npm run start
```
Now you should have frontend and backend up and running!
## Contact
Maxim Buz - [LinkedIn](https://www.linkedin.com/in/maxim-buz-17a2a717b/) - mbuz.maxim@gmail.com
Project Link: [https://github.com/MaximBuz/heazy-svg-creator](https://github.com/MaximBuz/heazy-svg-creator)
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/maxim-buz-17a2a717b/
[product-screenshot]: ./github-screenshot.png