Improvements & Architecture

✦ Added a loader for the admin page and orders page
✦ Changed and imporved the dark and light mode css (It’s still not the best)
✦ I changed some response messages so stuff don’t break at the front end
✦ also there was a small problem in the backend regarding the token auth

Fixes

✦ i fixed a logic problem when checking out
✦ fixed a problem with the navbar animation at the login page
✦ Fixed the home page animation so it runs only when the user refresh

Changelog

• feat: add loaders, homepage animation & better login

Improvements

✦ I have upgraded the checkout page and made checkout easy to follow
✦ changed the colors of most of the button
✦ I added an animation to the homepage
✦ added a notification animation for the “add to cart” button
✦ also removed a whole section that was just empty i was gonna put info about the website in there but it’ll be for future updates

Fixes

✦ fixed a problem with overlapping navbar panels
✦ made so the user scroll state is saved

My comment:

I just improved the whole thing overall and fixed some stuff someone told me about :)

Animation

✦ Added a preloader when opening the website with dynamic params
✦ fixed my cart bug i had to refetch and cache when user logs in
✦ polished the css for someitems

COMMIT

#NoNet29ea8bf77042e490e92ba6e4b2ce436121fdb436

Huge improvement

✦ Changed the whole login-signup page design
✦ I added a scroll trigger animation using gsap and the hardest part was getting everything working together and trying to position the phone was quite a difficult part too
✦ what made me change the login page was that i didn’t like how to looked and it wasn’t working well on safari because safari struggles with css layout changes and messes it up
✦ and actually getting the Quaternion rotation to work was hard too a lot of gliches and unnecessary stuff that happened
✦ I still have no idea what is Quaternion rotation
✦ downloaded some fonts and tested them until one clicked

Fixes

✦ i spent a lot of time adjusting the css for the navbar and the text in there and having to change the login page not create one from start was even harder
✦ I spent some time trying animations and rotation for the phone i stuck with this one

Fixes

✦ My project now works on Safari since they use a protocol that prevents me from saving auth cookies ;) )
✦ I built a jwt authentication system in addition to my old session-cookie auth system
✦ i tried fixing an animation problem on safari but couldn’t so i might change the animation
✦ I’m using a website online to test my website on safari browser which is great to debug but im still not sure if my website fully works on safari

Instruction code

• I added this to guide people to the button functionality since no one knew how to use the button i got rejected a lot for this
• I deployed the project to github pages
• I also used gsap to do the text animation
• added a glow effect on the button it was pretty hard since i hate css and designing in general
• I’m trying to make things intuitive for whoever will use this i hope it all good now

Architecture

✦ Added cash on delivery button
✦ handled a backend logic error
✦ fixed the order page buttons

Updates

✦ updated some css in the homepage

I keep getting rejected for small problems but i hope the project will be approved soon

Edits

✦ I edited the home page css because it wasn’t responsive when you toggle between categories
✦ I added the Adminstrator access code field and handled the backend i had to fix this more than one time because i forgot to remove the displayed attr from the input element loll
✦ Added more text to the mouse cursor hover animation

I tried to add transition between pages i had it in an old project i tried to integrate it but failed

Nothing much (25 minutes)

✦ I have added more texts to be visiable inside the blur animation for the mouse cursor hover i keep doing this a lot lol

Fixes and improvements

✦ i added this menu dropdown for mobile phones

✦ also fixed a problem with logic behind the animation in this dropdown

✦ i added more texts to the cursor hover
✦ I had to fix some stuff in the menu drop down js file i keep them in an array of objects so i had to add some more properties to them so it’s convenient

Deployment

✦ I deployed my backend to heroku using the cli
✦ Pushed my new version to github pages

Fixes

✦ fixed the footer positioning in all pages i actually added it to the other routes because i only had in the main route
✦ i fixed some bugs with ordering and admin dashboard
✦ I also thing something is quite wrong with the payment method the cod and vodafone cash don’t work well and sometimes makes the backend break

improvements

✦ i added lights to the scene and adjusted the position for it
✦ I made sure the html form stays on top
✦ It wasn’t easy since i haven’t used three fiber a lot
✦ I finished the transition and kept changing things
✦ my idea is kinda there but still im not satisfied i might change things in the future like the bakcground and stuff but whatever
✦ i also added a footer with this font i like it looks great i think it has a cool sense to it

Learning new tech

✦ I know it doesn’t look good but i’ll try to make the transiton controlable with a button or something
✦ I don’t like how it looks but i’ll settle for it for now
✦ I used the width and height property of the login form to make this fill animaton
✦ I’m working on the login and signup page im trying to create something unique
✦ i have this vision in my head that’s what i want to do.I’m learning a lot of stuff all at once (react fiber, gsap, and 3D things in general)
✦ i created a text file where i’ll keep my tasks written down in the future so it’s easy for me to follow up with what i need to do

Development

✦ I have added this little cursor texture kinda like an iphone theme
✦ I downloaded this iphone .glb file online and added it to my scene i’ll add lighting and change the scene background and i hope it turns well
✦ im experimenting with 3d to make a 3d login form where the phone comes at you to login like a transition i’m watching a yotube tut soon just to figure out how to make this thing happen :)