Buoy

buoy.netlify.app

Overview
MVP
Post-MVP
Code Showcase
Code Issues & Resolutions

Overview

Buoy is a social app that encourages users to be empathetic and open about their emotions while removing the showmanship and clout present in many online spaces. Users journal their thoughts and anonymously cast them out to 'sea' for others to view. Users can choose the color of their thought to represent how they're feeling, and give their thought helpful tags. While at sea, a user can watch the anonymous thoughts of others drift by based on color, tag, or location.

MVP

The Buoy MVP will provide frontend user account creation, deletion, and updating. Users will be able to write, view, and delete thoughts, with a separate screen for viewing the thoughts of others. User account information, thoughts, colors, and tags will be stored on a Ruby on Rails backend.

Goals

Ruby on Rails backend for storing user info, thought info, colors, tags, and likes.
Frontend user account management (CRUD).
User can create, customize, and delete thoughts (CRD).
Screen showing thoughts of other users.

Challenges

Buoy's data requires more complex relationships than I've made before.
Creating a strong visual design.
Implementing location for thoughts, and filtering sea of thoughts based on user location.

Libraries and Dependencies

Library	Description
Rails	Web app framework used for the restful API backend.
Rack-Cors	Cross-Origin Resource Sharing support for Rails.
Pry-Rails	Replace Rails console default IRB with Pry.
React	Frontend framework.
Axios	Promise based HTTP client for the browser and Node.js.
React Router	Routing for frontend.
Styled Components	Styling management for React components.
React Spring	Physics-based animation library for React.
d3-ease	Easing curves for animation tweaking.

Client (Front End)

Wireframes

Full Wireframe

Landing

Account Details

Account Edit

Create Thought

Thoughts

Sea

Full Album

Component Tree

Dashed lines indicate shared components

Component Hierarchy


src
|__ App.jsx
|__ screens/
      |__ Landing.jsx
      |__ Login.jsx
      |__ Register.jsx
      |__ AccountDetails.jsx
      |__ AccountEdit.jsx
      |__ CreateThought.jsx
      |__ Thoughts.jsx
      |__ Sea.jsx
|__ components/
      |__ Header.jsx
      |__ Nav.jsx
      |__ NavMenu.jsx
      |__ SearchBar.jsx
      |__ shared/
            |__ Button.jsx
            |__ Input.jsx
            |__ ProfilePic.jsx
            |__ Popup.jsx
            |__ ThoughtListing.jsx
|__ services/
      |__ api-config.js
      |__ auth.js
      |__ users.js
      |__ thoughts.js
      |__ likes.js
      |__ tags.js
      |__ colors.js

Component Breakdown

All components are functional components.

Component	state	props	Description
App	y	n	Renders the Header and handles routing. Keeps state for UserInfo and UserThoughts.
Landing	n	y	Splash page pre-login/registration. Does not show if site visited with valid JWT.
Login	y	y	Form for logging in. Redirects to Sea upon successful login.
Register	y	y	Form for registration. Redirects to CreateThought on successful registration.
AccountDetails	n	y	Shows basic account info with link to AccountEdit and button for account deletion.
AccountEdit	y	y	Form for updating account info.
CreateThought	y	y	Form for creating new thoughts. Adds to UserThoughts state of App.
Thoughts	n	y	Shows reverse-chronological list of user's thoughts. Ability to delete thoughts. Pulls info from UserThoughts state of App.
Sea	y	y	Shows a feed of user thoughts, filterable by color, location, and tag.
Header	n	y	Header renders Nav, NavMenu, and SearchBar when needed.
Nav	y	y	Render user icon and login/register/logout links..
NavMenu	n	y	Links for navigating Buoy.
Button	n	y	Shared button with props for onClick, Link, color, content, etc.
Input	n	y	Shared input with props for name, type, placeholder, etc.
ProfilePic	n	y	Shared icon displays user icon from UserInfo state of App.
Popup	n	y	Shared popup for user alerts with props for content, color, button, etc.
ThoughtListing	n	y	Shared component for showing a thought with props for thought content, info, etc.

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Backend
Initialize Rails	H	0.5 hrs	0.25 hrs	TBD
Install Dependencies	H	0.5 hrs	0.25 hrs	TBD
Scaffold Tables	H	0.5 hrs	0.25 hrs	TBD
Assign References	H	0.5 hrs	0.25 hrs	TBD
Assign Validations	H	0.5 hrs	0.25 hrs	TBD
Set Up Auth	H	1.0 hrs	0.25 hrs	TBD
Set Up Routes	H	0.5 hrs	1.0 hrs	TBD
Configure Controllers	H	0.5 hrs	1.0 hrs	TBD
Rails Testing / Fixes	M	2.0 hrs	1.0 hrs	TBD
Frontend
Initialize React App	H	0.5 hrs	0.12 hrs	TBD
Install Dependencies	H	0.5 hrs	0.12 hrs	TBD
Remove React Fluff	L	0.5 hrs	0.12 hrs	TBD
Set Up File Directory	H	0.5 hrs	0.12 hrs	TBD
Set Up Screen Routing	H	0.5 hrs	0.12 hrs	TBD
Set Up Services and Auth	H	1.0 hrs	0.5 hrs	TBD
Set Up Component Shells	H	3.0 hrs	0.12 hrs	TBD
Initial Styling	M	3.0 hrs	3.25 hrs	TBD
Shared Comps	M	6.0 hrs	5.5 hrs	TBD
Login / Register Comps	H	2.0 hrs	1 hrs	TBD
AccountDetails / Edit Comps	H	2.0 hrs	1.5 hrs	TBD
CreateThought Comp	H	2.0 hrs	1.5 hrs	TBD
Thoughts Comp	H	2.0 hrs	1.5 hrs	TBD
Sea Comp	H	4.0 hrs	3.5 hrs	TBD
Advanced / Mobile Styling	H	8.0 hrs	9.5 hrs	TBD
Extra	H	5.0 hrs	7.0 hrs	TBD
TOTAL		47.0 hrs	40.25 hrs	TBD

Server (Back End)

ERD Model

API Endpoint Documentation

/users - index, post
/users/:id - show, put, destroy
/thoughts - index, post
  queries: color, tag
/thoughts/:id - show, destroy
/colors - index, post
/colors/:id - show, put, destroy
/tags - index, post
/tags/:id - show, put, destroy
/likes - index, post
/likes/:id - show, destroy
/profile_pics - index
/profile_pics/:id - show

Post-MVP

Plug for github and portfolio.
Screen transitions.
Background animations.
Loading indicator.
Sea gentle auto-scroll, user can rewind or fast-forward.
Thoughts searchable by content in addition to tags.
Thought location storing and filtering.
Email verification.
Forgot password feature.

Code Showcase

Coming soon.

Code Issues & Resolutions

A of all major issues encountered and their resolution.

indianakuffer / buoy Goto Github PK

buoy's Introduction