Building an Instagram Clone Web App

This project is part of the SOEN 341 - Software Process class at Concordia University.

The Task

In a team of maximum 7 students, implement an application (Instagram) using any programming language/ scripting language, frameworks, or any other tools of choice. All members of your team must have a good understanding of the tools used. Your documentation, both internal and external, must be clear enough to be easily understandable by a reader who may not be familiar with the language or tools used.

The completed application will have 4 features. Three will be provided by the instructor, the 4th feature will be decided by students.

The Goal Of This Project

• Learn modern web development based on agile principles.
• Work efficiently as a team by taking advantage of the latest tools & technologies available.
• Complete a functional web application in a limited time frame.

Core Features

• Be able to post a picture with description.
• Be able to follow an user.
• Be able to leave comment & like a post.

Team Members

• Quang Tran - ID# 27740654 (Github: QuangTran304)
• Shahd Yousef - ID# 40114313 (Github: shahdyousefak)
• Nareg Mouradian - ID# 40044254 (Github: naregschoolwork)
• Mélina Deneuve - ID# 40153103 (Github: Klivree)
• Tushar Raval - ID# 40124664 (Github: tusharraval102)
• Anonna Chowdhury - ID# 40127606 (Github: anonna16)
• Corinne Beaudoin-Pellerin - ID# 40121353 (Github: corinne-2000)

Technologies Used

> Programming language

Modern JavaScript / ECMA Script 6+ will be used in this project as the main programming language.

> Framework

We chose to build our web app with React framework along with Material UI. See the Getting Started guide. Quick start guide on how to create a new React app.

For Material UI, please visit this website to learn more.

> Database

We are planning to choose Firebase to host images, posts and other data in our app.

> Other Tools

npm

npm is a package manager for the JavaScript programming language.

Read on Wikipedia or see the Tutorials section below.

NodeJS

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that executes JavaScript code outside a web browser.

Read on Wikipedia or view a short explanation video in the Tutorials section.

Our To-do list

All the tasks assigned to each team member are listed on a Google Sheet. Click on this link to view the To-do list.

Our Collaboration Whiteboard

We use Collaboard as a collaboration platform where everyone is free to share their ideas, documents, add notes or draw. Click here to view to our collaboration whiteboard.

Tutorials

Technologies	Description
Basic JS	A very basic JavaScript refresher tutorial. Watch (optional).
Modern JS	New syntax & concepts. Very important, make sure to watch it. Watch or Read Article.
Node JS	Super short 3 minutes explanation. Watch.
npm	Basic explanation of npm in 3 minutes. Watch.
ESLint	Reduce your code headache (an error checker plugin for VS Code). Watch.
React JS	The main tutorial we should focus on. Using latest software versions. [Note]: some famous tutorials out there used older software versions so things may not look the same. I recommended watching this one.
Firebase	Firebase will take care of our entire backend & database so that we can focus on front-end development. Learn about Firebase here. Watch this video. Or the Complete playlist.