Devlog 5

Since the last devlog, I’ve gotten a lot done. I’ve built a major feature of my app: the Pixel Editor.
It has the following features:

• Drawing:

1. Pen
2. Eraser
3. Fill
4. Rectangle
5. Circle
6. Line

• Undo/Redo
• Choosing from preset colors or adding your own
• Zooming
• Showing the original texture in the background
• Toggleable
• Displaying the texture you’re currently editing as a path in the navbar

Next, I’ll create the dashboard where you can select which texture you want to edit and filter or search for them

The Idea (Devlog 1)

So I recently (like 2 weeks ago) I saw on YouTube a post about Freepik Spaces. I really liked this idea of having nodes that you can connect to something bigger and generating the result of 1 or more nodes with ai. like I head this vision in my head where I put in like an image and and text. that makes another image. with that I connect to I say more images. and then I have like multiply images and texts and idk and then I connect them to a presentation generation node. yea, I want to make like custom nodes. I think I can do it so the ai model gives back json that I can than put into the node to display it. So I think this is pretty cool just putting something in and it gets bigger and bigger and then there is a result, and then you can just change the beginning and the whole result changes!

What I did ( in almost 11 hours!)

I wanted to first make the node editor before doing any of the ai stuff. so I researched a bit on node editors react (because I use that for my project). I found react flow and its really like big and has many features. but mhh I was thinking its not that what I want. because like then I don’t really know how it works and how I can integrate my ai. so idk I just had the idea to make my own node editor. I started with a simple doted background. added moving, zooming. then I added my first node and made that you can move it to and it also scales and moves according. with the background canvas. then I added connections between which was pretty tricky to get right.

What I want to do next

Next Devlog I want to have integrated some ai like for text generation out of to text input nodes. I want to use hack club ai. which is I heard free for students.

Devlog 3
Added Final Touching in the Design an wrote the README

Devlog 2
In this Devlog i added the whole logic behind my App. I used the Hackclub AI and made a vercel serverless function to call it. to secure it from others i made my site authenticate via jsonwebtoken so no one other can acces the ai. then i made some final touches with the design and added some dynamic scaling for smaller screens

Devlog 1
added the UI. I used a prebuilt block I found that I needed to modify so it works with my app. It’s a bar-like object, and when you click it, it goes to full size, and you can enter your code. You can submit it using Ctrl + Enter or clicking on Enter in the top right. I also added a simple example code (in Java because it looked the best as a placeholder) to let the user know it’s really a mode for code.

Devlog 4 (not Day since I wasn’t working every day)
I created the Auth page today so you can log in if you want to make an account. But to use my app, you don’t have to create an account. I used Supabase for the backend. I will make signing in with socials soon, but at the moment there is only login with OTP. This whole process took me like 3.5 h because I had never done this before. But I learned so much through this process! Tomorrow (or the day after that, idk), I will make the dashboard where you will create your pack and start with the editor. I think I will cancel the Datapack feature because only the Texture Pack feature is already really much, but idk yet; maybe I will do it.
I’ll see you at devlog 4!

Day 3
Today I further build my Timeline component on the Landing Page. I modified some code of the prebuilt basic timeline component that I downloaded because it didn’t live up to my expectations. I really like this thing about React: it’s made out of many components that I can reuse.

Day 2
This is the Devlog for Day 2 which was yesterday because i forget it yesterday.
So didnt do that much that day in code, but was really bussy creating a Logo for my Project. You can see it in the Attachment. Then after that i implemented it into my Website which took me some time because i learned how to put .svg files into an React Component.

Day 1

I actually already started a few days ago but forgot about creating my Project here and tracking time. So this is like a little recap what i already did. So i set up a new Vite Project and deployed it on Vercel (Demo comming soon). I installed shadcn so i can get some nice elements to make i site look beautiful. Since i’am fairly to Web Development it took me some hours to make this (i think) good looking landing page. Today started mading an addition to the Landing page in style of an Timeline like component how the Pack creating works. I hope i will have it finished tomorrow and then i will send and Image of it!