The project is finished

Changes made:

• Made intro cards responsive
• Made all players section same and more responsive
• Made hof cards responsive
• Made popping animations better
• Fixed gapping issue between hof cards
• Added highest world ranking of second and third players
• Added favicon

I thinks that’s all. I really loved how this website turned out to be. If someone’s reading this. Hope you’re have a great day. ♥✌

The ui got better. Yay!! I have majorly worked on the first-player ui. After writing this devlog I will be making the second and thiird player ui same as the first-player. I really like the dash line along the stats and higest world ranking. Also I added the world ranking cuz there was empty spaces before. It also makes the ui better. Also I have worked on the responsiveness of the website. Now I will fix a bug in the intro animation and also make the second and third player ui same as the first player. Atlast I’ll try to make the img-card also responsive.

Almost done with the website

Changes made:

• Changed images from hero, first and hall of fame section
• Made website somewhat responsive
• Added loading screen

I’m almost done with this project. I’m going to deploy this project now and then I will fix some bugs and try make the ui better. This time the coding was mostly done by the ai because I don’t have much time due upcomming boards exam and also I didn’t know how to make gsap website responsive. It took me a whole day even with ai to make the website somewhat responsive. I also created the loading screen but ai helped me to sync it with the current animations. This is the only time in this project I have used ai so heavily but on looks wise it made almost no difference.

I’m feeling better now. Yay!! This time there isn’t much to talk about. I have complete the third and final section with animations, images, info and stats. Now I will probably work on the achievements section. Rn I’m fighting against time cuz of my upcomming exams, so I’m trying to finish this project asap. That’s all for this devlog. If you’re reading this love you ♥.

I’mm sickkk rn 😭😭. Still I’m trying my best to complete this project as soon as possible because my boards exams are comming.

Here are the changes I’ve made:

• I’ve added back the background color change only for the transition from hero to first section (Very subtle)
• Changed ui of first player info and stats
• Added the info and stats in second section

I tried messing with the first section info and stats but nothing was working so at last I chose white background. Idk if I will change this in the future. I have also added the player info and stats to the section now it’s time for the third section to be completed.

The website is coming along nicely. It’s now starting to look like a website rather than a mess. Still so much more work needs to be done.

Here are the change:

• Added icons to each stat in the first section
• Changed background color of hero section
• Added animation to the secondary hero text
• Changed the font of secondary hero text

That’s all for this devlog. Peace ✌

Let’s go another devlog!! I don’t know how it’s been 3 hrs almost but here we are.

Changes made:

• Added animations to the first player info stats section
• Made the ui of first section player stats better
• Still experimenting with the hero section

The player info and stats section is looking much better than before also I have experimented with the hero section but it still doesn’t look right. I do love the animations in the player stats section. Now I work on making the ui of both hero and player stats much better.

Yoo!! Let’s see what has changed with my project.

• Added player info and stats for this first section.
• Made progress bar component for stats
• Added progresss bar functionality
• Changed the img container to be dynamic.

I think that’s all for this devlog. The img container looks fine on my device but looks bad on others which I need to fix. Also I will add animations to the stats bar which I think shouldn’t be that hard. One last note I am right now working on project under final exam pressure hope I can study and code at the same time. And that’s all. Peace✌

It’s time to lock in now!! Now I am straight aiming for macbook air m5. It sounds crazy with the amount of cookies I have now but I must try. I have changed the idea for the website. It’s going to be a table tennis players stats showing page with stunning animation.

What I’ve changed:

• Changed the different color background to be just plain white
• Changed the hero text
• Added a new pop card
• Slightly changed the timing of cards collasping
• Added a new animation on intro
• Made cards expand and retract on scroll

I’m really happy with how this project is going but time will tell how it will look. I will probably improve the ui of the intro cards by tweaking their sizes.

The was really frustating to figure out and I was going to give up on this project but after giving it another shot it worked somehow. I’ll be honest, I have used ai to figure it out but I’m happy that it just works now. Without the help of ai I wouldn’t have been able to figure it out. Now the hall of fame has horizontal scroll with cards and text.

Hey, I’m really frustrated right now. I have been stumbling across various gsap bugs. I tried to build hall of fame in this devlog but I just couldn’t. I think I need a break from this project right now. I’ll probably work on my futsal project now. I thought I had fixed the card popping animation but now it’s 100% fixed and I commented out have commented out the hall of fame section for now. I have also change the names here and there. Also fixed the xupername text.

Ahh the card popping animation works fine on scroll but bugs out when scrolling backwards. I tried to fix it as best as I could. Rn it does work on scrolling backward but sometimes it stills bugs out. I have also added lenis package for smooth scrolling. Now the scroll feels buttery smooth. Lenis broke the scroll lock during the first animaition but now I have fixed that.

New devlog!! I have made the code much cleaner now. The code was very messy before, I was spamming scrollTrigger every where and wasn’t grouping the same animations. Now it’s much better. Also now I have made it so that when user reloads they scroll all the way on top of the screen and only after the hero animation is complete then you are able to scroll. As I can’t show that using image so I am just going to screenshot the xuxin section and put it here.

I thought I had uploaded a devlog but idk why happened. So let me tell you what happened. Last time I had added the collapsing of images animation on scroll. Now I have done the card popping animation with background color transition between pags. The card popping took some deep thoughts and eventually I got it. Everything isn’t as I want it to be but I will fix that now.

Stared a new project. This project isn’t going to be too intense as the previous projects of mine. I am going to just create a animated website with elements of table tennis cuz I love table tennis. This is just going to be a fun project for me to just enjoy and be more familiar with gsap. I’ve just written the text and images but the animations are looking cool (although you can just see an image). I think I will have fun with this project.

My project got approved and then got rejected which was very weird. The rejection was because I deployed my website on onrender. That’s why I had to change the code for vercel. I first deployed frontend and backend seperately which worked but had cookies issues. I had almost lost hope but while trying to figure something out gemini told me to change the whole format of the code. I was scared but I did it. Now I can happily say it’s running on vercel. In addition I added copy to clipboard button for easy copy of test credentials. Also the marker in the map was not showing I also fixed that. Hopefully now my project will be accepted.

This is probably going to be the project’s last devlog (if the ship doesn’t get rejected). I hope it this project gets the cookies it deserves. I have worked very hard on this project. I have added test credentials for the user to copy and paste in esewa. Also, I tried to implement different images for screen sizes in the hero section but it looked very blurry so I stuck with only one image. I have also finished writing the readme file.

One more step closer to the end line. The main thing I’ve worked on responsive ui. The signup, signin and book game page are responsive. The book game page was hard to make responsive cuz some unexpected things were happening. I was so frustrated but now the book game page looks right to me. Also in production the pay via esewa button takes really long time to work so I added a loading component. I also added different resolution images in the hero section for different screen sizes. That has helped to load the image faster but the image looks very blurry. I will fix that next. Now the website is live. I have deployed the website. You can check out website using the demo link. One last thing i also added a favicon. The website looks almost complete. That’s all now I’ll go and study for my exam tomorrow.

Getting more and more closer to the finish line. I have started on making the website responsive. I have completely made the home page and visit us page responsive. The navbar now collapses into a hamburger menu with a blurred background and also has a transition on opening and closing the hamburger menu. Now it’s time for the signin, signup and book game page to be responsive. See you in another devlog.

Yooo!! I have changed the my bookings ui which now looks wayy better. I really love the code revealing and hiding part. I have also completed the ui of cancel booking which might change in the future. The cancel booking functionality was a little more tricky than I expected. But in the end I made it work. After cancelling I was required to reload to see the change in the avalable bookings section(left section) but now it works fine. Now have started on working on making the ui responsive. Let’s see how does that end up and I think the project is complete after that.

More changes on the ui side. I still don’t know how to make the my bookings section look better but I really like the available bookings section. Already booked section is shown in gray. This functionality was tricky to add at first but i did it. Also I changed the payment box to details and made minor ui changes there as well. I also added guard rail to stop payment initiation if someone is already trying to pay for the same slot. And that’s all. I also wanted to create a admin website but it think it won’t be possible due to time constrains. I will now change the ui of my bookings and make this whole website responsive

This looks much better. Just worked on the ui of the book game page. Now I want to make the ui of my bookings also better. I don’t know how I’m going to do it but let’s see. I also finished the failure page functionality. I also want to work on not displaying or uniquely displaying the already booked slots.

I wrote a devlog yesterday but I think I forgot to click create devlog or something so now I have 9hr 30 min of work to devlog😭😭. So basically I have worked on storing the baokings after the payment is verified. I have also added a pending payment model to store necessary data when initiating payment. The bookings are now displayed on my bookings section. I have also added a 5 digit code generation functionality to verify booking by admin. Upto here I think already wrote yesterday💔. Now I have worked on the success and failure page. I really like the animated icons in both success and failure pages. The success page works but I am still working on deleting the pending payment after failure of payment. I will be working on the ui of the book-game page also as I think it’s not good enough. If you have any opinions please write them in the comments.

Yess I did it!! I’ve integrated esewa payment system successfully in my website. It’s the first time I’ve worked with esewa. I’ve integrated it with signature verification and status verification on the backend side. I also created a payment dialog box when the user clicks on one of the time to book the game. I haven’t still created the success and failure ui. I will be working on that now and also be working on storing the booking data.

Life’s been busy and not much work has been done in the past few days. I have also been demotivated but now I feel like I will gain back my contensistency from now. In this devlog I have worked on the logout functionality and automatic navigation after signup, signin and logout. I have changed the sign in to username after signin and if user clicks their username a dropdown will appear with logout button. And that’s all with this devlog. Now I will be working on something new that I’v never worked on before. Adding a payment system to my website.

New devlog!!! I have worked mostly on the backend side this time. The signin and signup functionality are working. In the frontend I’ve decided to use a apis folder where all the request to the backend will be sent. Also I have created a UserContext.jsx which holds the user data and distributes where necessary. I also created a layout folder for all the pages, mainly to remove the repetitive calling of UserContext while loading every page and secondly for to have the navbar component in only one component instead of every page component I have also worked on fetchUserData functionality. Additionally I have also installed toast to display error and success messages. And that’s all for this devlog. I’m going to add a screenshot of the hero section cuz I mostly have worked on the backend and don’t know how to show that.

I have worked more on frontend. Finished working on ui of login and signup page. Also worked on the ui of visit us page. I’m not completely satisfied with the visit us page. I guess I will be adding something extra in visit us page in the future. I am proud of the map I’ve added using leaflet and openstreetmap in the visit us page. Now I will be working on the ui of book game page. Any suggestion will be appreciated.

Yoo! First Devlog. Have worked on the home page hero section, quick stats section and quick details section. The quick details section still needs some working so that my next priority. I also made a rough figma wireframe to be sure where this will go. Unfortunately couldn’t track the figma time as the wakatime for figma extension was buggy.

I shipped my website and it got rejected. I had deployed my frontend and backend on different URLs. I deployed the website on onrender.com which deploys website in a sub-domain. Due to which the cookie were not being stored properly leading to display no token provided. Now both frontend and backend are served by the same sub-domain. Ig now i’ll ship without issues.

This website is now finally complete finally. This website took a long time to build and has mentally exhausted me in a good way. I just saw some bugs and fixed it.I have also added a favicon to this website. I have deployed this website on onrender. Now I’m going to write the readme file.

This might be the final devlog ig. I have worked on this worked for more than 80 hours. I think now is the right time to end this project and deploy it on the internet. I’m planning to make a new website now but I don’t know what it will be. For the last devlog I have made the habits page and progress page fully responsive. I have tested the website and found many bugs so I have fixed them. If I don’t find anything to work on tommorrow then I will deploy this website and work on another project.

😭😭I forget to devlog everytime. Firstly I have worked on my home page. It is now complete🎉. Then I made the home page responsive. I took some time to make the home page reponsive due to the svg animation not aligning as I wanted but it worked out in the end. Then I thought why not make the auth page responsive. So I’ve made the auth page responsive as well. Thought most of the functionalities have been completed so I started polishing the ui. I changed the checkbox to a custom button with a little glow effect. Added some small changes like logout button closing if user clicks anywhere expect the button. Removed notify input from the dialog. As I thought it wouldn’t be necessary and had found an unexpected bug where the card was disappering when checking the habit. And that’s all for today’s devlog. Now I will be making the habits page responsive.

My exams are finished!! Now I will be able to work on my project more. Some exciting changes have been made since the last time. I have switched package from react-github-calendar to react-heat-map. The new github like calendar is fully functional. A new select button is added which allows the user to see weekly and monthly progress in the line graph. I made ui line graph much better. Now, I’m currently working on the home page. Hopefully it turns out great. Until then peace✌.

It took so many days to write this devlog simply because I forgot and I have my exams going rn. Due to exams I cannot focus on my project fully and also ended my streak in hackatime which was around 30 days. This devlog doesn’t have too much special changes. One major change is I have added transition during page change from home to auth. Most of the time was spent on fixing bugs. Right now I am currently working on adding a github contribution like chart in progress. I also worked a little bit on a svg animation inspired by mindmarket. Tomorrow is my final exam. Hopefully after the exams I will be able to give me fullest to the project.

New Devlog !!! 🎉 Forgot to devlog before so now I have 7h 35m of work to show💀. I though I had no much to show but when I checked the commit messages I realized that I have done some decent work in this 7h 35m. Right now I have exams and it’s hard to manage both coding and study but somehow managing to do it till now. Now on to the progress Firstly I made the delete and edit button work. Added backend routes and controllers to handle them. When editing the same dialog box will appear with data of the habit you have selected. Found a bug where the email in the sidebar was not showing during signup. Fixed that myself (Very Proud 😁). The border animation was lagging in the sidebar. Later, I found out it’s because of the charts, they were taking all the processing and made the gsap animation look very laggy. So, I changed the gsap animation to css transition. This made the animation very smooth. Also fixed a small bug during signup. The biggest and most proud part of this devlog is streaks. The streak looks really nice and has a very good functionality wise also. Right now the streak calculates in the backend and the frontend doesn’t update immediately. I might change this in the future and make the calculation of streak in the frontend. Now I’m probably going to work on smooth animated transitions during change in page. I think it will look very cool. If someone did read this devlog upto here. (You’re the best ♥)

Nothing much has changed in this Devlog. The main thing changed is that the top 3 priorities section’s data is saved in the backend. I worked on the backend route and controller for the priorities. This ended up taking much more time than I anticipated. I also fixed some minor errors during the process. Now I’m currently working on the three dots you see on the image which allows user to edit and delete the habit. Any suggestion in the comment will be appreciated. I’m gonna go and work on it rn…

The website is coming together beautifully. I have synced the data with the progress bar and I’ve added a component displayed when there’s no habit. Also, I saw a notion habit tracker video and there was a circular progress bar at the end of each habit. This inspired me to add that in my own website. Now if the user spam clicks the checkbox it won’t overload the backend. This was a new thing to learn. I also fixed some ui issue with the dialog box. The days are going so quickly. I do feel low sometimes but thankfully I am able to continue to work on this.

Right now I am stuck now. I really love the progress chart and the animation of the chart when first loaded is just chef’s kiss. Now I am going to sync the real with the chart.

The data of the check boxes persist now. I’ve worked on the mainly the backed and created routes and controller to handle fetching and updating the completed dates. The completed dates then show in the form of the checkboxes remaining checked even after reloading the page. This process came with some annoying bugs but it worked out in the end. Now I will try to combat my fear and work on the progress page. I haven’t made a dashboard till now. I have already though of how the progress chart will look now it’s just the matter of coding. Wish me all the best…

Damn!! I should devlog more often. Let’s see what i’ve done in these 10h 22m of work. Mainly I’ve worked on the ui of the habits page. User can track good or bad habits. I’ve also added a section for top 3 priorities of the day. In the sidebar i’ve connected the user’s email that i forgot to do previously. I’ve also created a dialog box that pops up when the user clicks on the new button. The one thing i’m most proud of is the emoji selector. It just worked without much hassle. Now currently i’m working on storing the habits data cuz the habits that’s being display right now is hardcoded. I really want to write more code daily but life is busy hopefully I can code more without having a breakdown.

I don’t know how it has been 7hr 42min working on this. The progress seems so small. I have connect the backend to the frontend using useContext hook. I have also been working on the main page now. I have added some small animation when switching from habits to progress in the sidebar. I haven’t figured out the UI just yet and didn’t wanted to upload this devlog but this has almost 8hr of my work so I thought it’s importand to add a devlog.

Completed the backend for the login and signup page and connected backend to mongodb. Also have added protectRoute for the future. Writing the authentication code wasn’t that difficult cuz I have some practice with it now. Tommorrow I want to build the home page but have no idea what to build. Hopefully the creative cells in me spark.

I have just finished the auth page. I really like this page as I have added some animations when toggling from login page to signup page. I’m up for any suggestions.

Final devlog!! I forgot to add the README last devlog. Now I’d have to figure out a new project.

I guess this will be my final devlog for this project. I have made the website responsive. Now I don’t know what to do. That’s why I’m writing this devlog.

Added more songs to my website. It took longer that expected to build but anyways it finished. Now I will be purely focusing on the responsive part of the website.

Added some hover effect for the ambient sound button and mainly I have completed the sound controls. My original idea was to use alot of animations. The candle would slowly finish with the timer. The music player dish rotates while playing music. These were the concept but I didn’t find any good free AI to convert my images to video like I wanted. It’s really sad. The good part is I’m almost done just need to add some musics and then I will jump to the responsive part.

Finally added the sound functionality. Now whenever the user presses play a cozy lofi music also plays in the background. The ambient sounds also work by clicking one of the four buttons. They play ambient sound corresponding to the buttons. I’m loving the progress so far.

When I thought building time couldn’t get any harder. Unfortunately for me it did. But finally I have finished the timer. The play and pause button works completely fine and so does the reset button. You can just edit the timer by clicking on the timer and editing the numbers and yeah that’s all it. Now I’m going to work on the sound system…

Add timer to my website. Thought it was a piece of cake but for my brain it was really hard. It just couldn’t understand the math. I feel someone reading this would be laughing cuz it’s easy for them. I feel like a beginner again but I somehow finally created this timer. There are improvements needed to timer so I’m gonna go to work on that

This is the first Devlog of this project. I made this project for coders and students. This website is a cozy place where the users can play music with the ambient noise of their preference and set a timer to lock in. I have just created the basic UI of the website. I plan to make the timer working next.

I have updated the readme file. You can now read the readme file. You can check out the website.

Fixed an issue with the mobile device. The video wasn’t going all the way down in the mobile view. It took longer than expected to fix this issue. Now I’m ending this project and gonna start on a new one.

Just added the cocktails section where you can see the most popular and loved cocktails. Also added leaves at the bottom with animations with animations for a jungle like vibe.

Added the main video in my website. It animates with scroll and just looks amazing. Next i am going to work on the cocktails section.

I’m currently following a tutorial on YouTube. I have created the hero section with navbar and text but there’s still more to add. I am hope to learn a decent about gsap with this project