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.