Final Post Ship Devlog

That took a while

• Created the videos needed for the instructions on the splash page using Premiere Pro.
• Got the PWA working again and deleted duplicated manifest files within the project.
• Added shadows to all the “islands” within the app, I might have gone a bit overboard with it.
• Added some video links on the splash page guiding users how to install PWAs on various platforms.
• Rewrote the README with more details on the inspiration for the project and what I learned from it

Post Ship Devlog 10

Got sidetracked after a while into undervolting my laptop and installing fedora, neither of which I achieved (-_-)

• Spent time trying to find a nice background for the site but everything I tried looked too tacky so i decided to revisit it later.
• Fixed a css grid responsiveness issue in the tutorial on the splash page where it refused to wrap on smaller screens.
• Tried to implement a button that let users download the app on their devices but was un-successful. Will be visiting the idea in future
• Created new icons for the site using the updated color scheme. Currently working on fixing the mobile version’s icons not loading and instead defaulting into the Vue logo.

Post Ship Devlog 9

• Finished the bulk of the splash page with some basic instructions for new users to follow when they get started with the app. Learned about the pre tag in HTML which let me add an ASCII header to the site without wrapping.
• Looking towards making the background more interesting by way of moving gradients or micro patterns.

Post Ship Devlog 8

Much of the main app page is now working. I just need to add the splash site and style it.

• Styled the login pages with the site wide theme. Added labels so users know what to do isntead of blind guessing.
• Encountered the bug that made it impossible for one of the testers to login. Basically I was being lazy so copied the code for the signup into the login, which resulted in the app trying to write to the database without having the required information. Removed this un-needed logic and now email signin works perfectly.
• Moved the splash page and dashboard into the same file so that users will always default to the dashboard page if they are logged in. The splash screen is reserved for first time users.

Post Ship Devlog 7

Getting ever closer to finishing the project. I’m gonna have to remake the assets again due to the theme overhaul

• Finished the sessions page, the user can now click a button which gives them a sentence containing the dare and the person assigned to it.
• Learned about GSAP timelines which I used to animate the dare button to look like a fortune wheel (assets pending) and fading in the text between each change of dares.
• Still a small problem where if you click the button multiple times before the animation finishes, the text ends up at an angle.
• Working on implementing a way to go back to the vault dashboard from the session. Also considering adding sitewide navigation.

Post Ship Devlog 6

I take a few days off just to find out the A1 mini has gone up in price…..😑

• Created a section to select the players who will be playing at a given time from the vault.
• Added a different view for the truth or dare sessions instead of within the vault.
• Spent wayy too long figuring out how to pass data between views. Ended up using session storage for the added benefit of refresh protection.

Post Ship Devlog 5

• Fixed some responsiveness issues cause by a really big div being in the code for no reason.
• Added a settings popup that can be accessed by clicking the cog icon on the top right of the screen
• Styled the start session button, currently doesn’t do anything but it eventually will lead to a popup that lets you choose whose playing and picking random dares for each person.

Post Ship Devlog 4

• Restyling of the Vault page is now done, all that’s left for me to do is to make it responsive cause for some reason the margins of the page refuse to work.
• Starting to work on an improved page for when the user starts a game, instead of having it running in the vault itself.

Im gonna go study maths now 🥲

Post Ship Devlog 3

• Dashboard is fully working and deployed on production app
• Started theming the Vault page while also redesigning the UI to be more intuitive. Going to replace any menus with islands that each do a specific function. This also has the added benefit of making it easier to make responsive.
• Learned too much about text areas and how to make them not look like they are from the early 90s. Also had a refresher on CSS grid which I’ll be using to align some of the elements.

Post Ship Devlog 2

• Found a pleasant monochromatic color scheme to redesign the site with.
• Removed hardcoded color values and replaced then with css variable
• Added hover states for the buttons in the Make Vault section.
• The site now fully uses up the space on a mobile view

Post Ship Devlog 1

Changes

• Started looking for a better color scheme and learned basic color theory to implement it properly.
• Ditched Figma. It’s easier for me to visualise the site in code rather than learning how to use the software effectively.
• Took inspiration from banking apps to build a similar UI, particularly Monzo.
• Started writing better devlogs :)

Post Ship Changes

I received some very useful feedback on my project after my first ship. One of the pain points that many users commented on was that the UI was too confusing to navigate, as a result some users were unable to create vaults. So as a response to this I will be properly learning Figma and investing time into learning UI/UX design. There were also some reports of the signup procedure being slow. I suspect it is a case of multiple inputs being sent and overloading the firebase app. I will make sure to add more loading bars to make sure the user on inputs once. The page where the user gets the dare also is something I would like to work more on, as well as improving the quality of my devlogs and READMEs.

FINALLY GOT THE PWA TO WORK!!!!! Turns out i have two different manifests that confused the browser and didn’t upload any screenshots so the built in “Can be Installed” displayer on browsers didn’t work. I also wrote a README for the project and added mobile compatible sizing so that the elements didn’t look out of proportion. I will prolly be shipping the site after this devlog.

Got a working version of the app setup on firebase hosting. Still not a fan of the overall design of the app so I will spend some time reworking the UI to be better looking.

All the pages in the web app are now styled. Next step is making the site responsive which is still havent been able to figure out :’).

Finished up the Vault UI and did some debugging for logged in UI vs logged out UI. Spent some time trying to figure out why the site wont shrink to accommodate mobile viewports but still have no clue.

Styling the vault interface. Ran into some issues on getting the get dare button centered. Just need to finish up on dare adding form

Implemented a dropdown system where all the vault functions can be accessed from a pseudo-navbar. This reduces clutter in a mobile viewing format. It also makes it so that I can display all the vaults that a user is in easily without worrying about overflow.

Changed some of the routes in the app and did some input validation to ensure i didn’t have vaults with empty names in the system. Also started on styling the dashboard of the site

Started work on the frontend of the app. I’m leaning towards a more playful color palette and style for the website and since its primary use case will be mobile, I’m going to try my hand at a mobile first approach.

Deleting works now! Turns out I’ve been using the wrong field value :’) Only thing left to do for a functioning backend is to find a way to randomly give dares out from the vault based on a few parameters. I also managed to setup a dev version of firebase on my laptop and made sure all the cloud functions work properly.

Most of CRUD functions are now done. Currently fixing a small bug where the instance of a vault underneath the user does not get removed when a vault is deleted. I also started on a rough resign for the app’s UI. I decided to base the site on a typical banking site layout due to it working nicely with lots of vaults. The designing was done in Figma.

I should be revising this half term but instead I’m doing this 😭. So, the basic read and write operations for both the dares and the vaults are now working. Currently the only thing left in terms of core functionality is adding the ability to delete vaults.

Tweaked the database so that the user only sees vaults they are a part of instead of all the vaults created. Also added a way for users to add themselves into a vault by copying the firebase document id and name (to prevent people from accidently being added to the wrong vault)

Added parameter based routing to the application so users can access individual vaults’ contents through a URL. not very secure at the moment so i need to add more authentication features.

Finished a very basic implementation of a user authentication. It currently supports email password and google auth. I plan on adding microsoft auth as well and improving the security of the sign in process. Still no css :’)

Learned the basics of Vue.js, which will be used for the front end of the project. I plan to use Firestore for storing all the dares (no clue how id do that tho). Currently working on the main point of entry which will be a landing page, which takes the user to the actual app. Not very pretty but the styling can wait until I finish the structure (fancy term is agile development).

So i sketched down the basic structure of the app. I want the users to first land on a hero page if they are not authenticated and then be prompted to sign up. Signed in users will be transported into the main app page. Here, the user has a choice on whether to start a new game or add to the list of truths and dares. I want the site to be a progressive web app so i cant completely for got the building for different operating systems bit and so that the users can add data from anywhere.