Project Worksheet

Project Description

This App aims to provide innovators, developers, and creators alike a communication platform, where they can post, read, and comment on various ideas, and build new relationships over common interests and potential future ventures.

Project Links

• Github Repo

• Heroku

• Website

User Stories

Simple descriptions of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the system.

As a(n) ______ , I can...

• User: Log in and securely use the platform.
• User: Share and get feedback on products, apps, ventures ideas I have.
• User: Receive and send private messages from and to other users.
• User: Track comments and upvotes on my ideas.
• Reader: Comment on and upvote ideas I feel strongly about.
• Collaborator: Reach out to the author and offer my help.
• Investor: Gauge user interest and viability of projects.

Down the road...

• User: Submit new versions with adjustments and new features.
• Premium user: Get add. features, like intellectual prop. rights with file sharing.
• Power user: Pin comments to the top of the thread.
• Web Designer: Submit mockups and models.
• Developer: Source new projects and request a link to an existing Github Repo.
• Developer: Showcase and submit prototype Apps for bidding.
• Startup Incubator: Source new business and development opportunities.
• Investor: Find new investment opportunities.
• Recruiter: Find new talent.

Wireframes

Theme & Fonts

Brights:

Corrected for accessibility:

black-ish: rgb(29,28,23)
teal: rgb(65,186,178)
orange: rgb(243,168,40)
off-white: rgb(247,247,248)

Darks:

Corrected for accessibility:

Blues:

Corrected for accessibility:

Fonts

Pairing 1:

font-family: 'Bebas Neue', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Source Sans Pro', sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato&family=Source+Sans+Pro:ital,wght@1,300;1,400&display=swap" rel="stylesheet">

Pairing 2:

font-family: 'Lato', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Source Code Pro', monospace;

<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&family=Roboto&family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">

MVP/PostMVP

Refer to: Team-Planning

MVP OBJECTIVES

• Renders all posts
  • Includes: Recent vs. Popular toggle
• Up and down-votes render a counter with corresponding styling
• Create New Post
• Renders one post with all comments
• Add/Delete Comment
• Users can:
  • Log in
  • Create an Account

Post-MVP OBJECTIVES

• Ind. post have a messaging icon that links to message form
• Inbox tab with all messages
  • Includes: All vs. Unread Toggle
• Threads between two users
• User Profile Info
  • Edit options

And then some...

- Detailed forms: added fields and ability to include video and images
- User Information stored
- Store cookies (have user remain logged in )
- Demographic information on who likes what ideas
- Push notifications
- Live commenting

Timeframes

Unless otherwise noted, time is listed in hours:

BEFORE

Component	Priority	Team Member	Estimated Time	Actual Time
Create React Repo and install all dependencies	H	Tam	1	30min.
Create wireframes and themes	L	Tam	2	1.5
Update Worksheets for Project Approval	H	Tam	1	1
Create Schemas and Models	H	Tam	1	1
Write Basic Ratoures and corresponding URLs	H	Tam	1	1
Draft React Architecture	H	Tam	30min.	30min.
List MVP and Post-MVP features based on team discussion	H	Tam	1	45min.

DURING

Component	Priority	Team Member	Estimated Time	Actual Time
	H
	H
	H
	H
	H
	H
	H
	H
	M
	L
	L
Total	H

Project Structure

Back-end:

Models:
- user
- idea
- comment
- message

Refer to References for detailed Schemas.

Routes and Descriptions

Refer to References link above for details.

External APIs (if necessary):

• This API here
• That API here

Front-end Routes:

• Login page

• UserForm

• Homepage: Search by Keyword

• Dashboard: All ideas posts (Recent & Upvoted)

• Post: Single post with details and comments

• Settings: User page & account information

• PostForm

• CommentForm

Later:

• Inbox: All private messages
• Thread: All messages between two specific users
• MessageForm
• Dashboard: Sort by - this week, month, year
• Account Info

Functionality Details to be listed below...

Components and Descriptions:

Component	Functionalities
Login Form	Create account (post) or log in (get)
App	N/A
Layout	N/A
Nav	Clickable links
Footer	N/A
Home	Recont vs. Popular toggle
Posts	Up/Down-vote counter
Post Form
Post
Comments
Comment Form
Comment
Inbox
Message Form
Thread
User Profile
Settings

Additional Libraries

• Styled-Components
• Framer Motion
• Animé

Code Snippet

Route that used all three (user, post, and comment) models:

Used states to show/hide details sections:

Used ternary to avoid rendering undefined elements: