To view this project locally

Click here then download the .zip file. Extract the contents of the zip file, open dist\ folder and then open index.html to view app in browser.

Installation

This project used following FrontEnd Libraries and tools

React For View Layer
Sass CSS preprocess
autoprefixer A PostCSS for CSS vendor Prefixing
hj-webpack Helpers/presets for setting up webpack with hotloading react and ES6(2015) using Babel.

To run this project Locally

First Clone this repoistory https://github.com/vinaypuppal/topgit.git

Check if you have NodeJs installed locally by running below command

node -v

You should now see the version of your current Node installation.

If NodeJs is not installed then install the latest version of NodeJS. Once you have installed it, you can verify it is correctly installed by running above command again.

Now cd into cloned repoistory

And install the necessary dependencies for the project with

npm i

This command will install all the dependencies listed in package.json.

To run local server, run

npm start

The default server is http://localhost:3000.

You are now ready to go!

Open http://localhost:3000 in your browser to view running App.

And To build the project use

npm run build

Then the built project can be found in dist/ folder.

Note: After building the project locally edit index.html to add title, meta tags and fix relative paths of both CSS and JS files linked to view locally. No need to fix relative paths if deploying to server.

SAP Labs Frontend Hiring Challenge

04 Sept, 2016

https://www.hackerearth.com/sap-labs-frontend-hiring-challenge/

TopGit — finding the best github projects!

Problem Statement

Develop a pseudo front end application which would let the users help list and browse top github projects conveniently.

Minimum Requirement

Use of Web API to fetch problems detail. Utilise API parameter: q=stars:>=500 language:php

stars — number of stars given to respective repository
language — programming language used in repository

Utilise Response Parameters:

repos[] —[ total_count, items[] — full_name, html_url, description, language ].
Visually interactive responsive design listing all the repositories.

Plus Point

A feature to Search (via language).
Implement Seek feature (to filter result through range of Stars given to repositories).
Display and integrate repository details including name, html_url, description, and language.
Link html_url to Github’s repo URL. (Should open in new window | target="_blank")
Feel free to use your favourite UI/UX frameworks and tools in design and development.

Extra Work

Display and keep track of response Header X-RateLimit-Remaining / X-RateLimit-Limit.
Add autocomplete feature to Search programming languages conveniently .
Custom elegant design, fonts and icons to make web app more user-friendly.
You may add portfolio activity comprising awesome work you have done on web application(s).
Use your imagination and add features which would make things easier for end users.

Tweet @vinaypuppal
Connect On linkedIn
Chat with @vinaypuppal

vinaypuppal / topgit