ankur17 / Github-Profile-Page

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vedantu Assignment

Problem Statement

(Front-end Developer challenge)

It was required to make a page like github.com -

Solution

Installation
npm install

Local Development

npm run start

Production Deployment

npm run build
Stacks Used
  • ReactJs (pure form, no extra helper modules used)
  • Github (for version controlling)

Boilder Plate : facebook's create-react-app

Javascript/CSS Modules used
  • Vanilla React
  • whatwg-fetch: for fetching data from API
  • Bootstrap : Only for the Glyphicon

No Other modules are used.

Custom components
  • DropDown button was custom developed and implemented
  • Search query based on the language, repo type and search text results as well as custom text message for every combinations.

Technical Approach


The following is the terminology for the development used: The Layout is divided onto two panels:

  • Left Panel : consists of the user profile layout
  • Right Panel : consists of Repository list data
Features
  • There are few Icons like: fork icon, licence icon etc. are replaced with dummy icon
  • The header bar implementation is not done, as mentioned in the question.
  • There is a bit discrepancy in the font and colors of the page as exact matching palette could not be found. So they were improvised.
  • The page is responsive and the bio section comes on the top in the mobile screen (as asked in the question)
  • The tick icon in the dropdown button in the query section is impllemnted as done in the original github page.
  • The query section (Overview,Repositories,Projects...) is horizontally scrollable as in the original github page.

The code was done on the develop branch and later merged to the master branch

Time management
  • The Assignment took 6.5hrs to complete. It includes all the research work, code structuring and github setup.
  • I started the project at 5:15 PM and completed till 11:45PM.
  • However the assignment report is not included in the 7.5hrs. The report was prepared at 4:00PM of the next day.

Kindly check the git commit list as the proof of the same

Conclusion


  • I was able to complete all the tasks mentioned in the question.
  • I successfully build the frontend of the project.
  • I included the deplyment and development scripts for the project.

About


Languages

Language:JavaScript 69.0%Language:CSS 24.4%Language:HTML 6.6%