GuideMark

An all-in-one for creating guides and doing guides. Tracks progress and breaks down complex tasks into easy and approachable one-at-a-time steps.

Comment

Inspiration

We thought about our personal problems. Sometimes, doing certain things can feel way too overwhelming and we can end up procrastinating, making it even more overwhelming. This project seeks to bury down that sunken feeling, and help people actually follow through on chunks of work, a step at a time.

What it does

You can create guides, and you can start them. When doing the guides, every step is shown one-at-a-time, making it very easing and convenient to tackle. There are two types of steps:

Read steps [where it's just pure reading and following instructions] Photo submission steps [where the step prompts for a certain photo to be taken] {Gives a feeling of accomplish and provides a visual end goal for the user}

How we built it

Built through pure html, css, and javascript. Coded in VS Code.

Challenges we ran into

Coming up with the idea was the hardest part. There was also a lot of struggle with making CSS look the way we want, so we chose to do simpler CSS [And it looks really damn good, it gives awesome retro vibes] One of the challenges was making the webpage a launching mobile app, which was done through making the website a PWA [Progressive Web App]. It was super fun testing it out with localhost on a Android phone, but it also took a lot of work to make the scaling right and making the manifest.json actually correspond to a PWA [We had to do a bunch of browsing through documentation for this one].

Accomplishments that we're proud of

IT'S A WORKING APP IT'S ACTUALLY USEFUL UI looks really sleek and very efficient [Has vibes like Mc Master Carr's website]

What we learned

We learnt how to build a fully functioning mobile app. We are way better at CSS now. We now know how to manage our time better.

Additional Note

In order to use it as a mobile app: Open up the link in a browser. Select 3 dots on top right corner -> More -> Add to Homescreen / Install The UI is meant for mobile devices, not laptops/computers. If you want to see the mobile view without a phone, use the inspector tool to change the view to mobile view.

MADE FOR: Beyond Language AND Life In The Stars

[Mostly for Life In The Stars]

Built With

Share this project:

Updates