/Instagram-Clone

This project is a part of the SOEN 341 class at Concordia. The project aims to create an Instagram clone web app.

Primary LanguageJavaScript

Building an Instagram Clone Web App

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

App screenshot

2023-02-17 11 34 55

Mobile view

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.