fac10 / fac-productivity Goto Github PK

• Have a working home page that links to our landing page through Oauth using Raspberry Pi
• Front end styling - basic
• Handlebars set up
• Hapi server set up
• Readme updated reflecting today's work

This link explains how to make node to reply on port 80, blocked by default.

Radial gradient from centre on landing page == glowing light bulb effect! ✨ 💡 ✨

https://www.w3schools.com/css/css3_gradients.asp

At the moment we're only able to test routes by checking that they respond with a status code of 302

We need to do this before EOD May 3rd!

Currently the only way I found to do it is to add /* istanbul ignore next */ before each line of code. Maybe there's a more efficient method.

User Persona: Maja, 26, University graduate, tech savvy

Her thoughts/questions

Well this looks like an app with a button to sign in...

Do you think you'd use this?

Well if I was a teacher, yes. It looks more fancy. It's such a jump from pulling lollipop sticks out of a jar, switching to a digital version is overkill! But it's funny.

Would you be interested in adding your own projects?

Probably not if I just came across it. It's misleading that the intro says I need to star the GitHub repo to get started. The link with GitHub is not clear. It doesn't star it for me automatically, does it [the GitHub button]?

• Log in with Github button
• Add logo
• Fix "about us" button
• Star Github repo button

Take Finn's current lpop app and convert it so it fits more along our overarching design.

The HTML element is used to draw graphics, on the fly, via JavaScript...

User persona: Zooey, early 20s, bootcamp student, tech savvy

His thoughts/questions.

Is it clear from the landing page what the website is about?

• "I would say that it's unclear. Hardware projects -- I don't really know what that means. I don't know anything about it so I'm suspicious about signing up with my GitHub account

• "Perhaps if this box [the intro text], appeared on the first page, then it would be clearer what the website is about"

Do you think LPop would be useful?

• "It would be useful if it was accessible remotely from different devices. Because it's better than lollipops as the list of names can be configured and each new name will be popped off the list if someone has already been picked...
• "The main thing is that it's quick and easy to use, like picking an actual lollipop stick out of a jar. Maybe there could be a button on the wall to press for it.

How about making your way through the site?

• "General navigation makes sense"

Lasting comments

• "The GitHub button at the bottom of the landing page is distracting because it is bigger than the sign in button"
• "This is cool -- I would definitely use this"

We'll need to write a bangin' contributing.md for all future aspiring collaborators 🤓 . Add all thoughts here, team:

Let's go through and remove unused code/folders/files/anything 👾

https://projects.invisionapp.com/d/main#/projects/prototypes/10908729

It would be more user-friendly and reliable if the info icon on the landing page only responded to an onclick event.
Same for the logout feature when you click on the user profile pic.

http://www.creativebloq.com/css3/create-modular-and-scalable-css-9134351

Let's research and put our findings here:

Stretch goal: When someone stars our issue, the LED display will explode into stars ⭐️ !

Change name of this repo if poss? To avoid confusion in the future...

Right now the blurb shows on home page, we should have an "about us" button that shows the blurb when clicked.

Create a random file (and merge it) to test if it works.

Adding Qunit to test frontend code.

What do we want to include in our readme? Add thoughts here please @antoniotrkdz @lucyrose93 @finnhodgkin ✨

• Front end testing
• Finalise app pages with copy and styling
• Post a test word on LED display "Hello World" from Node
• Start neatening css file
  Stretch:
• Turn LED display into app

We need to ask @sofer to help us with this soon 🙏

User persona: Akin, 26, former doctor at a coding bootcamp, tech savvy

His thoughts/questions

• "How do I sign out?" -- He wanted to sign out straight away!?

• "How do I go back?"

• "I shouldn't have to go back to GitHub to figure out how to use this." -- All the instructions and tutorials should be in one place

• "I like the icons"

Lucy: "At some point you'll be able to add your own app. Would you be interested in doing that?"

• "Yeah sure. But it depends how much of a faff it would be. I guess it'll probably have to be a pull request. So, I mean, you've got the button but I wouldn't really be able to do it on the site."

Lucy: "So, at the moment, it's not clear how it connects to GitHub for you?"

• "Yeah"

We need to decide as a group what other apps we want to make. Team, throw your idea here please and we can take a vote. @lucyrose93 @finnhodgkin @antoniotrkdz

User Persona: Alice, early 20s, University graduate, tech savvy

Our session.

All Alice was told beforehand is that this is a hardware app for Founders and Coders students.

Her thoughts/questions:

• "How do I get back to home?"
• "Are these apps?"
• "Is there anything that’s frustrating? I know that it’s a prototype"

Do you think it would be useful?

• "I think as a member of FAC it would be useful."

Would you use it?

• "Depends on the apps it has."

My comments:
Lots of positive language used ("OK", "cool").
Alice seemed to enjoy using it.

You know, do the thang: travis-ci.org

I.e.

server.route({
method: ‘GET’,
path: ‘/logout’,
config: {
handler: function(request, reply) {
request.auth.session.clear();
return reply(‘Logout Successful!’);
}
}
});

We'll need to set up our new raspberry pi, I know it's a grape emoji.

Let's start a list here.

• routes for apps pages
• complete 20:20:20
• add LPOP (modify)
• 💩 app (stretch goal)

User Interface

• implement UX feedback
• add copy
• finish styling landing pages with logo and question mark that reveals intro text
• style completed apps

Get product ready for second round of user testing

We need to make a tomato timer 🍅

Maybe start with a clock 👍

• Automatically stars repo when click on star on Github button
• Show number of stars if user already starred repo

Currently it's HTTP, should be HTTPS.

Link Handlebars to Hapi server

At the mo on mac there's a big difference in color...

Same thing, do the thang: codecov.io

We need to make a 20-20-20 timer.

It floats half way down up the page on pages with less content.

We'll need to make one like this: https://www.figma.com/file/VjcTMMgfKBH1bVIcGncn84/lpop

• add pomodoro to routes
• add pomodoro img and copy to home
• write tests for everything not connected to an api or apps
• copy for apps
• instructions on add an app page for how to contribute
• style app pages
• logout button
• landing page styles
• convert twenty timer logic to ES6 and make it more pure

Make LPop responsive

• convert pixels to em

Need default authentication strategy

Add a contributing document with guidelines/tutorials so that people know how to add their own apps in the future