Components Under Construction

All Front End React Components

Profile Page "/"

Contains:

• Logo
• Log in link
• Sign up link
• Search bar, search button
• List of public dreams/fragments
• Browse dreams by keyword
• Small category cards (picture / event.category)

Functionality:

• Only appears to unauthenticated users
• Scrolls

Splash Page Dream Cards:

Contains:

• size 250x350
• event image 248x140
• dream notes div
• Date time in contrasting color h3
• Dream title (full) black h2
• No navigation bar
• Footer

Navigation bar

Contains:

• Logo
• Search Bar
• Profile picture
• Profile dropdown access

Login page "/Login

Contains:

• Form
  • Email address:
  • Password:
  • Login button active if state of form data validated
• Not a member? Signup!

Signup page "/Signup

Contains:

• Form
  • Name
  • Email
  • Password
• Already a member? Login!
• No navbar?

Authenticated User Home Page "/"

Contains:

• Navigation bar
• header:
  • Recent dreams

  • of dreams

  • of fragments

• Search bar
  • Search input
  • Search by dropdown (keywords, title, setting, emotions)

User Profile Dropdown:

Contains:

• List of dreams
• See all fragments
• User Profile Column
  • View Profile
  • Logout

Dream Cards:

within User Home page Dream Toggle

• Subordered by time
• Dream Name h4
• Fragment Count h2

Fragment Cards:

within User Home page Fragment Toggle

• 228x180 group picture
• Gradient light at top dark at bottom
• Group name H1 contrasting color

• members p

Suggested Groups Cards:

within User Home page Groups Toggle

• 309x180 group picture
• same as Your Groups Cards
• FRIENDS PROFILE PICTURES BELOW?

Group Page: "/groupId"

Contains:

• Navigation bar
• Informational header
  • Banner img 621 x 337 Full height left align
  • information right align 438x337:
    • Group Name h1
    • pin icon: city, state
    • people icon: # members PUBLIC?PRIVATE GROUP?
    • person icon: Organized by group.leader
    • Button: Join this group
• About - group.description
  • aligned and sized with banner img
• Upcoming events
  • Upcoming event cards sized with banner img include attend button
  • Limit five
  • button to see all?
• Past events
  • Upcoming event card sized with banner img no button
  • Limit one, button to see all?
• Discussion
  • Maybe event comments?
• Similar events nearby event cards
• Right side align with group information:
  • Organizer: picture and name
  • Members (#) profile pictures only limit 5 col 3 rows
• Footer

Event "/groupid/events/eventid"

Same visual format as Group

Create A Group

Click-through, not a form

• No navigation bar, just logo and exit anchor
• progress bar at top filled in 1/7 with 'STEP 1 of 7' below
• First set your group's location
  • pull location from user City/State. OPTION TO CHANGE LOCATION?
  • Next button
• Choose a few topics that describe your groups interests: Search for Categories
  • Suggested topics in clickable buttons below change color onclick
  • Next and back buttons
• What will your group's name be?
  • Input autofilled with " Group" also indication of characters left auto incre/decrements
  • Next and back buttons
• Now describe what your group will be about
  1. What's the purpose of the group?
  2. Who should join?
  3. What will you do at your events?
  4. Large text area 'Please write at least 50 Characters'
  • Next button enabled after 50 characters
• Almost Done, review our guidelines (PROBABLY SKIP?)
  • Next Button becomes Agree & Continue
• Unable to complete group Creation because of paywall.