Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
143 lines (101 sloc) 5.35 KB


social network application

Project Overview

Project Schedule

This schedule will be used to keep track of your progress throughout the week and align with our expectations.

You are responsible for attending squad standup at the begining and end of the day.

Day Deliverable Status
Day 1 Create Project Repo Complete
Day 2 Wireframes / Priority Matrix / ERD Incomplete
Day 3 Create new rails app, create db, scaffolding, test postman Incomplete
Day 4 Create react app inside client folder, create basic routing components Incomplete
Day 5 Create logical components, css styling, complete MVP Incomplete
Day 6 Add final touches, deploy the application Incomplete
Day 7 Present Incomplete

Project Description

rElate is a bare bones social network application that that integrates daily new article feeds on the landing page. The user can register, create profile, create posts and view other users.


Priority Matrix

MVP/PostMVP - 5min

The MVP functionality of rElate application consists of user and post. A user can post and their post will be saved, with option to delete post. The user will have the ability to read current news feeds and search a news related topic

PostMVP will feature friends options, comments to posts and likes dislikes to posts.



  • Create registration form to create user
  • Form should be able to create user and seed data if all params and conditions are satusfied


  • Create friends table and allow users to add friends

Architectural Design

Main component is app.js and mvp components include header, nav, user, post, footer, create user, login and out.


![alt text]('./erd_designs/Screen Shot 2019-11-07 at 10.14.07 AM.png') ![alt text]('./erd_designs/Screen Shot 2019-11-07 at 9.34.24 AM.png') ![alt text]('./erd_designs/Screen Shot 2019-11-07 at 9.58.12 AM.png') ![alt text]('./erd_designs/Screen Shot 2019-11-07 at 9.59.26 AM.png')

UI Components

header and footer components will be stateless components navbar component will have links to landing page, register, sign in components and is stateful once signed in the navbar component will feature a post component most the remainding components will use state.


Component Description
Header This component will render a background image and some font
Footer Footer component will include links to contact, and a variety of other links perhaps postmvp links
Register This component will render a form that accepts user input
LandingPage This component will render, search bar, news feeds and login sign up nav links
Nav This component will include links to login, sign in, landing page
Post This component is rendered after sign in, will render form to post text
signout This component will allow a user to sign out with a button click

Time frames are also key in the development cycle. You have limited time to code all phases of the game. Your estimates can then be used to evalute game possibilities based on time needed and the actual time you have before game must be submitted. It's always best to pad the time by a few hours so that you account for the unknown so add and additional hour or two to each component to play it safe.


Component Priority Estimated Time Actual Time
create rails app, basic setup H 2hrs
generate models, migrate, controllers, rest api crud, seed, auth, routes H 8hrs
create react app, basic components H 3hrs
api calls testing rendering api data H 3hrs
creating forms and validation H 5hrs
create lifecycle, functions, logic H 8hrs
manage components and decide if component functionality require their own components H 3hrs
putting all components together in app.js H 4hrs
css styling H 6hrs
version control via git -- add ., commit, push etc H 3hrs
deploy H 3hrs
Total H 48hrs

Helper Functions

Helper functions should be generic enought that they can be reused in other applications. Use this section to document all helper functions that fall into this category.


Function Description
Capitalize This will capitalize the first letter in a string of text

Additional Libraries



Library What it Does
axios javascript library for http requests, helps simplify calls like no need to .stringify and .json it has built in functionality to ease api calls
News Api used to get news feeds

Code Snippet

Use this section to include a brief code snippet of functionality that you are proud of an a brief description


function reverse(string) {
	// here is the code to reverse a string of text

Change Log

Use this section to document what changes were made and the reasoning behind those changes.


Original Plan Outcome

Issues and Resolutions

Use this section to list of all major issues encountered and their resolution.



You can’t perform that action at this time.