Giter VIP home page Giter VIP logo

scorelab / stackle Goto Github PK

View Code? Open in Web Editor NEW
105.0 10.0 148.0 5.73 MB

Stackle is an web communication portal aimed at providing Open Source organizations a platform to have discussions on their github projects and their issues. It provides Github intergration which allows adminstrator of an organization to create a forum thread for the particualr organization. Users signing in is able to view forums of the organizations they contribute to and engage in the forum discussions.

License: Apache License 2.0

JavaScript 60.09% HTML 11.50% CSS 2.55% Shell 0.14% TypeScript 25.34% Dockerfile 0.37%

stackle's Introduction

Stackle

Join the chat at https://gitter.im/scorelab/scorelab GitHub license Travis Build

Introduction

Stackle is a web communication portal aimed at providing Open Source organizations a platform to have discussions on their GitHub projects and their issues. It provides GitHub integration which allows the administrator of an organization to create a forum thread for the particular organization. Users signing in are able to view forums of the organizations they contribute to and engage in the forum discussions.

Implementation Details

MEAN stack is used for developing Stackle.

  • Front-End is developed using Angular
  • Back-end is handled by NodeJS using Express
  • MongoDB is used as the databases for storing data related to stackle

Architecture

Users interact with the application through the Angular front-end which communicates with Node-API to get and post data to the MongoDB server. The front-end also communicates with GitHub API to get data related to Users, repositories and organizations. Users can login to the application through auth0 login integrated to Stackle.

Architecture


Setting Up the Project

These are the instructions on how to setup the project locally.

Pre-requisites

  • NodeJS 6.X or higher
  • MongoDB Community edition

Installing MongoDB

On Windows

  1. Download the lastest production release of MongoDB (3.4.6 or higher) from here.
  2. Create the data directory to store all data. Create a the directory on the drive from which you start MongoDB. (Ex: If you are starting the MongoDB from the drive 'C'. You should create the directory as C:\data\db\ ).
  3. To start the MongoDB, fire up a command line and run mongod.exe (ex: "C:\Program Files\MongoDB\Server\3.4\bin\mongod.exe" )
  4. To connect to the MongoDB, use the mongo.exe shell. For that open up a command line an run mongo. (Ex: "C:\Program Files\MongoDB\Server\3.4\bin\mongo.exe" ).

For more information refer the MongoDB manual on installing MongoDB Community edtion.

On Mac

  1. Download the binary files for the desired release of MongoDB. Download the binaries from the MongoDB Download Center.
  2. Extract the files from the downloaded archive. For example, from a system shell, you can extract through the tar command: tar -zxvf mongodb-osx-ssl-x86_64-3.6.3.tgz
  3. Copy the extracted archive to the target directory. Copy the extracted folder to the location from which MongoDB will run. mkdir -p mongodb cp -R -n mongodb-osx-ssl-x86_64-3.6.3/ mongodb
  4. Ensure the location of the binaries is in the PATH variable. The MongoDB binaries are in the bin/ directory of the archive. To ensure that the binaries are in your PATH, you can modify your PATH. For example, you can add the following line to your shell’s rc file (e.g. ~/.bashrc): export PATH=<mongodb-install-directory>/bin:$PATH Replace with the path to the extracted MongoDB archive.

On Linux

For Ubuntu,SUSE, and Debian systems, you can install mongoDB Community Edition using .deb packages. The process varies from distro to distro, so I suggest you visit the link below, select your distribution.

Ubuntu terminal command: sudo apt-get update sudo apt-get install -y mongodb-org Debian terminal command: sudo apt-get update sudo apt-get install -y mongodb-org SUSE terminal command: sudo zypper -n install mongodb-org

https://docs.mongodb.com/manual/administration/install-on-linux/

Stackle API

  1. cd in to the stackle_api directory.
  2. Run npm install to install the packages required.
  3. Once all the packages are installed run npm start

Stackle App

Make sure you have the angular-cli installed.

  1. cd in to the stackle-app directory
  2. Run npm install to install the packages required.
  3. Once all the packages are installed, run npm start or ng serve -o

Running Tests (Protractor)

  1. Run npm install -g protractor to install protractor globally.
  2. To get started with a Selenium Server, run
    webdriver-manager update
    webdriver-manager start
    
  3. cd in to root directory and run ./ui-tests.sh
  4. To add more tests, edit stackle_tests.js located in stackle_app

Running with Docker

  1. Change the url in the database config file in stackle_api/config/database.js as url : 'mongodb://mongo:27017/stackle'
  2. In the root of the Stackle directory, run docker-compose build
    • If you are on Linux machine, execute the following steps to install compose.
      sudo curl -L https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
      sudo chmod +x /usr/local/bin/docker-compose
      
  3. Once build completes, run docker-compose up

stackle's People

Contributors

adhyandhull avatar agentmilindu avatar andrewjr350 avatar azisnaufal avatar bhavyaagg avatar charithccmc avatar digitaldina avatar gracepfohl avatar iammosespaulr avatar kalyan3578 avatar kartikpandey2 avatar kmehant avatar nandunbandara avatar nihalmpatel avatar octalpixel avatar padamchopra avatar psnmissaka avatar raghavpuri avatar shivamarora96 avatar shlokj avatar shravyanandyala avatar siddevelop avatar tanmayanand44 avatar tharindupr avatar thelukaszns avatar varunzxzx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stackle's Issues

Repo should follow Gitflow Workflow

This repos should follow Gitflow workflow and follow are the items you have to check. 
- [ ] There is a `master` branch and a `develop` branch.
- [ ] `master` branch is locked for direct commits and, 
  - [ ] Require pull request reviews before merging is active
  - [ ] Require status checks to pass before merging is active
    - [ ] Require branches to be up to date before merging
    - [ ] Appropriate Status checks are required
  - [ ] Enforce all configured restrictions for administrators is active
  - [ ] Restrict only maintainers group can push to the master branch
- [ ] `develop` branch is locked for direct commits and,
  - [ ] Require pull request reviews before merging
    - [ ] Dismiss stale pull request approvals when new commits are pushed is active
  - [ ] Require pull request reviews before merging is active
  - [ ] Require status checks to pass before merging is active
    - [ ] Require branches to be up to date before merging
    - [ ] Appropriate Status checks are required
  - [ ] Enforce all configured restrictions for administrators is active
  - [ ] Restrict only maintainers group can push to the master branch

Properly indent, format and remove unused variables from server.js

Before you describe your issue, idea or feature, please consider using this issue template.

Type of issue

Improvement detail

Short description on the issue

The server.js in stackle_api has some unused variables. Also the code is not properly formatted and indented.

Possible fix

I have opened a PR #77 which fixes this issue. I have reformatted and indented the code. I have also removed the unused variables.

Views are not rendered properly

Once the user logs in, the landing page view stays the same and navigating to profile or back to home does not do any change.

screenshot from 2018-02-13 22-05-28
screenshot from 2018-02-13 22-05-44

No Search Button & unpleasant User Interface

Search Button

While Searching Organizations Name, I found difficulty to submit search form details. Because there was no Search or Submit button and I've to use "Enter" usually user never expect this.

before_searchorg

SOLUTION , if we add a Search Button then it would be really helpful.

search_org_button


Home Page

The home page was not looking attractive to the user, and we know that first Impression is the last impression.

BEFORE
before_home
AFTER
newui_homepage


Profile Page

I've also tried to change the look of Profile page.

BEFORE
before_profile

AFTER
newui_profilepage

[Suggestion] Adding CORS module instead of custom written middleware

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Short description on the issue

Adding COR Module without writing custom middleware to handle cors issue. Redundant code on writing middleware for cors problem

Possible fix

Installing CORS module from the npm repository

Generate .gitignore using gitignore.io

What's the problem?

.gitignore files are not generated with gitignore.io

How can it be fixed?

I found two .gitignore (in stackle_app/ and stackle_api/) files which should be generated with gitignore.io. Stackle is built on MEAN stack so I'll use this technology (Node for _api and Angular for _app) to generate new .gitignore files.

Add status code to response

Before you describe your issue, idea or feature, please consider using this issue template.

Type of issue

Improvement detail

Short description on the issue

We should explicitly provide the status code for all the responses.

Possible fix

I have opened a PR #82 for this.

Fix Models

The models need to be updated to use ES6 syntax and camelCase wherever possible.

I have created multiple PRs fixing each of the model.
#93 For user model
#92 For stack model
#91 For post model

Suggesting to include an architecture diagram

Before you describe your issue, idea or feature, please consider using this issue template.

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Short description on the issue

In the readme, under architecture section, better to add an architecture diagram rather than explaining the architecture in words

Possible fix

Adding an architecture diagram to the readme

Comment is not validated in Validator

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

In app/lib/validator.js at validateCommentOnPost function only req params( ie postid) is validated but request body ( ie. comment) is not validated.

Add OAuth Authentication

Implement OAuth 2.0 Authentication to application

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Adding GitHub OAuth 2.0 to the application using PassportJS

Implement OAuth 2.0 for the application using PassportJS and maintain a server-side session to identify a request from users

Fix package.json validation issues

File : https://github.com/scorelab/Stackle/blob/master/stackle_app/package.json

Result from http://package-json-validator.com/

{
  "valid": false,
  "errors": [
    "Missing required field: version"
  ],
  "warnings": [
    "Missing recommended field: description",
    "Missing recommended field: keywords",
    "Missing recommended field: bugs",
    "Missing recommended field: licenses",
    "Missing recommended field: author",
    "Missing recommended field: contributors",
    "Missing recommended field: repository"
  ],
  "recommendations": [
    "Missing optional field: homepage"
  ]
}

Hi! I would like to work on this issue.

Feature similar to autocomplete

When someone is referring to a particular program/code, there should be an automatic completion feature- similar to the way people are tagged on social media. After completion, it will be a link leading to the source code to view/edit. This way, it will be easier for users to share and discuss existing code.

stackle-app fails to serve on angular server

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Short description on the issue

stackle-app angular build failing due to insufficient arguements in post service.

Screenshots for the issue

screen shot 2018-08-22 at 12 07 47 pm

Separate App and Server

Type of issue

  • Bug / Error
  • Idea / Feature
  • Improvment detail

Short description of the issue

This allows testing the API in-process, without performing network calls, with all the benefits that it brings to the table: fast testing execution and getting coverage metrics of the code. It also allows deploying the same API under flexible and different network conditions. Bonus: better separation of concerns and cleaner code

Possible fix

Merging #73 😄

Add Setup Information for MacOS and Linux

A good number of developers will not be using Windows as their operating system. Most of the open-source guys will be using Linux and some will be using MacOS. Please add the setup information for this project for both platforms.

Adding TestCase to Stacke_APIs

Adding TestCase to Stacke_APIs

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Adding Unit TestCases to test the basic endpoints of stackle Application

Using Mocha.JS and ChaiJS testing of basic endpoints of APIs can be carried out

Rewrite the stackle_app with Angular 4

Current front-end is written with AnguarJS. It is better to use Angular 4 fot the front end because then it will allow us to use Angular CLI which makes most of the work easy when deploying and building the app

Vague Homepage

The home page for Stackle is really vague and should contain more information about the project or it should at least by spread out evenly through the page. The information is sticked with the top and left and this makes the overall page look poor. The homepage needs to be updated to make the user experience better
screenshot from 2018-01-11 15-59-38

Need centralized error handling

Type of issue

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Short description of the issue

Every route is handling the error on its own which is just doubling the effort. It should handle all the error centrally.

Possible fix

I have created a PR #75. A middleware is added, which is working as an error handler. It will catch all the error thrown by any module.

Google Code-In 2017: Getting Started Issue

THIS IS A NOT A REAL ISSUE BUT A PLACEHOLDER.

All the practising PRs for Google Code-In 2017 should refer this issue. PRs referring this issue will be closed without merging. Do not refer this issue if you are NOT submitting a practice PR and need your work merged.

stack_app readme.md update

Before you describe your issue, idea or feature, please consider using this issue template.

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Short description on the issue

There should be gulp instead of grunt for building, testing and serving.

Possible fix

PR #101

UI - User profile component UI Design

Only relates to angular2 branch

Profile needs to contain details about the user. Data of the user can be fetched through the Github API. Need to discuss about what sort of information need to be displayed.
Following fields should be there

  • Name
  • Github handle
  • No of public repositories
  • Organization he's part of
  • No of post he/she created on stackle
  • Email
  • Link to Github profile

Linked to #15

USE RES.JSON INSTEAD OF RES.SEND

USE RES.JSON() INSTEAD OF RES.SEND()

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

res.json() includes json.stringyfy which is a more preferable way for JSON in express

Install docker-compose on linux

Docker-compose is provided by default in windows and mac machines, but not for linux, while installing docker.

Readme instructions to setup the stackle project through docker, should clearly mention steps to install docker-compose on linux machine.

Use ES6 const/let instead of var

Before you describe your issue, idea or feature, please consider using this issue template.

Type of issue

Improvement detail

Short description on the issue

We should use ES6 const/let instead of var for declaring variables.

Possible fix

I have created a PR #79 to fix this.

Edit the Readme and License

Readme file needed to be updated including a project setup guidance, a brief overview of the app and license type.

Issue template not available

An issue template would be really helpful in case of new users trying to look for solutions. Beginners may find it difficult to describe all the things in specific bug or a feature, so they can use the issue template to organize the issue in a better way.

Typos in README

There are a few grammatical errors/typos in the readme.
The introduction should read:

Stackle is a web communication portal aimed at providing Open Source organizations a platform to have discussions on their GitHub projects and their issues. It provides GitHub integration which allows the administrator of an organization to create a forum thread for the particular organization. Users signing in are able to view forums of the organizations they contribute to and engage in the forum discussions.

Create macOS steps to download

Currently, the README.md file includes the steps needed to set up compose on Linux. Many users on GitHub utilise macOS software, which is not compliant with the Linux directions. By creating a new code for downloading/setting up compose on macOS through Terminal, there will be many more contributors, pull requests, and projects. This new code will not only enhance production, but will largely influence collaboration of macOS users.

This change can be made by implementing a new code or adding on the README.md file so that there are steps for Linux downloading and macOS downloading, as well.

ADD STATUS KEY IN EVERY RESPONSE OBJECT

ADDING A STATUS KEY AND MESSAGE IN EVERY RESPONSE OBJECT SO THAT APIs CAN BE CONSUMED MORE EASILY

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

##Adding a status key in every response object. If an error occurs or data fetching failed then status: false otherwise if the response is successful then the status is true. This would make the API consumption more robust.

Repo should follow GitFlow workflow

This repos should follow Gitflow workflow and follow are the items you have to check.

  • There is a master branch and a develop branch.
  • master branch is locked for direct commits and,
    • Require pull request reviews before merging is active
    • Require status checks to pass before merging is active
      • Require branches to be up to date before merging
      • Appropriate Status checks are required
    • Enforce all configured restrictions for administrators is active
    • Restrict only maintainers group can push to the master branch
  • develop branch is locked for direct commits and,
    • Require pull request reviews before merging
      • Dismiss stale pull request approvals when new commits are pushed is active
    • Require pull request reviews before merging is active
    • Require status checks to pass before merging is active
      • Require branches to be up to date before merging
      • Appropriate Status checks are required
    • Enforce all configured restrictions for administrators is active
    • Restrict only maintainers group can push to the master branch

Structuring Routes

Creating Separate Routes files for user , stack and posts

Type of issue:

  • Bug / Error
  • Idea / Feature
  • Improvement detail

Routes.js files should be break into separate routes files for post , stack, and user.

UI - Create post / Discuss issue component UI design

Only relates to angular2 branch
The component that will be used by the user to create an issue(post).
Need to decide on the fields that are needed and how the user inputs those data.
Following fields should be there

  • Title
  • Description
  • Organization name (should automatically fill according to the organization user is in)
  • tags
  • link to issue (github)

Linked to #15

Error in Dockefile

mongo uses an image, skipping
Building api
ERROR: Dockerfile parse error line 19: unknown instruction: ORG.LABEL-SCHEMA.SCHEMA-VERSION

FIX WARNING FOR MONGOOSE CONNECTION

useMongoClient option while using connect function in mongoose

Type of issue:

  • Bug / Error / Warning
  • Idea / Feature
  • Improvement detail

DeprecationWarning: open() is deprecated in mongoose >= 4.11.0, use openUri() instead, or set the useMongoClient option if using connect() or createConnection()

ENH - Improve the UI of the Login page

Only relates to angular2 branch

Improve the current Login page interface design. The current design does not seem attractive. It also needs a footer.
Current background image repeats as well. Make the interface responsive as well

Linked to #15

Dockers should have proper Label Schema labels

This repos has a Dockerfile but it does not contain any Label Schema labels. Following are the lables we have to have on our Dockers.

  • name
  • description Shoud be on user's perspective.
  • url Should be SCoRe website
  • vcs-url Should point to GitHub repo
  • vcs-ref
  • vendor Shoudl be "SCoRe Lab"
  • version
  • schema-version

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.