SweetTooth banner

SweetTooth

9 devlogs
39h 34m 32s

An interactive ice cream website! This was originally a website done for fun for a friend of mine whos family will be starting an ice cream business! I dont think it is production ready but do take a look, all pictures are placeholders and I have …

An interactive ice cream website! This was originally a website done for fun for a friend of mine whos family will be starting an ice cream business! I dont think it is production ready but do take a look, all pictures are placeholders and I have deliberately left them empty sometimes. The logo is hand drawn by me!

This project uses AI

Mostly for javascript debugging, and annotation.

Demo Repository

Loading README...

yydscoder

Shipped this project!

In summary, I gained substantial knowledge in web design and API integration throughout this project. I also developed a better understanding of design principles, particularly in color theory and visual harmony, by studying online resources on effective color blending. In addition, I learned how to work with local development environments and implement basic security practices, such as protecting API keys from public exposure. I also gained hands-on experience integrating APIs and manipulating their data using JavaScript. Furthermore, by exploring the optimization aspect of the project, I deepened my understanding of performance techniques such as caching and lazy loading, both of which contribute to improved user experience and more efficient content delivery.

yydscoder

I have completed the final version of the website. The password change functionality for the admin.html login has been removed, and the password is now hardcoded as “Flavourtown123” for demonstration purposes. I also implemented lazy loading. This ensures that assets are loaded dynamically based on the user’s screen size. For example, on larger displays such as monitors, more assets are loaded immediately, while on smaller devices like mobile phones, some assets are deferred and loaded later to improve performance. As for caching, I implemented browser caching to store static assets such as images, CSS, and JavaScript files locally on the user’s device. This allows returning users to load the website much faster, as these resources do not need to be downloaded again on every visit. Additionally, caching reduces server load and bandwidth usage, improving overall efficiency and scalability of the website. I really wanna attach videos of demonstration but i think i need to compress them, which may mean the quality is down, the first video demonstrates caching and the second demonstrates the lazy loading.

0
yydscoder

Made mapbox work, you can now enter in a delivery address and itll create a route, if youre in the radius then your delivery fees will be 10 ringgits, and if not it will be 20. The cart is also now fully consistent and should function well as a website. The default password for the admin panel is Flavourtown123, but i will likely put a toggle somewhere to demonstrate my optimization techniques.

Attachment
0
yydscoder

I implemented lazy loading for optimization. I am unsure if the video can be viewed, but I should have a toggle for turning the optimizations on and off. In the second video, the change is that I am viewing it through a different viewport, which delays the loading of images until I scroll to that point. Since the page is smaller, the difference is more significant, with the first at 31% loaded and the smaller window at 6% loaded. This allows us to save bandwidth in order to have a more efficient application.

Attachment
Attachment
0
yydscoder

This devlog serves as a reinstatement of the logging for the project after i was banned and then unbanned. Sweettooth is a website which incorporates many elements that a website would require, as well as a hand drawn logo for a fictional ice cream brand and implementation of logic on javascript. It is technically already done and ready to be hosted on vercel but is to be intended to become my optimization project for the requirement. The colour scheme was picked by myself for contrast, and there are widgets and integrations with whatsapp on the side for contacting as well as an open source map for geological positioning.

EDIT: Dev logs have been restored, thank you! @Carlson!

Attachment
0
yydscoder

Mostly rearranged a LOOOOT of things, as well as placeholders for some of the things i will add in the future, for now the website supports an API for tiktok as well as for instagram but i dont have an account to pull it for so i suppose it will remain as a proof of concept, I will have to upload it to vercel for the demo soon as well but am thinking of an interactive calander to showcase events maybe?

Attachment
1

Comments

yydscoder
yydscoder 26 days ago

Now I am working on familiarizing myself with vercel, then i will upload it and put it into the demo

yydscoder

I have added a mapbox map as well as some sort of delivery cost estimator for deliveries that go outside of a predetermined radius from the central zone via a logic on the server side in order to go with best practices. This is my first production based website

Attachment
Attachment
0
yydscoder

I have changed the flip tile animation to a dedicated product page which gives the option to add the gelato to the cart, then also added a little toast notification that pops up when you click add to cart

Attachment
Attachment
0
yydscoder

Managed to add a little whatsapp icon for contacts that opens up with a little default message and will store the whatsapp message to be sent to the website owners handphone number.

Attachment
Attachment
Attachment
0
yydscoder

Designed a really basic one page frontend for now with an interactive top bar as well as a cart page and a basic products page, now fixing some bugs and maybe some vercel

Attachment
0