Technologies I used to Code My Backendless App

voidpet.com/
I'm reviving my Discord and will be talking in it: / discord
#benawad #voidpet #VoidLog
----
Follow me online: voidpet.com/benawad

[@CwithinC]

Hi Ben, thank you for sharing this. I am an ex-product manager aspiring to break into software engineering / web dev. I've spent my first year full time learning how to code with Harvard CS50 and The Odin Project. Thank you for sharing this project and how you are going about building it. I want to build a similar app, so this video gave me a lot of direction on how and where to start. Wishing you continued success!

[@jrtm9632]

Backendles???? Okay let’s start throwing books out the window

[@theairaccumulator7144]

I give it 1 day before a hack comes out

[@simplyzetax]

@@theairaccumulator7144 I think its been online for a couple months now

[@jrtm9632]

@@simplyzetax I’m guessing he meant local hacks, but unlike GTA I don’t think this will get the attention of giga chad developers to figure out hacks. Although I admit, a change in the svgs to a giga chad path would be kinda funny to see.

[@OM-bs7of]

It's not literal, backendless / serverless is a misnomer

[@Github_tech_with_ty]

You've never heard of cache?

[@JayPoncedeLeon]

Really great Ben! I've thought about using React Native for a project before, and it's great to see your experience and get a peak at some of the underlying code with your thoughts!

[@KevinNaughtonJr]

really love hearing about the behind the scenes of development of VoidPet Ben can't wait to hear more in future vids :)

[@aseemlalfakawma5084]

Great work Ben! Love the insight you provided, really inspirational. ❤

[@freedomextremist7921]

If encryption is done client side it sounds like every state can be edited if you just locate the private key.

[@bawad]

🤫

[@geeshta]

API called datetime can also be cheated with a proxy

[@bawad]

@@geeshta 🤫

[@AdisonCavani]

Hello from my rooted android :)

[@alexandrepereira6522]

Hey Ben, at a first glance your SVGs looks quite compact but I'm pretty sure you can shrink the file size even more, I personally recommend the svgo library. You can also think about doing some SVG sprite strategies if needed. I noticed that the background/garden have most elements repeated, you can also think about something to optimize down this path.

[@traniel123456789]

SVGs are great. I have recently been working on an industrial scada system and ended up using SVGs to render live LIDAR data in the HMI for sensor calibration. It works surprisingly well.

[@JEM_GG]

Loved following this process Ben! Looking forward to trying the game out

[@drewbird87]

Ben! Thank you for sharing the process and the tech. 🙏

[@addcoding8150]

Funfact: "zustand" is just german for "state". Same for "werkzeug" which is "tool-box". Idk why it is a thing but I'm always impressed how many names are just german in the end

[@kilianendres7976]

War halt wieder einer super kreativ haha.

[@zachsanchez1644]

I love how half of these comments are legitimate suggestions / improvements. Building in public can attract so many helpful people! Great video covering your development/process regarding your app!

[@LorenzoLeonardini]

For the pet svg problem and the issue with having too many color combinations: you could export different-colored elements in a separate image, rendering them in layers. There should be some way to tint them. So you only have a handful of images in your app package, the only issue is that when you render a sprite you are actually rendering 4/5 images one on top of the others, but that might bet not that big of a problem

[@hipno3477]

I came across this problem as well in a unity project recently. The way i solved it was to use a single image/sprite and put every element i wanted to adjust in realtime either in the red, green, blue or alpha channel of the image. That way i could just tint each channel to a different color in a simple shader. Don't know if that approach would work in react but it's a pretty clean solution!

[@traniel123456789]

CSS allows you to hue rotate the images very easily.

[@JEsterCW]

@@traniel123456789 but react native doesnt uses css and thats the problem

[@wadecodez]

The problem is probably happening because he’s trying to persist too much data at once. He should remove objects and dom elements when they are not visible. Baking images would not only make it harder to update the layout but it adds a whole layer of complexity because images make separate network requests.

[@deecewan]

Yep react native does have tint - doing it in layers would also mean you still have individual pieces to animate too.

[@pastenml]

Thanks you for this Angular/Ionic tutorial. I had no idea you could write Angular apps in this way.

[@abrahamjones3635]

I have had void pet for a month now and have enjoyed it so far, however I have a few suggestions. 1. Don't force the player to name aver pet they find, it gets annoying fast and players will eventually run out of good names. Naming your pet should be an optional thing instead. 2. Display the users void matter somewhere on the screen.

[@turklerburada]

There is a random name generator on top right corner on name screen. I agree with the second one.

[@Sprinkledsprinkles]

Yeah im tired of calling them things like "hydrogen monoxide poisoning"

[@ayodeleabayomi3024]

i think the idea is make it more deliberate..

[@anshnanda]

random name generator for sure

[@Uchiha-_-_-]

I just name them whatever the emotion is

[@mugen153]

@bawad, two optimizations on concurrent display of SVG-s on screen: 1. Render blank components in place of SVG when it is outside of viewport. With grid item lists you don't have to check every item, using math should do the trick. 2. If you would still need to convert to images, I am sure you could generate PNG assets from SVG-s at runtime with some library when you know the device screen dimensions (so that PNG-s are of an appropriate resolution for every device). You could do this on first load and cache the images to the device storage.

[@wadecodez]

I would save the PNG rendering for absolute worst case scenario. Caching images is a huge pain because it makes separate network requests and he looses flexibility to manipulate svg paths. Selectively rendering content and manual garbage collection is the way to go.

[@mugen153]

@@wadecodez Why should caching (storing) the images to the device (local) storage make any network requests at all? I agree with you on SVG paths manipulation though.

[@TMinusRecords]

The let go button looks like a positive action rather than a negative one with the star ball icon, to the point where I misread it as "let's go" and took it to mean they spend a while at a park or something and then come back. Permanently releasing pets should require more of a deliberate action, and be framed negatively

[@damionmurray8244]

There are a few strategies you can use optimize your SVGs. For example, plotting the vertices that define the paths of your keyframes on a grid so that their coordinate values fall on whole numbers actually speeds up rendering. You could probably reduce the number of points your SVGs use as well. There are programs that do a good job of optimization, but if you can get a vector artist that knows how to do that manually they are likely to do a better job (for example, vector tools typically create circles using a cubic bezier curve with 12 control points, a vector artist with an eye for optimization can create near perfect circles using 9 control points). If you ultimately opt to migrate from vector to raster graphics go with PNGs. If you're clever about it, you don't have to generate thousands of variants of a Void pet. Break each Void pet design into component sprites that group/isolate shapes with the same color (think layers in Photoshop), then whip up some logic to apply palette swaps to each grouping (pretty easy to do, just change the R,G,B color channels and leave the Alpha channel alone) and then make a composite for a given variant.

[@TheATOMICGOBLIN]

Thanks for the video Ben, I recently fiddled with expo and had the same conclusion. Much better than it was in 2019!

[@CardinalHijack]

Thanks for sharing. Inspiring me to get back to my side projects

[@rog0079]

Great project ben! A request, could you please create a react native playlist with advance topics like RecyclerListView, Reanimated, Skia and other advance stuff, it would really help us out here! Anyway great job!!!

[@gosnooky]

Damn... that node_modules directory must have its own gravity well.

[@FoodElitist]

Pls more insight videos Ben 😊 I really like that you show production code. You should be proud! What about the business behind voidpet?

[@johndorian473]

I love watching these log videos even though I don't understand the techy stuff

[@IvyCatholic]

Ben, thanks for this video and all your great content. I made an app also with RN and expo called "TriviaLinked" and your discussion of animations/sounds is going to be really helpful as I try to improve the game! Thank you thank you thank you!

[@bagusamrullah4371]

So Impressed by how React Native can be used to build project like this

[@lolnein7216]

I think discord on phone is react native too

[@feuerherz007]

​@@lolnein7216 and it sucks ... maybe i just hate the ui and how not smooth it is

[@SogMosee]

and tesla app

[@rickharold7884]

Super cool. Thanks for sharing ,love it

Nice, coding an app with Expo and React right now, glad to see you recommend the same things I'm using 👍

[@adivmt]

Can we have a firebase notification with expo cli app ?

[@ascourter]

Looks great! The SVGs definitely look crisp. Downloaded the app and works well on a Pixel 6!

[@chabonrandom]

Hey Ben, awesome as ever! Can you post a video with your though proccess of your design ideas and implementations? That would be super cool! Liked as always, keep it up!

[@kartikgarasia5685]

Projet looks great ben! Why you choose not to use react-lottie for all the SVG animations? With help of after effects you can create even complicated animations for the pets. Also you can manipulate pet colors at runtime so that you can create even more variations by just looping them with different color values.

[@bawad]

I like this idea

[@theairaccumulator7144]

Yup you can just have a base PNG and then overlay colors on it. Also unity would've handled this super basic game extremely easily while running on even the shittiest phone, classic web dev trying to make everything web moment.

[@ShighetariVlogs]

@@theairaccumulator7144 I enjoy the concept of re-inventing the wheel! Your comment is reminiscent of soviet era logic *slips off sassy pants*

[@rake1840]

@@ShighetariVlogs you single?

[@ShighetariVlogs]

@@rake1840 nope, dating a data science queen 💜 I am lucky & blessed 🥹 maybe if she sees my KZbin comment history I’ll become single tho 😂

[@Menta_]

"zustand" is a german word and my brain had to double check when you pronounced it - thanks for the insight into your stack btw :)

[@vezquex]

The radial menu is a nice touch.

[@Liam.Stevens]

Thanks for info. What tool did you use to draw the SVGs (output in svg format)

[@user-bg9fg3ug6z]

That's amazing work!

[@benrobo8]

Great video Ben.. I saw you made used of the `tw` package. What the difference between using that and the default tailwind setup a d config for react-natjve app? Isn't it the same, or is there any difference towards using that package?

[@Mithrandido]

Amazing work Ben. I am doing closed testing on my startup app with React Native. Just curious, what did you use for the notifications?

[@saeedfarhadi1773]

This is just great. One small issue I had with the app is when I wanna close a menu (like the main menu or the one for nourishing the plants) I instinctively tap outside the menu (on the dark overlay behind it) but that doesn't close it.

[@bawad]

Adding this now

[@maggitrymbill]

Highly recommend react-native-skia instead of svg's for animations and vectors in general. Sure, it's not officially production ready but it's damn stable, stays away from the js thread and it's relatively easy to convert svg's to it.

[@nikbivation]

thank you for sharing this!

[@fnfal113]

Damn, great to see React Native has been utilized for this project which I wasn't expecting since its a game, huge fan of react native and this inspires me soon to make more apps using react native

[@captainnoyaux]

yup I took the same choices regarding cheating some aspects of my game, if it becomes a massive hit you can still correct the weak parts (if you keep track of them, or just know which part is weak). Most of the users won't try to cheat the system

[@henriquematias1986]

Thanks for the video, really cool stuff... How did you / expoert the animations for the SVGS?

[@SuperEssenceOfficial]

lol the steam effect is like a default particle system in unity. would take 5 minutes and no code

[@ndukachukz8067]

please make a video on how you build measurable optimized mobile applications and how you would improve or apply measures/logging and optimizations to existing applications

[@BitCloud047]

Very cool man! Just downloaded it!!

[@windmaomao]

Thanks for the video, I enjoy watching it Ben. Just a quick question, why you say backendless, which part I need to store information? I don't think I got this part. You mean registration?

[@javierpizarroortega1891]

Congratz on the project ! Looks pretty dope ! Think you will be making tutorial in the future, or no time? hahah Greetings from Chile!

[@wlockuz4467]

I got a couple of questions, Did you look into Flutter before you decided on the framework? Have you tried Rive for animations?

[@rakebullet5200]

Yes, it would be interesting to know if you looked at Flutter at all.

[@rakeshpk4991]

Ver Helpful. Thanks 🎉

[@bripbrap]

stupid idea... could you not have a local build step on first launch that exports all the svg's at the correct scale to a texture atlas or something?

[@DannyLoera]

Am I correct in assuming the graphics are all done with UI elements? If so, why did you opt for this instead of using a graphics library?

[@MirkoSaugo]

I suggest u to set the paths and baseUrl options in the tsconfig file in order to have a clean import inside the component

[@SiOfSuBo]

You could use the api call to tell the UTC time on game launch so you cant cheat and go to the future in any part of the app, not only the battle pass

[@krishgarg2806]

i was thinking similarly, like on launch just check if the device time is around the API time, if it is, then Date.now() can be trusted, otherwise use the api.

[@Michko_]

but he said that he does not care if people cheat, he only cares about the battle pass

[@JoshuaMcFarland]

This works if progressing while offline isn't a feature. It kind of sounded like from the video that offline was though.

[@MyzIcyBeatz]

Thank you Ben

[@jakescript_]

Hey Ben, just wanted to say however data is being stored locally, if the app data is transferred to a new device. All user data is transferred as well. My girlfriend got a new phone and was happily surprised when she saw that all her pets saved transferring her data to her new device.

[@bawad]

Oh sweet, didn't realize this

[@MrErdkamp]

Can't you store some data in the Google Play / Game Center account? I Never used it but seems that some games use it to store state between devices. App is looking great!

[@kymzTech]

You could make use of Lottie files for the smoking animation

[@geofferyblackard5841]

Thinking about how tool like RPG maker handles animations could you create a sprite map for the pets this single image would house all movements?

[@Cappell7]

What did you use to style the UI? I starting a new large React native project and was wondering what is the best way to style in react native expo. I've seen people use tailwind with native wind?

[@SonAyoD]

Amazing content!

[@ore_bear8045]

Given that the data users store can be sensitive, if you had stored the data in a database /cloud service, do you know which service/setup you would have chosen?

[@alvapazz]

Love it thanks

[@Colstonewall]

"ENTER THE VOID!!!"

[@jatinhemnani1029]

Really great Ben

[@Narc0YT]

For the colours and pets, what about using a PNG and then creating a layering algorithm to apply the separate colours to specific areas? Idk, maybe it's less efficient, I guess you lose the possibility to scale the image

[@NithinJune]

I missed watching your devlogs

[@RealEngineer]

Man.. And me that was naming my pets in SQL statements hoping they would align up in the void somewhere to drop your table.

[@mrthinger]

For the trusted time source, someone could still cheat by having their own DNS server point to an IP they own. So you could make the time return whatever you want still.

[@ritikjain4811]

How do you test on different devices? Do you have your own device lab or do you use emulators/simulators

[@jatin_nagar]

You can try reducing windowSize to 3 or 2 to improve performance on terrain screen

[@ayyasudeen3118]

Instead of Async Storage you could have used react-native-mmkv, which is faster. Any reason why you choose Async Storage over mmkv or other packages?

[@heyitspieter]

Hi! What did you use to create the UI layout for the app website?

[@damionmurray8244]

7:10 The SVB joke about SVGs is gold.

[@riolly]

There is no framer-motion equivalent for react native. So yeah, I guess reanimated is the go-to for react native.

[@OverAndOverAndOver]

1:29 "well, I take a sensible approach and *dont* harvest your data"

[@chefk5]

You could use flashlist instead of recycler list view

[@seaweedglob]

"They're lookin like Silicon Valley Bank" 😂 Too soon dude

[@evpn]

Is it possible to render SVG to image buffers on the fly for menus where the pets are static?

[@lolotronop]

It sounds like you are using the Adobe voice enhance ai thingy. Nice! Much better then being stuck with a roomy recording

[@maskman4821]

Pretty awesome, this is a professional game, you did a great job 👍😘😀😍

[@yerneroneroipas8668]

not the silicon valley bank dis at 7:10 lmao

[@tabah9028]

As a German it is always funny how "Zustand" gets pronounced

[@lukaswerner4390]

How's the build experience on expo? Have they made local builds possible yet?

[@FunctionGermany]

couldn't the time API thing be easily circumvented by using a local DNS and installing self-signed TLS certs on the device?

[@69thSpaceMonkey]

I'm curious what happens if someone buys the in-app bundle but then deletes the app at a later date, does the user lose the in-app purchase benefits when they reinstall the app?

[@_chappie_]

Wouldn't decompiling the app reveal your encryption key though?

[@Corythehausbaus]

Ben can you talk about how to get into backend . If I were to build my own website and host it somewhere

[@tom-moroney]

Can you make the haptic feedback less aggressive. My phone practically jumps out of my hand every time I click a button. If you could just make the strength of the vibrations weaker on Android, that would be great.

[@mtnrabi]

Nice cover!! Can you explain how do you track on errors users get and monitoring in general? (Since there is no backend)

[@Hiro2k10]

Check out RN Sentry

[@m1thrandir]

What about FlashList by shopify instead of recycler list view?

[@while-loop]

Revenuecat is a godsend

[@EndoTheBear]

What about a way to connect the apps to the web browser game so you can do all the functionalities you could do in the web game with the pets from the app and vice-versa? 👀

[@itsanishjain]

Best dev of our time

[@juangutierrezgutierrez4711]

Is that the default vs code theme? Or what is that?

[@aniketjadhav2569]

What have you used for designing UI/UX?

[@quickmaths4762]

You said the app is an offline-app. But in the end you said you make an API call to the time API. So it‘s like 95% offline?

[@StephanedeMatos]

I guess you have to be online to purchase stuffs in the store

[@quickmaths4762]

@@StephanedeMatos Yeah true. Probably requires some extra code to check whether the connection succeeded and react accordingly if not (don't keep trying to send requests, just display "no internet connection")

[@mostafaelkaramany1363]

A piece of advice that helped me in my React Native projects: use a module resolver.

[@readysetgo7988]

Did you consider a JS game library like Phaser 3?

[@neociber24]

For what you said sounds like while the project grow React Native may not be able to handle it.