Coder Social home page Coder Social logo

huskyhabits-app's People

Contributors

connorlbark avatar jciolfi avatar maxpinheiro avatar melocule avatar nicoledanuwidjaja avatar ross3102 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

huskyhabits-app's Issues

Create Profile Services

Description

Create services for the endpoints described in the huskyhabits-backend profile API.

Spec

  • New folder created for services
  • Services / typescript objects(?) added for profiles

Design: Main feed page

Main feed page

  • Updates from challenges
  • Updates from friend habit completion
  • ???????

Examples of each card type, e.g. (not complete):

  • new bet in challenge
  • friend habit completion
  • successful bet, unsuccessful bet, etc.
  • maybe these could be in a 'weekly summary' post instead of separate, since they all pay out at the same time?

Design: Create & edit habits

A user should be able to create & update a habit.

  • Calendar for setting frequency (per week) of habit
  • Name and description
  • Verification method (?) not sure

Edit User Profile Page

Description

We need to be able to edit a user's details after their profile has been created. Something like instagram's UI, I'd imagine - a little edit button on their profile leads to a page which vaguely like the user profile page, but where everything is editable.

Spec

  • Change / set profile photo
  • Change bio
  • Accessible from user bio, leads back to user profile

Post-Login signup page(s)

Description

After the user logs in & their credentials are on-device, we need to redirect to a form where we can grab more information about the user. At the very least, we need a username.

Since this is the first ticket which hits REST API endpoints, we should also make the process of making API calls streamlined / generic.

Dependents

Depends on: #1

Spec

  • Redirects after logging in to a signup page iff no account has been created.
  • If the user already has an associated account, either log them in directly (if we decide only one account per email) or let them select which account to log into with a simple view
  • Form hits the signup endpoint & goes to profile if successful.
  • If unsuccessful, displays error. If there is a way to make like an error banner generically for all rest api calls, this is probably a good time to do it

Design: Create & edit challenge

A user should be able to create their own challenges.

After created, the owner should be able to have admin privileges to edit the challenge; including kicking users (?), deleting challenge, and changing title/details.

Design: View habit

We should be able to open up a habit from our profile (or feed post) and view its contents.

  • History of completion - relevant statistics?
  • Streaks
  • Ability to enter a habit completion
  • Delete habit

Design: Edit Profile Page

Notes:

  • We're using a library to get the profile photo, so we just need to have a button to open the photos app. The library has cropping functionality built in, so we don't need to worry about that.

Design: Challenge Page

After you join a challenge, the page which displays. Probably multiple pages, since this is a lot.

Probably includes:

  • Title
  • Description
  • Who's in the challenge
  • What habits they're working on
  • The bets that are active
  • Previous bets & payouts
  • Leaderboard
  • Feed for what has happened in the challenge
  • Does this include a messaging component?
  • Does this include an emoji reaction component?
  • Does this include a commenting or reply component?
  • Ability to leave
  • Create bet action

Also, relevant to this

  • Examples of each kind of feed post. For example, new bet post, habit completion post, etc.

Redesign Pages

Description

We need to redesign all the work we've done to fit into the flow that the designers envisioned. Once the designers are done, I'll link the Figma here, write out the ticket a bit more, & notify y'all so you can get working.

Design: Login Page Design + Sign Up Flow

We need to create the login page which includes:

  • Logging in through google

When a user is signing up, they need to first select the provider they want to sign up through, and after they login through the provider, we need to have a sign up flow which takes in:

  • User name (required)
  • Profile photo (optional)
  • Bio (optional)
  • Habits to create (?) (optional ?)
  • open to alternative ideas here

This sign up flow can be one page or multiple, depending on what you want.

User profile REST API connections

Description

We need to connect what data we have so far to the REST API. There should be a streamlined process after #4 for making authenticated REST API calls, so all we'd need to do is grab the data and replace the static data! :)

Dependents

Depends on: REST API backend ticket & #4

Authorization flow frontend

Description

Once the backend authentication flow is established, we need to present a new user with the login screen,
and store the credentials locally on the device.

If we don't have enough information to fully create a valid user object, that is ok - that means for this ticket,
we don't need to actually hit the signup endpoint, but rather just have the frontend for logging in via oauth
and getting the webtoken so that, in a future ticket, we can add a 'signup' form which actually hits the
endpoint.

Perhaps this would work for storing token? https://docs.expo.dev/versions/latest/sdk/securestore/

Spec

  • App opens to login authentication iff the user has not authenticated before
  • token stored locally in a secure (encrypted) fashion

Create user profile mockup

Description

The first big feature we need to implement after authentication is the user profile view.
We need to figure out what (minimally) the user should have on their profile and make a mock
view of what that would look like in the app.

Spec:

  • Profile photo
  • Bio
  • anything else we determine; we can discuss this on the Tuesday standup

Note: there is no backend implementation yet, so for now
let's create just the UI. Once the user authentication flow
is in place, we will pull data from the backend.

Design: Search + Join Challenge Page

Frontend for searching for a challenge (if we want to have public challenges)

  • By title?

Frontend for previewing a challenge you have been invited to / searched for

  • Title, description, friends which are in the challenge
  • Join button

When you join, perhaps another page comes up which asks you to associate the challenge with a habit. Or create a new habit?

Add Redux

Description

Create a redux store in the backend for storage across screens.

Design: Profile Page

We need a profile page design.

Includes (I THINK):

  • Profile photo
  • Bio
  • Habits you're working on, with privacy settings displayed
  • Mutual challenges, public challenges
  • Friends (count)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.