iChilliGram CLONE

The following README contains information regarding the layout of this instagram clone.

Overview

This is a full CRUD instagram clone that allows users to post img links to the app, comment on, update and delete images.

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Component Breakdown
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

INSTAGRAM clone is a nearly identical and fully functional instagram app. Users are able to post images and edit captions. They are able to like and comment as well.

MVP

The Minimum Viable Product should be a well-planned, easily-communicated product, ensuring that the client's deliverable will be achievable and meet specifications within the time frame estimated.

_The INSTAGRAM clone MVP will be able to perform full crud on user photos.

Goals

• Posting pictures.
• Being able to comment on pictures.
• Being able to edit photo comments.
• Users will be able to add username to comments.

Libraries and Dependencies

Use this section to list all supporting libraries and dependencies, and their role in the project. Below is an example - this needs to be replaced!

Library	Description
React	Housing all app components.
React SemanticUI	Styling of site.
Express	Adding functionality to buttons.
Ruby on Rails	Backend server.

Client (Front End)

Wireframes

Below are all the wireframes.

Wireframes

• Desktop Landing

Component Tree

• Component tree information

Component Tree

Component Hierarchy

This is what the component hierarchy will resemble. All components will have their own css file

src
|__ assets/
      |__ fonts
      |__ graphics
      |__ images
      |__ mockups
|__ components/
      |__ Header.jsx
      |__ Post.jsx
      |__ Update.jsx
      |__ Delete.jsx
      |__ NewPost.jsx
      |__ Comments.jsx
      |__ Likes.jsx
|__ services/
      |__apiConfig.js
      |__posts.js
__ screens/
      |__home
      |__post
      |__postdetail
      |__comments

Component Breakdown

These are the components listed in the app.

Component	Type	state	props	Description
Header	functional	n	n	The header will contain the navigation, logo, search bar, messages and profile picture.
Navigation	functional	n	n	The navigation allow users to explore more content(Post-MVP).
Post	class	y	y	The post will render the posts using cards in flexbox.
Comments	functional	y	y	The comments will render within post.
NewComment	functional	y	y	The comments will create new comment and render a small form.
Likes	functional	y	y	The likes component will add likes and render them on specific post.

Time Estimates

Use this section to estimate the time necessary to build out each of the components you've described above.

Task	Priority	Estimated Time	Time Invested	Actual Time
RUBY setup	H	7 hrs	hrs	TBD
Add Image and title Form	H	3 hrs	hrs	TBD
Create CRUD Actions	H	20 hrs	hrs	TBD
CSS styling	H	10 hrs	hrs	TBD
TOTAL		40 hrs	hrs	TBD

I am certain this will take longer than I expect it to in regards to ruby, I will start on that.

Server (Back End)

ERD Model

---

Post-MVP

Post MVP will include, user account creation/deletion as well as adding searchbar functionality.

---

Code Showcase

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

Code Issues & Resolutions

Use this section to list of all major issues encountered and their resolution.# PROJECT 4 README