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

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