Skip to content

Instantly share code, notes, and snippets.

@BaaniLeen

BaaniLeen/Baani_GSOC_2018_Final_Report.md

Last active December 10, 2020 13:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BaaniLeen/c4bb39d5fe3f829040ae2ea3aa0513fd to your computer and use it in GitHub Desktop.
Save BaaniLeen/c4bb39d5fe3f829040ae2ea3aa0513fd to your computer and use it in GitHub Desktop.
Download ZIP
GSOC 2018 Final Report - Baani
Raw
Baani_GSOC_2018_Final_Report.md



GSoC 2018 Work Product - Baani Leen Kaur Jolly

Student: Baani Leen Kaur Jolly

Github: @BaaniLeen

Mentors:

Admin: May

Live Deployed Apps

Github Project Repos

Documentation of the Projects

Aim

Systers Open Source GH-Pages project acts as an interface about Systers Open Source to the world. It helps the newcomers get started head-on with contributing to Open Source by solving the 2 major problems they face, whom to contact to get issues assigned and which issues should one begin contributing to Open Source with. It also integrates the member data with their Github Account using the Slack Inviter App and thus, helps reduce the spamming on the same. It creates a database about all the Systers community members on the MongoDB database stored on MLab, which can be used for ensuring a safe, harrasment free environment in the community.

Technology Used

  1. Systers Open Source Website - Mean Stack (MongoDB, ExpressJS, AngularJS, NodeJS)
  2. Systers Open Source Slack Inviter - NodeJS app with Jade (Pug) being used for templating

Accomplishments

Here are all my PRs made during the GSOC Period:

Below are some of the PRs Phase-wise:

Phase 1

  • Transferred the existing codebase from Jekyll to Angular, while maintaining consistency. (PR#177).
    • Later in the meeting it was decided that we build the app from scratch in Angular and thus, this PR was closed.
  • Set up the Angular App from scratch using Material Design Angular Bootstrap and Angular CLI : (PR#183)
  • Create Header and Footer. (PR#185)
    • Added a Sideclass to collapse all the tab items as drop down items for smaller screens.
    • Implemented routing in Angular 5 to display the router-outlet between the Header and Footer.
  • Developed the Contact Us Page. (PR#188)
    • Implemented a card with the info about Community open sessions and phone numbers having information on how to contact Systers Open Source community.
  • Developed the About Us Page. (PR#202)
    • Added content about Systers OSS, statistical data regarding the community engagement.
  • Developed the Home Page Slider using Angular Material Design Bootstrap carousels. (PR#199)
    • Maintained high code modularity using ngFor for placing each of the images, whose path is given in an array into the Home Page slider. Details can be found here.
  • Created a JSON file Database for Programs like GSOC, Outreachy.(PR#189)
  • Developed the Projects Page.(PR#191)
  • Used Bootstrap cards, spacing and indentation along with Angular directives to create a highly modular code.
  • Ensured the mobile responsiveness of the App.

Phase 2

  • Developed the Non - Coders methods of Contribution. (PR#211)
  • Developed the OSS Workflow Diagram. (PR#212)
  • Developed the Newcomers Resources Page. More details can be found here.(PR#225)
  • Setup a MongoDB Database on mLab for Systers Open Source. Connected to it using the terminal. Inserted the JSON data into the MLab database. (Done on MLab - Issue#217)
  • Developed an API to connect an existing Angular 5 App to the MongoDB Database using NodeJS/ ExpressJS. (PR#219). The code was written for connecting to DB, but as discussed with mentors, was waiting for the code to be tested by creating REST APIs to display the data on the Programs page, before this code was merged.(done through PR#240). PR#240 was built on top of the code written in this PR, and since in order to merge both it would require double the efforts, this PR was closed and PR#240 was merged.
  • Developed an FAQ Page. (PR#224)
    • Used ngBootstrap collapse and toggle. Accordion class could only be used till Bootstrap 3.
    • Inserted ^/v arrows (font-awesome arrows) to depict the closed and opened questions in the FAQ sections. Implemented it by using span and playing around with the visibility of the icons after a lot of unsuccessful attempts.
  • Used Bootstrap Classes and CSS media queries to ensure mobile responsiveness.
  • For highly modular and beginner friendly code, I rendered the content on the cards dynamically from the array of data elements created making it very easy to insert/modify or delete a card.

Final Phase

  • Developed the Program Page. (PR#239)
    • Ported the Program Page to Angular.
    • Used the Data on the Program Page from the MLab database by creating REST APIs. (Testing for PR#219)
  • Developed the Systers Open Source Slack Inviter.
    • Set Up Angular App and connected it to MongoDB. (PR#18)
    • Created RESTful API to send information from the App to MLab. (PR#19)
    • Ported the Home Page to Angular. (PR#22)
    • Added Github Authentication with the user’s Github email ID being inserted in the database. (PR#26)
    • Send an automatic email invite to the user's Github email ID with the Slack inviter link. (PR#27)
    • Used Jade (Pug) for templating, since we want to access the user’s variables on the client side.
    • Developed the Terms and Conditions UI. (PR#28, PR#34)
    • Developed the email template, the error and success Pages in Jade. (PR#38, PR#41, PR#43, PR#47)
  • Developed First Timers Issues on the Newcomers page. (PR#263)
    • Used the Publiclab upstream repo to integrate the first timers issues onto the website.
    • Used ngBootstrap Tabset to navigate between the different technological stacks and thus finding first-timer only issues related to it.
  • Added navigation between all the 4 components on the Newcomers Page. (PR#264)
  • Deploy both the Apps to Heroku. (PR#268, PR#36)
  • Added Travis CI for the Heroku Deployment(PR#53)

I also Documented the projects extensively. Documentation for Systers Open Source Website: https://docs.google.com/document/d/18X83wQjltI2PyWmYqNx4cHvGdTBTu2NaWnlIizdsLO8/edit?usp=sharing

I fixed bugs, corner cases, worked on UI enhancements and ensured mobile responsiveness of the Slack inviter. ( PR#206, PR#244, PR#249, PR#250, PR#253, PR#259, PR#260, PR#261, PR#262, PR#275, PR#277, PR#278, PR#279, PR#280, PR#281, PR#282, PR#290, PR#291, PR#292, PR#48, PR#49, PR#50)

You can know more about my weekly accomplishments from my wiki page

Future Development Opportunities

  1. Add a live map on the Systers Open Source Home Page to indicate the demographics of the community.
  2. Group the newcomers issues based on the technology needed to solve the particular issue irrespective of the tech stack for the repo. Eg. A newcomer issue for the fixing a bug which requires only the knowledge of HTML, will be put in the HTML category, whether it is built on the MEAN stack or is a Django app.
  3. Avoid duplicate emails from being sent through the Slack inviter.
  4. Make the Newcomers Issues open up in a new tab by default on click.
  5. Add more rigorous testing.
  6. Add testimonials to the Systers Open Source Home Page.

My GSoC Experience

I have written down Weekly reports and Blog Posts documenting my journey through GSoC.

Takeaways

  • From the person who knew nothing about Angular or NodeJS to the one who made an entire working Application in the MEAN stack from scratch, the journey has been highly rewarding!
  • Learnt to work in a diverse team and incorporate everyone’s suggestions.
  • Got the opportunity to work with a global team and learnt to adapt to my mentors' time-zones so that we have maximum overlap in our work timings.
  • Learnt good coding practices, working with Linters, and writing concise and modular code.
  • Learnt to ask in the community for help whenever I get stuck, after I put in my efforts. No doubt is stupid.
  • Systers is one of the most warm and welcoming communities, and I am super glad to be a part of it. From the Team Bonding activities to the GSoC happy hours, the 1:1 meetings with the mentors, the learning graph I had this summer was exponential.

This has definitely been the most amazing and fruitful summer so far, with an exponential learning graph, made easy with the support from my project Admin, mentors, and my fellow GSoCers. A huge Thank you to everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment