Public Lab Research note

GSoC proposal: Card UI/UX Implementation v2 & Bootstrap 4 Upgradation

by amitsin6h | March 04, 2018 19:15 04 Mar 19:15 | #15859 | #15859

About me

Name: Amit Kumar Singh





Gitter: amitsin6h

College: Marwari College Ranchi, Ranchi University

Location: Ranchi, Jharkhand, India

I am a Open Source Enthusiast, Researcher, Developer. Currently, I am a final year student pursuing my bachelors from Marwari College Ranchi which is affiliated with Ranchi University.

Project description

Part 1: Card UI/UX implementation

I will be implementing card UI/UX design in the website this will give a great look and feel to the Public Lab website.

Recent Activity / Posts DesignDemo:

Profile DesignDemo:

Question DesignDemo:

Question and Answer detail DesignDemo:

Part 2: Upgrading to Bootstrap 4


For this project I will also involve new contributors as most the place it would require class change in the html or some css change in code. This will also attract new contributors to solve the issue and help them to successfully make the PR.

Helpful links for upgrading to Bootstrap 4. (On-line migration tool) (On-line migration tool)


General Recommendations / Miscellaneous

Make a branch called something along the lines of bootstrap-4 in the publiclab/plots2 repository. All PRs made for this issue and all related ones need to use that branch as a base and not master. That branch would be merged into master only when the migration would be complete, we would verify the results and optionally, bootstrap 4 comes out of beta.

Fixing pagination

Fixing the navigation bar

Deprecated --- Replace with modern alternatives

Refactor all existing wells into cards.

Refactor all existing panels into cards.

Refactor all existing thumbnails into cards.

Glyphicons, if any, should be replaced by other icons. Let's use only font-awesome for all our icons, they are good enough for most of our use cases.

Grid System

Bump all grid sizes by one. (eg: sm becomes md, md becomes lg and so on).

Add support for new xs tier for improving support at smaller mobile/IoT devices.

Abstract/summary (<20 words):

I will be working towards implementation of Card UI/UX to Public Lab website and bring a great look & feel.


My project is trying to solve UI/UX of the website and will give a new look and feel to the Public Lab website.


1. First I will work with the [] page, the place where we see "Recent community Activity". Implementing card design to it will give a great look. As am ready with the design it wont be difficult for me but I need to take care that the design is responsive.

2. Second I will work with the [] page, the place where see "Activity". I will be implementing card design to it and for this also I will be using the same design which is used by the home page in the "Recent community Activity" so it wont be an issue in implementing.

3. Third the [] user profile page. In this page I will be implementing card design as well as I will give dashboard like look and feel in profile page.

4. Fourth the [] QA page and its detail view page. In this page I will be implementing card design to the QA page and also in the detail view of QA. I have also planed to shift the position of [Post an answer] box reason to do this is, If QA detail view pages has lots of answers and comments user would have to go to the bottom to answer that particular questions which has lots of comments and answers. And I think this will be a problem so planned to keep it on top. See the demo of Question and Answer detail Design for detail.

5.Fifth, after the part 1 is done. I will start my work towards bootstrap 4 upgradation. Upgrading to bootstrap 4 wont be a problem for me as I have great experience working with bootstrap.



First Phase: May 14, 2018 - June 15, 2018

May 14 - May 19: Create design for the Home page and Dashboard Page.

May 20 - May 25: Create design for the Profile page.

May 26 - June 5: Fetch the required data which is need to for Profile page design.

June 6 - June 15: Check the responsive and fix bugs.

Submit the First Phase.


Second Phase: June 16, 2018 - July 9, 2018

June 16 - June 19: Create design for the Questions and Answer page.

June 20 - June 24: Create design for the Questions and Answer detail page.

June 25 - June 30: Check the responsive and fix bugs.

Complete first part of the project and start the second part.

July 1 - July 9: Increase Grid Systems.

Submit the Second Phase.


Final Phase: July 10, 2018 - August 5, 2018

July 10 - July 15: Fix pagination and navigation bar.

July 15 - July 17: Remove glyphicons and Use of font awesome.

July 18 - July 20: Change labels and badges, and introduced the .badge-pill class to provide rounded corners.

July 20 - July 27: Replace deprecated code to modern alternatives.

July 28 - August 2: Feedback and fix according to it.

August 3 - August 5: Review all the work done.

Make the Final submit.


What resources will you need: people, documentation, literature, sample data, hardware if applicable

I only need Mentors guidance to do this project.

First-time contribution

I have made recent few contribution in Public Lab still their are few Pull Request which require reviews and merge and also will be making more contribution to Public Lab.

Issues Created

Pull Requests


It all started due to my passion and curiosity to learn new technology. I was in class 12th when I wanted to know how website are built and after finding the answer in google. I came to knew about blogspot, wordpress, other CMS, and also came to know how to make make website by coding. Then I started to learn HTML & CSS, Javascript, Jquery and this is how learnt website development. Same time during the website development I came across to factors Static website and Dynamic website this helped to learn server side programming language Python and PHP was my first server side language that I learnt. After this I got curious to know how android apps work and this curiosity pushed me towards Android development and then I started to learn Java and also created few Android apps. During the android development I also came to know about json data type. I have also worked with few startups and companies from my area Ranchi, Jharkhand. I have worked as Software developer. Technologies that I have used and worked with are: Ionic for Hybrid App development, Android Development, Python, PHP, Java, Ruby, Ruby On Rails, Nodejs, Fullstack development using MEANjs, HTML & CSS, Javascript, Frameworks like Django and Codeigniter, Hybrid software development using Nodewebkit.

Below are few links which shows my experience, love towards open source


I have worked with few startups and companies and we used to work in team when the project was assigned.

Their are few projects which I worked with someone whom I don't even know , It was the first Government Hackathon which I participated but on the day of hackathon those who were single was asked to form a team and I was one of them and after that we formed team of 2-3 and we discussed lots of idea for our app that we were making, during the time lots of things happened and I noticed that in a team work one should never think negative ,nor use such words which demoralize any team team member. We should always try to motivate and we should never lose the hope, and that Government Hackathon we came in Top 10. Second hackathon we came third and in third hackathon we came first .

I have been also contributing to other open source project and also volunteering some of the organization and what ever the work is assigned we do it in team. I have also organized successfully events and workshops with my team.

This how understand the meaning teamwork.


The first time I visited Public Lab and I found no new fto issues or beginners friendly issue but I wanted to start my contribution with Public Lab so made comment that I don't see any open fto or beginners friendly issues and people of Public Lab are great they helped to make my first contribution and yeah Jeffery Warren tagged me whenever their was new fto based issue and helped me to make contribution to Public Lab projects. I see Public Lab very supporting and friendly community.


So as my project is mostly based on UI/UX designing and we see people like love to use app or website which has great UI/UX and I hope to make the Public Lab website more amazing with my UI/UX skills. I see in most of the pages specially on the profile page when their is lots of activity and post its does not get readable and I hope to solve this issue from the website. I will be also trying to improve the UI/UX of the website as far as possible.


Do you understand this is a serious commitment, equivalent to a full-time summer job? Tell us how you'll structure your schedule from day to day!

I understand that this is a serious commitment and assure you that I will complete the work, also once am done with the card design. I would love to work in complete improvement of UI/UX of Public Lab website, hope to bring a great look and feel to the website.


@amitain6h can you divide your work in weekly schedule. It will help to understand your work easily.

Reply to this comment...

@mkashyap354 I have made the changes.

Reply to this comment...

@amitain6h i think it would be better to divide the tasks in the timelines according to weeks. So that the mentors can easily merge prs.

Reply to this comment...

Indeed! And please check out this page for existing projects you may be able to contribute to on UI -- as well as to be sure you're building on what people are already working on:

In particular, there's some good work on the Questions UI that has some similarities -- a Card UI.

Will there be a way to use a standard Bootstrap-compatible UI library to keep our CSS consistent and maintainable? Please also note the interest in upgrading to Bootstrap 4 -- -- a big project! I'm not familiar with the Card ui abilities of Bootstrap -- I'd love to see this fleshed out a bit to reassure folks that this code will be very maintainable!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

And -- thank you!!!!!

Reply to this comment...

@warren so should I create another proposal in which I can work this summer. Please let me know about this.

Reply to this comment...

Oh, I was just suggesting that you connect your proposal to existing projects to show how youll be able to make progress that builds on what's come before -- and not reinvent the wheel -- but of course I like some of the ideas you have here and I think they can be a really nice way to make progress on issues that others have also recognized.

I would like to hear a bit about the maintainability and Bootstrap compatibility too! Thank you!

Reply to this comment...

@warren could you please review it. I have also shared the final draft. Please let me know if it need some changes

Reply to this comment...

Thanks a lot, @amitsin6h!

Reply to this comment...

Login to comment.