Instagram web app version replica

play with it and learn https://www.instagram.com/?hl=en

!important

I am gonna work on backend with Node js. In order to connect front-end with back-end, you guys need to understand a concept,fetch,calling data from backend with javascript. This might be overwhelming, but this is super important to make our website to be dynamic. We can have a group session on Saturday for me to cover this and show you guys some examples.

https://www.youtube.com/watch?v=Oive66jrwBs

Tech Stack

Front-end: semantic HTML / CSS + FlexBox + Bootstrap4(CSS Framework) / Plain(Vanilla) JAVASCRIPT

Back-end: Node js(Restful API) (Do not worry about this for the time being)

Reference

FlexBox: https://www.youtube.com/watch?v=G7EIAgfkhmg&t=2s

Bootstrap4: https://www.youtube.com/watch?v=hnCmSXCZEpU

We are only gonna use a few ui components from Bootstrap and implement our own grid and layout.

Template Literals(no more appendChild): https://www.youtube.com/watch?v=INPob8yPyBo

A few Javascript libraries we might use

time(Date): https://momentjs.com/

functional programming utility library(such as map, filter, reduce): https://lodash.com/

chart ui library: http://www.chartjs.org/

typed js: https://mattboldt.com/demos/typed-js/

If you think we need some helper js library, please do your research here and edit this README.md file

https://www.javascripting.com/view/quill

A few CSS library we might use

Animate CSS: https://daneden.github.io/animate.css/

Work Flow

Invision(Design prototype tool) => HTML/CSS(mobile first) => Lucid Chart (JS application logic chart) => connect with Back-end

Design

I sent over my sketch file(wireframe) via email, so please download sketch(you can download free trial version) https://www.sketchapp.com/ and start working on html/css

Documentation

We are gonna use Quip.com. I already sent out invitations to everyone. We will document every single group session we are gonna have and any helpful resources.
Click JavascriptNinjas to find HTML/CSS/JS

https://javascriptninjas.quip.com/folder/javascriptninjas

Communication

We are gonna use a private slack channel I already sent out an invitation to everyone There are three channels, HTML/CSS/JS

https://javascript-ninjagroup.slack.com/messages/C9N5NA82F/

Meeting

Sung will assign 3-4 tickets every Monday to each developer.

If you do not finish your tickets by Saturday, please drop them to backlog!

Every Saturday 10 am, we are gonna have a ticket grooming session / feedback time.

When we have to go over a new concept as a group, we are gonna use a codeshare editor I built: https://obscure-hamlet-33909.herokuapp.com/

DEV workflow

first time -

git clone

git checkout -b dev

git pull origin dev

When you want to push

git status

git add .

git commit -m 'be specific'

git push origin dev

Every time you work on dev branch, do not forget to pull

git pull origin dev (Let's say I worked on JS and pushed to dev, then co-workers should have the same code on their local files)