Created a Google Drive Connecting setup guide

• now people can follow the simple steps and can connect the google drive to the site
• it is very easy to access its on the popup of google credential entering form
• attached pictures too for better guidance

Created Readme

• created very simple readme which showcase main feature of the website
• and attached some important links there

Created Demo Video

• i decided to make the demo video of website because many voter dont want to setup and do all the thing so its easier for voter

This is my last devlog of flavortown 😭

Deployed Website on Vercel

• now user can access the website from a link but there is catch in it !
• so when i tried to deploy website on the vercel like normally i do with all my website but this time it little bit different because this website is little bit complex and have multiple storage and cache that’s why i faced multiple error with that

Error i faced and how i solved

• so first error i noticed that google auth is not working that was easy i know that its link problem so when i added website link in google cloud console that is solvec
• after that there is major error the account are disconnecting after i reloading the site so i searched on chatgpt what causing this problem it said i used wrong method to store the auth token that why its ressenting after reloading after checking that was not a error
• after serching and trying multiple times and failing in it i let to know about the storage cache limit in vercel 😭
• that why my token are not storing and there more thing will happen i have low cache so there is lower uploding limit of files in on this website
• for solving the disconnecting issue i used the upstash to store the user session after that the problem was soled

But due to vercel limitation user have limited file upload limit on online website

(You can use it on local host there is no limit )

Formatted the code

• so i wrote all the code in one html file and there no comments and its very messy so i did this things

1. making seperate file for js and css
2. store it in seperate folder
3. adding use full comments where it needed

Added Option to add your own credentials for google auth

• now users can add there own credentials which can they use to get the google auth for connecting the google drive accounts
• user have to setup there own webapp on the google console and get there credentials with all the required scopes
• they have to manually add there all there account in testing mode of app

How it will work

• so before i am using the .env file to store all my credentials and site will fetch all the credentials from there and i can access google auth from that
• now any user can create there own webapp credential and enter it in in website
• in website you get popup when you login using google option in popup you have to enter your credentials
• it will save in website cache so you dont have to enter it every time
• there is reset and changing option also

I will create an tutorial page to setup this whole thing

Added New Folder Button

• now user can add new folder with this button this button added in the browse page
• added the popup also to enter the folder name

Small UI Changes

• replaced the browse button with the new folder button and placed the back button in the left corner
• added the confirmation popup for delete folder or file

Added a Uploading Animation

• so now when you upload any thing there is card popup on right side
• it show all the details like time and file size and all
• you can now also cancel the upload mid way by clicking on the cross in the right side corner of card , after that you have confirmation card also

Fixed the folder redirect problem

• so before if you search something on search bar the search result list folder also and when you tap on that it will direct redirect on the main drive website link
• now its fix and better if you tap on the folder it will be redirected to the browse page if its from home screen or normal open like folder and show file if its on browse screen

Search result UI changes

• there is small changes in search result ui like now it have the hover transformation in color very little bit
• now you can click the file or folder from there whole area not have to tap the text to access it

Next -

• adding the login option for google by entering own api key
• adding manual new folder and upload file button in browse page
• some ui changes and fixes

My First Vs code extension

• i created a extension for vscode which shows you your daily steaks which uses hackatime api
• i want to create a extention which can track 2 things rank and streaks but to track the rank it will need API key of users , so i tried it but after multiple failed attemt will do it in next update
• i will add more stats of hackatime in this extention in future thats i named it hackatime stats

How to Use

• it is very easy to use so you just have to search for my extention in vscode as other extention normally you will see that there then install it
• after installation an text will showup in right side of your waka time saying “🔥 click to check your streak”
• after clicking that you have to type your hackatime username get it for here hackatime username
• after entering that user name you see the streak count below

DOWNLOAD

VS CODE Extensions

Added Total Storage bar

• now user can see how they have total storage of there connected account with this total storage bar in left side of cards
• this will calculate the both drives google and mega
• its also shows the total number of account connected
• also added the skeleton loading animation for it

Fixed the mega file error

• there is error in fetching the files that’s why its not include the redirection link in the files fetched now its fixed now you get the redirection same as google drive in mega account also

Small Ui Changes

• added the logout confirmation popup now you get the popup cancel or logout after click button on card
• added changes in the ui of the search result of the home page because its very messy now it clean and minimal
• now you can delete , copy and share file from the search results

All pictures are added about fixes and feature added

Added Search Bar in Browse page

• i added the search bar in browse page and its works same as the search bar in the home screen just it shows only result in the account you are browsing

Ui Changes in search bar

• i changed the ui of search bar and search result on home screen you see the picture in attachment of this post removed the extra result container
• changes the search suggestion system also now its more interactive and useful now it shows the previous searches it is almost exactly work like yt search bar
• and its now over the top of result overlapping it and used the transparent glass background in it

Over Small Ui Changes and Fixes

• improved the dark mode and light mode toggle button
• fixed the size of the browse page folder and file container
• fixed the back button of browse screen and added some ui changes
• fixed the loading skeleton animation sizing so it match the orignal

Next

• Adding the storage bar on home screen which shows the all account storage
• fixing the mega file opening problem
• adding some more ui changes

Created Loading animation

• i made an loading animation for home screen and and browse screen also
• now when account card are loading it shows an Skelton of card
• and in browse page also i applied this loading animation also

Added Mega in auto select

• so previously a feature called universal drag and drop and it will select automatically where to store the file accordingly but its only working with google drive
• so i merge them both and it also work with mega now ! you can select it manually also through the popup

All the Picture are attached

Added Mega

• added mega now you can connect you mega account also
  you do all the same thing with it edit , delete , move . copy , paste
• all the features like drag and drop is also working

how it works -

• now when you click on add account button the popup appear where you can select between google drive and mega
• after selecting mega you get form for account credential

Added Dark Mode

• added dark mode also because i understood its very bright website and some people didn’t like it or not comfortable with it
• used invert attribute is css to invert some images to match the theme

How it works -

• use can toggle it from right side corner

Added Ui changes

• added more doodles
• added new font
• you have to choose your username at first visit

All the related changes pictures are attached bellow

Build Browsing Feature

Now you can browse the files under the any account it show all the files and folder in that

• Browse
• Edit
• Open any file available in Drive
• Delete option
• created separate page for browse

Added Drag and Drop

• added drag and drop now i can drag and drop any file and it will be added in the google drive
• there is one more cool option which is universal drag and drop which decide automatically store in which according to its size
• there is 2 option after drag and drop in home screen there option to select account and there option to auto select (in future i will make more seamless)

Error

• faced only one error when i am making delete option its silly error just forgot to give api scope fixed it

summary

• added drag and drop feature which have auto select option and added options like delete, copy ,paste , cut
  and made separate page for browse

Build new UI and Fixes

• i added new ui to it because previous on is not that good this ui is inspired by - Scraps
• added new black and white look
• added some animations
• added an logout button
• pfp to the card which is fetched from google account and one more thing pfp is only fetched when its available if not then it will use first letter of name in pfp

Fixes

• previously the account cards are can be added multiple time because of my poor code i didnt limit the one of card per account , its now fixed
• there is one logout button now from which you can logout your account

Error Faced

• i faced error in fetching the pfp form google its occurring because of bad scope of google api then i took help of ai to solve it
• there is error in logout a account this error is also being solved after some tweaks its occur due to my bad code i noticed and fixed it

Summary

basically i created a new ui not which is very simple that’s why devlog time is low and added a logout button in cards to disconnect the account , added account pfp in cards and fixed the same account multiple card issue

• i attached new ui pictures below its very basic version of it upgrading it in future
• and added picture of some error i faced

Build Basic UI

• created account bar on left
• created account card on right
• in account card added all the info like email id an storage info of account you can see storage and trash bin storage
• browse button also its not working for now

Connect Multiple Account

• now i can connect multiple google drive account at ones but there a problem i have to manually add the account id in google cloud console to allow the testing app login

Problem Faced

• faced some problems in css making card grids so took chatgpt’s help little bit to fix it and learnt it how to do it

• some problem in java script in first version i create js in which the storage is showing in GB only so if account storage is 5TB its showings 5000GB so i changed it using this format pretty easy but common mistake
  if(gb >= 1000) { return (gb / 1024).toFixed(2) + " TB"}

Built a very basic page

• created very basic page for testing
• connected google drive api (only for testing users)
• fetch all the data on google drive of linked account

more info -

This is very basic page only for testing api and learning how google drive api works. so i created basic google console id and created oauth credesntials for google drive and used app in testing mode in which you can add your own google id manually (for now) in future it will be easy to use after adding my id manually i fetched data its worked i attached image of it

Learning

• how to create node.js server to host web locally and use .env file for credenstials
• how to use google cloud console and use api and how to create Oauth Google signing screen

Next

• i will work more on Ui
• work on join multiple Account at one time and fetch info from both of them

Last Devlog

this is my last devlog this project is very fun to make after shipping this i will do some SEO also on this website to rank this website

Added UI

• added new ui element like dots flicker screen on hero section
• now on side of temperature city name also appearing
• added buy me a coffee widget

Last Fixes

• fixed hero section avatar
• fixed openweather api calls error now uts working
• fixed some small erroe
• formated the code

Made Some Ui Fixes

this is my tech stack carousel this have svgs in it before i have some problem so used cdn this time to load the logos in it .
now it is more clean and appearing as i want too

Formatting

as i soon ship this project i am also slowly formating the code file and make the code more clean and understandable (Using Ai also in it )

First Devlog

website is almost completed only little bit ui changes and all is
remaining
this is very basic website with HTML CSS JS

pages -

HOME
PROJECT
CONTACT

API and Others Used -

• used web3 forms for getting form submissions from website to my email

• used Github API to fetch all real time repository data

• used spotify api also for fetching

• used weather fetching api to fetch weather real time

Purchased domain - airtolife.in from grant
added some fixes to reduce loading time tried
and formated code

Formatted Code Files and added readme (Last Devlog)

this is my probably last devlog on this before this project first time i thing this projects 1st version is done and its ready to ship now
i added all the necessary feature like

• good web ui to control
• Alarm Setting
• Scheduling Alarm on specific date
• notification feature for slack
• animation feature

FUTURE OF THIS PROJECT

• this is enough for first ship in future i gonna make this project open to any one other peoples can use my web ui control making same alarm using unique id register feature so others can setup there alarm and data store in there id
• making alarms body in CAD and 3d print it to make final product
• i gonna make step by step guide for other peoples to make there own version

Learning from this Project

i learned lots of thing from this project about Arduino uno esp32 pipedream how to use webhook automation how to make slack bot app what’s pros and cons of uno based project
mainly using firebase DB for real time data sync between web and real lcd is very interesting part for me and designing web ui thats minimal and cool is also very good experience
and in this project i documented very single thing through develogs that was very new thing to me
Overall i have so much fun making this project

Added Some Small Ui Update

• added card for very animation and added play pause button in it
• added notification connecting card for apps like Slack , Discord and Email (Discord and Email is coming soon)
• added css in website to operate in portrait mode if opened if site is opened in desktop its remain in portrait mode , i added this because i don’t want to stretch ui and destroy it looks

This is my last devlog with adding feature and ui 😭

because i have exam from Monday so now i will format the code and create demo web ui to experience for voters and add readme and ship it

Got Well Cooked Mark on Project 😊

Added Feature

• added animation screen mode in real lcd also and i can can control it through web ui and manual push button both
• added push buttons to stop alarm ringing when you want manually and to switch modes between normal clock mode and animation mode.
  to add this push button feature faced a very new problem !😭

Problems -

to add push button feature i faced very new problem which is very complex to understand for me
so at first i thought that its very easy i will connect the 2 Push Buttons in UNO and add function in it to switch mode and stop but when i did it that’s not working properly like when i am pressing switch mode button its not working at single press when i pressed it 2-3 time its worked but when i tried which it from animation mode to normal its not working at all i thought push buttons are not working so run a serial test code in uno to test push button then i saw both them are working normally after debugging and searching on chatgpt i got to know about the issue i am facing,
so the real problem is i am using push button in uno and when its switch to animation mode its receive lots of data from esp32 in tx port and its process it all every sec so when i register the push button click then its didn’t got that window process that click of push button because its busy in animation

Solution -

to solve that push button problem i connected both push button in ESP32 GPIO pins and added Stop and Swith Mode Function in its code,
so now what’s happening is esp32 get the click registered and send it to UNO through same TX to RX connection from which animation is working and now push button function is also working

Learning -

‘i learned lots of thing about uno data transferring and receiving limit and solved a new problem occurred to me in feature i will take it in account that uno have this issue so do it correctly’

Next Step -

• improve the multi page ui in web

Added Animation feature

so i added animation feature to set animation on LCD screen after so many failed trial and attempts it took lot of work😭

Problem -

basically in 16X2 LCD display you can allot a special character to draw a specific things like this triangle for wave animation
Code -
"%":["00000","00000""00000","00100","01110","11111","00000","00000"]
in this if i use % it draw this triangle which allotted to this special character because i cant any alphabets and number because its use to show character eg. A , B , C … in message
so i have to very carefully choose special symbol which is not use very frequently in message it took lots of time

Updated Ui (only for test gonna change it to better soon)

• added multiple screens for every feature 1 screen for 1 feature
  Alarm - primary home screen
  Animation - set Animation stop it play it
  Notification - to connect mesaging apps to notify on lcd screen

Note -

this animation feature only added in web for now i am working on uno code to work in real 16x2 lcd and sync it

Next step -

1. work on uno code to add animation feature in real lcd screen also

2 . add push buttons in real lcd to stop and switch between normal and animation mode
3. work on web ui to make it better

Added some code changes formatted the code because i want to get more cookies reason is my 1st major ship which have 90% of its times it got only 2X cookie multiper thats not fair i guess thats why i reshiped it but with 20min dev and that reship got 13X multipler but i ggot 6 cookie only because that was only 20min devlog please support me i want pcb buying grant for my next project

Added alarm duration slider

so basically i added a alarm ringing duration adjustment slider
from that slider i can adjust the duration eg. 5sec to 2o sec ,how ever i want to set it easily
its customizable for every alarm individually you can set 1 alarm ringing duration 5 sec and other 7sec

How it works -

so when i set it on web ui and save it then its store with all alarm detail in firebase database and from that i can sync both real lcd with fetching it by esp32 and web simulation lcd

Next -

now i am building animation feature and adding multiple pages in web to separate all feature like notification , alarm, animation so user can access all the feature easily

Future plan -

to create a step by step guide how others can build it too
like hack club blueprints starter projects it is my inspiration to create a guide

Built Slack notification Feature

Now when i receive ping on mentioned message on slack channel i get notification on both LCD and its Web simulation

How i built it -

I used multiple method in first trials like

• slack bots only (failed partially)
• n8n /webhooks (failed)
• extention to track notification (dumb idea failed)

Final Method i used -

1. Created slack app to track message on group in which its added by me manually
2. connected it to service similar to n8n its called pipedream its also used to create automation so created trigger that filter and post the messages to firebase database
3. Web Simulation and control and Real LCD is connected to same firebase db it fetch that data and show mesaage on screen for 5 sec

(for now i didnt add any thing to fetch username thats why its showing user id)

Time BreakDown

i tried multiple method to track all message in any channel of workspace or track my dm also i tried all the methods to do that slackboot wehooks , event log many other but it dint work i spent 2 days in it 😭 so in last i settled on version i posted now a slack bot that can be added in any channel manually to track messages

Next Step

• alarm ring duration slider to change ringing duration
• add cool animation screens which can be changed because its desk alarm clock

I added a working video

I got received 5 cookies for 2hr work i think it was unfair that’s why i am reship the project added some changes like now motor also off when driver not looking in front for long time

Built the Note Feature

Now i can set to an alarm and that note will be appear on screen when it start ringing on set time , it can be single word or multiple with its scrolling text feature when word get bigger then screen it use word scrolling to show you full note

also added

• i can also set date day and schedule the alarm as i want

what i used -

i used same firebase db just added place for note also with alarm now when i set alarm in database its store both note and alarm

Next steps-

• i have to connect it to my slack account to get notification on screen
• alarm ring duration slider to change ringing duration

i given video in which i shown all the features

Built Website to control

today i made website to set the timing and make good ui with LCD 16X2 Display Simulator which sync with my real display and show same info on web
Now you can set alarms set time, dates and you can add notes(which later shown on display working on it)

Website inspiration -

UI Structure - Google clock app
Color and fonts - Scraps website

Used -

HTML
CSS
Java Script

how i did it -

So used firebase to store alarm data when i set alarm on website it store on firebase db and that fetched by esp32
and for real time clock i use ntp servers in both website simulation and real one

Time breakdown

to sync the real lcd with simulation it took most of the time almost 2hr on record and designing website it done pretty easily just the lcd display making it is little bit hard part but i later user wokwi simulator code and make it work with my website and then i used cursor to generate structure and did all ui work by own hands (some part of website is unpolished i will fix it )

Next Step

• now i fix small ui problems in website
• add that note feature when alarm rings it show your alarm note
• add stopping option by push button (if i got buttons in college lab 😭)

Built First Simple Working Version

for now i created a simple version on alarm clock using Arduino Uno and Esp32 i fetch time using ntpserver in esp32 and by tx2 connection esp32 sends the time to uno and display it on display .
I didn’t have a webpage to set alarm for now its set from serial monitor of UNO and i also didn’t added alarm stopping option because i didn’t have push buttons 😭 i will add that feature later.
i added bell icon in corner using - https://maxpromer.github.io/LCD-Character-Creator/

What i built -

So it just shows time on 1st line and stetted alarm time in 2nd line with bell icon as you can see it in picture and its rings on settled time

Why it took 4hours😭 -

I took 4 hr because its first time i am using rx tx connections in esp32 and uno and i got too many errors i created webpage but its not working properly i tried multiple times almost (whole night)😑 fixing but it didnt worked in last i am posting this simple version devlog

Next Step -

• I have to create an good looking webpage to set alarm timing and connect with esp32
• i have to add simple stop option using push button for now

Basically this project is for preventing road accident causing by Driver Drowsiness by using computer vision

An smart safety system that detects eye closure using open cv and triggers hardware alerts and telegram notification

Using -

• Python 3.11
• OpenCV
• MediaPipe
• SciPy
• PySerial
• Arduino UNO
• ESP32
• Telegram Bot API

I build this project because i am getting bored i am working on another project but i need some break thats why i build this in just 2 hours i implemented telegram bot notification also in this project using esp32 wifi module

Learning -

During building this i faced lots of problem in python using libraries
I learned about creating telegram bots and integrating it with esp32

Added the Map to Select a State after selecting the state it will go to select city there is state map to select city there you can select your city there are some places there data is not available that’s why its not work but almost all states and city works you can fetch the info
WHAT USING -
For MAPS : using the JavaScript’s of Fusion Charts Trial and integrated with all data to work
PROMBLEMS - Because of too many JavaScript’s for state maps site loading time for first visit is very high
TRY TO SOLVE IT NEXT ANY ONE INTRESTED IN COLLAB/HELP MY CONTACT INFO ON MY GITHUB

This is my 2025 college science fest project i want to work on this project from long time but i didn’t getting time so i decided to complete it now so i start updating it form 10jan i will make some UI update add more location more data from which people can get more accurate data this is an awareness project how bad AQI is harmful for us and aware people about that any one interested can message me contact detail is on my GitHub