NoNet banner

NoNet

14 devlogs
45h 51m

Updated Project: I have added a new login page
Improved the css for responsiveness
I also added the phone's menu
And overall I polished it by adding this cursor shape
So It's a huge e-commerce project i have spent months on it but i haven…

Updated Project: I have added a new login page
Improved the css for responsiveness
I also added the phone’s menu
And overall I polished it by adding this cursor shape
So It’s a huge e-commerce project i have spent months on it but i haven’t polished it yet it still got some things that are a bit off i’m not a frontend designer so most of the designs i have spent countless hours trying to get them right

This project uses AI

So I can’t remember exactly but I definitely used chatgpt to debug my code and write some stuff for me I edited the code they give me and I have used bolt to create the order cards

Demo Repository

Loading README...

Sub

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


0
Sub

Shipped this project!

Hours: 27.46
Cookies: 🍪 629
Multiplier: 22.92 cookies/hr

I have Changed the login screen and added a preloader
worked on improving the stuff overall
I have also added an animation for the website homepage and notification when you press the add to cart button

Sub

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 :)

0
Sub

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

Attachment
1

Comments

Mehmet
Mehmet 12 days ago

Nice!

Sub

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

0
Sub

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

Attachment
0
Sub

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 sad-cat-thumbs-up
  • 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
0
Sub

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 sad-cat-thumbs-up

Attachment
0
Sub

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

Attachment
0
Sub

Shipped this project!

Hours: 15.77
Cookies: 🍪 204
Multiplier: 12.92 cookies/hr

I’m really thrilled because of this project like literally the landing page if i tried to build it again i don’t thing i’ll be able to. it just happened by accident. This project is probably one the biggest thing i have worked on and i learned a lot about it like most of my career experience is literally in this project.I hope you enjoy it! :)

Sub

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

Attachment
0
Sub

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

Attachment
0
Sub

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

Attachment
0
Sub

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

0
Sub

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

0
Sub

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 :)

0