Git Product home page Git Product logo

instagratification's Introduction

Instagratification - SOEN 341

Build Status License

This project is about creating an Instagram like website. There will be three core features as follows: Post a picture, Follow a user and Leave comments to a posted picture. Additionally, one extra core feature will be implemented which will be decided by our team and approved by our client which is our teaching assistant.

Build Status License

Team Members

  • Wei Chen Huang (Wilson) | willyyhuang
  • Massimo Triassi | m-triassi
  • Ramsha Khalid | Ramshaaa
  • Marieme Kourouss | mariemek
  • Robert Nittolo | RobertoNittolo
  • Aymen Metallaoui | AymenMetallaoui

Learning Laravel

Laravel has the most extensive and thorough documentation and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.

If you don't feel like reading, Laracasts can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.

Languages and tools that will be used:

  • PHP
  • HTML
  • CSS
  • JavaScript
  • Framework: Laravel, React

License

Instagrafitication is open-sourced software licensed under the MIT license.

Demo

The following is a number of gifs and images demoing the functionality of this project. Please excuse any artifacts in the gifs that is caused by the capture software used.

You may also notice that many users have the same image posted on their profile, this is a symptom of how quickly we generated our users and their posts. The Unsplash API was unable to supply a new link to an image fast enough, likely caused by caching the response from an API call.

Login and like

Logout and Register a new Account

Upload an image

Follow another User

Comment on a Photo

Search for a User

instagratification's People

Contributors

aymenmetallaoui avatar dependabot[bot] avatar m-triassi avatar mariemek avatar ramshaaa avatar robertonittolo avatar willyyhuang avatar

Watchers

 avatar  avatar  avatar  avatar

instagratification's Issues

A user can unfollow

As a user, I want to be able to unfollow a user that I previously followed.

Risk Level: Low
Priority Level: Medium
Story Points: 3

A user can like a picture

As a user, I want to be able to like a picture so that I can show my appreciation.

Risk Level: Low
Priority Level: Medium
Story Points: 3

A user can view any other user's profile

As a user i should be able to view a single users profile page, including my own.

This issues requires a function show() in a UserController, as well as a route that references said function. The route should accept a single parameter, the user's ID, and using that should return the user with their associated posts (hint: look into ->with()) to a relevant view. You may need to create the associated view.

Depends on #30 being merged first.

Risk Level: Low
Priority Level: Medium
Story Points: 3

Set up CommitLint

CommitLint will ensure commit messages are of a certain format

  • Setup CommitLint

A user can view a post

As a user I should be able to view a single post.

Requires a function in a PostController, a route referencing that function. The function should take a parameter in the url, such as the post's ID and return it to the appropriate view, which you may need to create.

Risk Level: Low
Priority Level: Medium
Story Points: 3

Photo component is off centre

Where ever a Photo component renders it is slightly justified to the left, this is likely to do with the changes from #66. The component should be centered in the page

image

A user can delete their comment

As a user, I want to be able to delete my previously posted comments.

Risk Level: Low
Priority Level: Medium
Story Points: 3

A user can post a picture

User Story:

As a user, I want to post a picture on instagratification so that the public can view it.

Risk Level: High
Priority Level: High
Story Points: 5

Use React to handle profile page view

At the moment, we have a mix of php and react for profile page view
Create a component named Profile to handle every actions and to render reusable components

A user can follow another user

User Story:

As a user, I want to follow another user so that I can view their specific post.

Risk Level: High
Priority Level: High
Story Points: 8

Add coding standards enforcement

The project should enforce the backend coding standards.

This can be achieve with PHP-CS-Fixer. It should be installed globally on developers systems. To solve this issue, a default .php_cs file should be added. Additionally, it should be run on the project root.

Comment component

Instead of using Photo Component to handle the comments, make a Comment Component that will handle all actions related to comments (Edit, Delete)

A user can search another user

As a user, I want to be able to search another user that I follow so that I can view their news feed.

Risk level: High
Priority level: High
Story points: 3

Style page title

image

currently by default we have this page title, please go through every view and update the page title and possibly icon

Header Refactor

Refactor the app header to react component (instead of php files)
The header will have following functions:

  • Link to home page
  • Link to profile page
  • Search input
  • Link to Login
  • Link to Register
  • Link to Logout

A user can delete a picture

As a user, I want to be able to delete a picture that I have previously posted on the website.

Risk Level: Low
Priority Level: Medium
Story Points: 3

Add Acceptance Tests

Seems like we're missing Acceptance tests. Add Dusk Tests that verify the pages contain what they should, etc

Set up front-end dependencies

eslint configuration for all javascript linting
add antd as front-end design library
set up babel-plugin-import
prettier configuration

A user can leave a comment

User Story:

As a user, I want to leave a comment to a posted picture so that the public can view it.

Risk Level: High
Priority Level: High
Story Points: 3

Set up Docker

Docker would allow for seamless and instant project set-up across multiple developer machines.

  • Create Docker-Compose.yml.
  • Create Dockerfile.

Test: Write core Feature Tests

There are a number of tests that need to be written. These should test core functionality:

  • (Un)Following a user
  • View a post
  • Like a post
  • Comment on a post

User profile does not have correct posts

User profile currently does not have posts linked to the user specified, the posts rendered by the photo component belong to the user that is currently signed in.

Priority: High
Risk: Low

Install static analysis tool

The Code requires static analysis to be performed on it, so that inefficiencies and problems can be automatically flagged. This is a requirement for Sprint 4

Add project Demo screenshots

Due to the current situation, a live demo of the application is not possible, so, instead some images should be added demoing the functionality of the website.

These can be still images, or Gifs. They should be added directly to the ReadMe

A user can view any profile page (including his own).

As a user, I want to be able to see any user's profile with the appropriate layout: ( profile picture, following, followers, number of posts, and the posts themselves.

Risk Level: Low
Priority Level: Medium
Story Points: 3

Photo component cant be repeated on the DOM

Attempting to add the photo component multiple times in line doesn't seem to render the component more than once. this will be a requirement for generating an image feed.

See this branch for a direct example. There is a foreach that iterates 3 times in index.blade.php but the component is only rendered once.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.