How did you manage to make those pages in react? Especially the quizzes?
My Workflow
So I wanted to share my workflow here incase anyone else had questions to the tech stack, the way I've started this journey.
I start all of graphic design/UI/UX work in Figma. They have a new auto-layout feature which is a lifesaver when it comes to automatically generating flex boxes. But there needs to be user testing included with the design. A great place I found to post on Reddit asking for user feedback. The courses looked really boring at the start and people where honest with me (they were just markdown files I was rendering see Figma below for it). Then what I did was post that on reddit r/design_critiques for honest feedback. People will always always tell you when you've done something stupid. For example the first course had spice as difficulty... Why the fuck did I do that?


Then you take that design and past it on the frontend. I'm using react so everything is modular. Lets me add new quiz types pretty easily. For the backend I'm using Firebase since it's easy. I don't need to setup a Postgres db, or deal with any of that bs. Drawback is it's not super efficient and can be laggy. However - no one gives a shit if you've got a super cool tech stack. The user won't ever see it. So fuck it.
So now you've gone from design -> feedback -> frontend + backend. The last few steps once you've got something working is to get feedback again. Then go back to the design stage. For example - end of quiz animations:
Feedback :

Design frontend update:

Feedback from the same user:
So just a ton of quick iterations. Also I find it you tweak it for your users the retention from that user increases. My retention is at 16 minutes right now which is really good. The quizzes were just a solution to a problem I was having, the users weren't engaged so let's give them something more active to do.
You are using free version or paid version ? Do you have live web feature available yet ?
Yep using the paid version - the last few months have been so much more efficient thanks to gpt. Just writing shitty boiler plate that would've taken forever (but I know I could do them). A good example is I had text boxes that I was generating for the content using python PIL library. But it doesn't have a built in rounded corner feature - bring out GPT4 and tell it you need a function to generate border radius using pie's in python and boom it does it for you!


It's a smaller cosmetics tweak but it would've genuinely been a pain in the ass to do myself.
Next Post - The importance of Collecting data to find where I'm losing customers + Returning to stable diffusion