Kumari Futsal banner

Kumari Futsal

14 devlogs
68h 22m 45s

Kumari futsal website is a futsal booking website created to make booking easier and convinent. The website has home, visit us, book game, signin and signup pages. To locate the fustal easily there's a map in visit us page. The website uses esewa …

Kumari futsal website is a futsal booking website created to make booking easier and convinent. The website has home, visit us, book game, signin and signup pages. To locate the fustal easily there’s a map in visit us page. The website uses esewa for payment. You can use test credentials given in the website to pay. All your bookings and login credentials are stored in the backend. Hope you like this project ♥.

This project uses AI

I used ai for some debugging and some inspirations.

Demo Repository

Loading README...

Sam

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.

Attachment
Attachment
0
Sam

Shipped this project!

Hours: 66.0
Cookies: 🍪 692
Multiplier: 10.48 cookies/hr

Finally the project is complete. I really enjoyed build this project. I’ve built a futsal booking website for football lovers, helping them to book matches easily. This project taught me to add maps which I hadn’t done before. The hardest part was definitely integrating esewa payment to my website. I didn’t know what to do and was stuck on this but a blog post helped me alot. Hope you like me project.

Sam

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.

Attachment
0
Sam

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.

Attachment
0
Sam

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.

Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0
Sam

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.

Attachment
Attachment
0
Sam

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

Attachment
Attachment
Attachment
0
Sam

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.

Attachment
0
Sam

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.

Attachment
Attachment
Attachment
0
Sam

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.

Attachment
Attachment
0
Sam

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.

Attachment
0
Sam

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.

Attachment
0
Sam

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.

Attachment
Attachment
Attachment
Attachment
0
Sam

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.

Attachment
Attachment
Attachment
0