wilsonziweiwang/ins

SOEN341 PROJECT

SOEN341

Description

INS is a web based application that provides users with a platform where they can post and view images. They can also follow their favorite users and comment on their pictures. The main aim of this application is to connect people through pictures.

Objectives

• The goal of our team is to build a Instagram-like website (PWA) and to provide the users a clear and simple user interface to share their pictures.
• platform that allows users to share their stories with others in an elegant way

Features

• User Database & Login Function

• Picture Description

• Like & Comment Function

Installation Guide

Languages and Technologies used

• React Framwork
• Javascript,(JSX Facebook, W3C Standard For Web Language)
• CSS
• HTML
• Git/Github

Authors :

• Ziwei Wang
  • ID : 26985459
  • Github Username : WilsonZiweiWang
• Zejun Zhang
  • ID : 40021402
  • Github Username : JAckZ97
• Zirui Qiu
  • ID : 40050008
  • Github Username : Pocket99
• Zhou Jiang
  • ID : 26390331
  • Github Username : StarAurora
• Yutao Meng
  • ID : 40022635
  • Github Username : EdwardaMeng
• Philippe Vo
  • ID : 27759908
  • Github Username : philippeVoNam

ins's Issues

Delete posts

users may delete their posts they don't want by clicking a button.

Posting page stylish

Using CSS for stylish the posting page.

Research on how to use Firebase

Look into how to actually use "Firebase"

Adding posts view development

We need to develop a view with forms that allow users to upload images (from a local source) and write descriptive messages for the photos. The view requires with two buttons(for now): post and cancel.
The post button will be disabled unless at least one photo is uploaded successfully.

Home page development

Develop a home page view that displays others' photos(the ones from your followings; for now), a search bar that can filter photos according to authors(for now). Initially, if users follow no one, display demo photos along with a message that encourages users to follow someone; then, attach some users' info and a follow link.

Uploading Image to webpage

Make a React Component to Upload user images on the webpage.

We should add some objectives to the REAME.md file

Objectives should explain what are the main philosophies of our application.

Maintain follow-user and post comment

Likes your following user image.

Implement like a post button

Posting Page HTML

Implementing the HTML for the page to post a picture and description of that picture.

styles file is needed

Although this website will be light weight and having clean interface, the styles file of the component are needed to make them looks better.

Presenting picture from Firebase to interface

We need to create a photo component

This component holds the view that users will see and also could contain the state that a photo might have: source link, size, etc. Another option is that the state could be passed from the redux store. Moreover, extra features could be developed and use a higher-order component to render them to this photo component.
For the view: refer to the image posted on slack.

1. Image
2. Like button; dislike button; comments
3. shared styles (like navBar etc)

We should add a project description to the README.md file

The project description should be 3-5 sentences to define what our application that we are building, will do.

Save user to database

After user registers to our app, we need to save that user to our database.

Modification needed for the README file

We should not have "Clear & Large button and Simple User Interface" in the README file as a feature.

Implement Follow User Button

Create the follow user button and be able to assign the follower to that user.

We need to create a component for comment

This component needs to hold the content of a comment and indicate the author who made the comment.

Personal page development

Need to develop a personal page view that displays personal info (Portrait; User name; No. of photos posted; No. of followers; No. of followings; Self-descriptive messages); then, list all the photos in the grid format.
The views will be displayed only if the page is logged in.