Progressive Web App created with React.js
- What the idea : The idea was to create a progressive multilingual (multi-platform) web application displaying all the information necessary for a global and rapid vision of your Github account and to make it easily customizable for all developers, juniors and / or job seekers. Possibly, this so that he can highlight their profile in front of potential employers and, therefore, increase the number of visitors to their github page.
Github My Profile PWA (V_2.0)
- What is it :
It is an open source multilingual (fr - en - pt) app licensed under the Creative Commons license.
Being a PWA, it is installable under most operating systems as well as under android (Tested myself).
You can now have a quick view of your Github account information, such as:
-
Your personal stats in real time among other statistics of the most used languages on the platform.
-
There is an "About" page and a footer that you can fully customize with your images, links, pdf, etc ...
-
Also, there is a list of 50 of your "created by you" and 50 "forked" repositories.
I am satisfied with this first version, yes first ... because I still have several improvements in mind such as the possibility of ordering the list, of being able to search among the repos via an input ... and many more! !!
Enjoy The World 😉
-
Windows 10 professional edition
-
Windows 7 family edition
-
Mac osx Catalina
-
Ubuntu 18.04, 19.10 & 20.04
-
Samsung Mobile phones (Note 9, A40 & A51)
-
Iphone 6, 7 & 8
Link to the Media devices Demo site : https://github-my-profil-mediadevices-demo.netlify.app/
Home Page
About Page
Charts Page
Repositories List Page
3 languages supported
French Version 🇨🇵
English Version 🇬🇧
Portuguese Version 🇵🇹
Windows 10 Version
Mac Catalina Version
Ubuntu 19.10 Version
You must have at minimun these version for greats performances and good compatibility
Version of Node js
- v10.22.0 minimun
(you have 3 solutions)
First possibility (the most easy, fast and practical)
🌟🌟The best & fastest solution
With NPM package : Juste type this in your console (with the name app you want)
npx create-react-app <your-app-name-here> --template github-profile
Second possibilty, (another fastest solution),
- Download and unzip my automatic installation script,
- put the name of your application when asked, and finally,
- press Enter key to complete the installation
👣 go to the React template repository to download the script and follow the installation tutorial ✌
Third possibility, Fork or clone directly this repository:
git clone https://github.com/rodolphe37/pwa-react-project
$ cd pwa-react-project
$ npm i or $ npm install
Rename the env.local.example file at the root of application to .env.local only and put your own values 😏 :
#OPEN SOURCES PROJECT UNDER CREATIVE COMMONS LICENSE (CC BY-NC-SA) - CREATED BY RODOLPHE AUGUSTO
#For more info about this project, visit this address : https://github.com/rodolphe37/pwa-react-project
#or contact me on my portfolio at https://rodolphe-augusto.fr
# ......
# .',:looddddooc,.'''...
# .':oxxkkO000Okxxkxodxxddol;'.
# .',:odxxddddxkxdddddxddxddxkOOko:'.
# 'cddoodddddooddddddddddddddddxkOOkxdc'.
# .:dxxddoolooooooolllodddddoooooooddddxxo;.
# .ldxdooodxkOOOOOkkxxdolloloodxxxxdoooodddl;.
# .lddoodxk0OOkxxoolllooolcccloooodxkkkdooodool'
# .cddook000kxddolcllooollllllloollccloxkOkdlodxo'
# ,ldook0OkkdddoclodddxxdddddddddddoolccoxkOkolddc.
# .:oook0OkddddocldddxxdxxxxxxxxxxxxdddolcldxOOdldo,
# .;clx00kddddocldxxdxxxdxxdxxxxxddxxdxddocldxOOdlo:.
# .::ok0Oxddddllddxxxxxxxxxxddxxddxxxxxxddocldk0kolc.
# ':cokkkdddolldxdxxxxxdxxdxxxdddxxddxxxxxdlcoxOOol;.
# .;c:lxkddolc:clllllooddxxxddxxddxxxdxxxxxdoclxOOoc,
# .;loxxdlllllllllllllodxxxxdxxdlclloddxxxxxdclxOOo;.
# .'cdkkdlloooooooooddxxdxxxxdxxdddolcccclodxxdllk0kl,.
# .:dkkolloddlc::;;;:lodddodxdxdodxxxxxddolllodoldk0dc,
# .cxkdc:ldxdoldxdc,.'colooloxxdolddddooooddddoollxOkl:.
# ,dxdc::oxdddodxdlc:cdxodoodxxdlodoll:;;;:loddlldOOo:'
# .;dxlc:cdxxxdddxxxddddddddddxxddddodl;'.;llcolldkOxc;.
# 'odlc:ldxxxxddxxxxxxxxxxxxxdxxxxdddolc:okdllloxOkl;;.
# .cdoc;lxxxxxxxxxxxxdxxxxxxxdxxxxdxxxxddddoolldkOdc:,.
# ,loc,lkxdxdxxxxxxxdooxxxxdxxxxxxddxxxxxxddlldxxoc;.
# .coc;lkxxxxxxdddxxdlloodxxxxddodxxxdxxdxxdlldxoc:.
# .:ol;lkxxxxxxxxxdddolllllllllcloxxxxxxxdxxoclddc,.
# .;ol;lxxdxxxddddoooooollcclllloddxxxdxxdddoc:ldl:.
# .;oc;cxddddoooooooooooooooooooooddxxxxxddoc;:clol,
# .:lc;cddoooolcccoxkxdllllllloooooddxxddool;,',coo;.
# .. ... 'cl:,cddoooooolcxKNWNX0kkOkkxdooooodxdolc:,. .:ol;.
# ,,. .. .... .:oo;. .;c;..:odoooooddoox0XXNWWMMWWXOlclloooolc;;. .clc'
# ':. .,. .;odc' .,lxo;. .;;'. ,cddooooooddoooddxkkOOkxdoooooolcc;,. .:ll,.
# .:' .,. .,cdxl,. .:oxo,. .'.. .,codooooooddddoooooooodddoooollc;,. ':lc,
# .;. ,. .,cdxo;. .,cdxl' .':odoooooooooooooodddoooooollc;'. .;cc;.
# .,..,. .'.. .,cdxdc. .;oxdc. ... .;coooooooooooooooooooooolc;,. ':c;.
# .;. .. .:loc'. .,cdxxc..'cdxd:. .;lol;. .,;looooooooooooooooolc:;'. ':;.
# '' .:odo:. .,cdxdc,':oxkd;. .cdxxo;. .;:;;;:clooooooooolc:;,,. .;'
# . .;lddo:..':oxdc;;ldxxo;. .,lxxo:. 'coolc:::::::::::;;;;::. ''
# ..:oddo:',coxdlclddxxd:. .;lddl, .,ldxdddddollccccllooll:'. .
# .,coxdl::oxddddxxdxxd:. .lxxdl. ...,lxxxxdxxdxxxxxxxxxddoc'...
# .,codoodxddddxxddxxdc,;dkxdl' ....;oxxdxddxxxxxxxxxxxxxdl,....
# ',,'... ..;odxxxxdloddlodxxdloxxxdc'.......cdxddxxddxxxxxxxxxxxddl;......
# .;clollcc:;:coxdxdoccoxoclxxxdxxdxxd:........,lddddxxxxxxxxxxxxdddl;'.............
# ..';:cloddddxdxdocldxxocoxxdxxxxddl,.......'.';lodxxdxxxxxxdddoc;'..''...............
# ..',::codxdoodxxxdcldxxxxxxdo:.......''''.'',:cloodoolc;,''..'''''...'''''''''....
# ..;lodxddolodoldxxxxxxdc,.......'''''''....';cl:'.....''''''...'''''''''''''...
# .';codddooddddxxdddoc,........'''''.....'..,:,.'''....'''...'''''''''''''''...
# .....,:oddxddddddddo:...........''..............'''''....'...''''''''''''''''...
# ......'',:cllllodxxdc'.....................''...''''''''.....''''''''''''''''''...
# .....,cc;cllllloddxdl'....................''.....''''''''''''''''''''''''''''''''...
# ....,cc:ldxxxxxxxdxo,............................'''''''''''''''''''''''''''''''''..
# .',::codxxxxxxxdxo;............'''''''''..'''''.''''''''''''''''''''''''....''''''..
# .,;:ldxxxxxxxxxxdc'.........''''''''''''''''''''''''''''''''''''''''''''.....'''''...
# ..,;codxxxxxxxxxxdo;.........''''''''''''''''''''''''''''''''''''''''''''.......'''''..
# .',codxxdxxxxxxxxxdc'........'''''''''''''''''''''''''''''''''''''''''''''.........'''...
# .,:odxxxxxxxxxdxxddo;.........''''''''''''''''''''''''''''''''''''''''''''................
# .,cdxxxxxxxxxxxxxxddc'........'''''''''''''''''''''''''''''''''''''''''''''............''.
# 'coxxdxxxxxxxxxxxddo:.........''''''''''''''''''''''''''''''''''''''''''''......'',,;clol'
# .,cdxxdxxxxxxxxxxddol;.........'''''''''''''''''''''''''''''''''''''''''''....,ccllooddxxo;.
# ':odxxxxxxxxxxxddoo:' ........'''''''''''''''''''''''''''''''''''''''''....'coooooddxxxd:.
# .;codxxxxxxxxxddooc,. ......''''''''''''''''''''''''''''''''''''''''.....;looooodxdolc,.
# ':lodddxxxxdddolc;. ......'''''''''''''''''''''''''''''''''''''......;cccccccc:;'..
# .,:loooddddoolc:'. ....'''''''''''''''''''''''''''''''''''................
# .,:looooolc:,.. ....''''''''''''''''''''''''''''''''.....
# .';:ccc:;'. ...'''''''''''''''''''''''''''''.....
# . .. ....''''''''''''''''''''''''.....
# ....'''''''''''''''''''''...
# ..'..''''''''''.'''....
# ........''......
#FULL PERSONNALISATION OF THE APPLICATION HERE!!!
#first = remov (example) from this file name (it must be named only (.env.local)
#HOME PAGE & REPOSITORIES INFO
#enter your username github
REACT_APP_USERNAME=
#enter your profile picture url (without https:// or https://www)
REACT_APP_PICTURE_USER=
#ABOUT PAGE
#Copy the link to your portfolio logo
#or any other links picture in image hosting solutions like imgur or other (without https:// or https://www)
REACT_APP_AVATAR_PICTURE=
#PORTFOLIO LINK
#enter your portfolio name only
#(Portfolio address is fetching direct form your github profile)
#if you leave the name blank, then no link appears on the screen
REACT_APP_PORTFOLIO_NAME=
#LANGUAGES & TOOLS SECTION
#enter images url of tools & languages you are used (without https:// or https://www)
REACT_APP_PICTURE_1=
REACT_APP_PICTURE_2=
REACT_APP_PICTURE_3=
REACT_APP_PICTURE_4=
REACT_APP_PICTURE_5=
REACT_APP_PICTURE_6=
REACT_APP_PICTURE_7=
REACT_APP_PICTURE_8=
#(Only 8 images is enough, images 9 to 16 are optional )
REACT_APP_PICTURE_9=
REACT_APP_PICTURE_10=
REACT_APP_PICTURE_11=
REACT_APP_PICTURE_12=
REACT_APP_PICTURE_13=
REACT_APP_PICTURE_14=
REACT_APP_PICTURE_15=
REACT_APP_PICTURE_16=
#BIOGRAPHY SECTION
#If you want bio text content appear or not
#If your choice is "i want" then, put 'yes' otherwise put 'no'
REACT_APP_APPEAR_OPTION_BIO= ''
#FOOTER
#Developer section footer
#enter your name link 1 here
REACT_APP_LINK1_NAME=
##enter your link 1 here (without https:// or https://www)
REACT_APP_LINK1_URL=
#if there is neither a links nor names, then the 3 links & names does not appear on the screen
#( if there is neither a link nor name, then this does not appear on the screen )
#enter your name link 2 (pdf file) CV for example here
REACT_APP_NAME_PDF=
#enter your link 2 (without https:// or https://www)
REACT_APP_PDF_LINK=
#( if there is neither a link nor name, then this does not appear on the screen )
#enter your name link 3 here
REACT_APP_LINK3_NAME=
#enter your link 3 here (without https:// or https://www)
REACT_APP_LINK3_URL=
#( if there is neither a link nor name, then this does not appear on the screen )
#enter your name link 4 here
REACT_APP_LINK4_NAME=
#enter your link 4 here (without https:// or https://www)
REACT_APP_LINK4_URL=
#Illustrator section footer
#if you dont put anything, then all of the section does not appear on the screen
#enter your store address 1 here (without https:// or https://www)
REACT_APP_ADDRESS_STORE_1_URL=
#enter your store address 2 here (without https:// or https://www)
REACT_APP_ADDRESS_STORE_2_URL=
#copyright section
#enter your name & the year for copyright
REACT_APP_NAME_COPYRIGHT=
REACT_APP_YEAR_COPYRIGHT=
# AND THAT'S ALL...
# ENJOY THE WORLD
Lasts modification you must doing!
some texts must be modified in the translation files directly
Explanation:
for "My Github bio" in about page (If you have decided to make it appear)
- Go to "public/locales/" folder, the are 3 folders, one named "en" (for english texts), one named "fr" (for french texts) and another named "pt" (for Portugues texts) The text you will must modifying is at the variable named "bioContent" at line 24
#If you have decided not to display the bio content, you can ignore this change
#file translation.json in each folder (en - fr - pt)
"bioContent": "Write your text here",
for footer section (Developer & Illustrator)
- You can change the name of the sections by going to the same files (translation.json) in each of the folders located in the "locales" folder. The text you will must modifying is at they variables named "footerTitleDev" and "footerTitleIllustr" at line 8 and 9
#file translation.json in each folder (en - fr - pt)
"footerTitleDev": "Your name section 1 here",
#If you decided not to show the second section, you can ignore this change
"footerTitleIllustr": "Your name section 2 here",
- for changing the store names in illustrator section, the same files...
- The text you will must modifying is at they variables named "storeIllustr1" and "storeIllustr2" at line 10 and 11
#If you have decided not to display the second section, you can ignore this change too
#file translation.json in each folder (en - fr - pt)
"storeIllustr1": "Your store name 1",
"storeIllustr2": "Your store name 2",
And, now start a server
$ npm start
- and that's finish... enjoy!!!
- Thought, designed and developed with 💜 by Rodolphe Augusto
Enjoy the World 😏
Special thanks :
-
to Anurag Hazra for "github personal stats widgets" : https://github.com/anuraghazra/github-readme-stats
-
to Anton Komarev for the "profile views counter" : https://github.com/antonkomarev/github-profile-views-counter
-
to Fabian Beuke for data from pull requests made on Github : https://github.com/madnight/githut
I put almost everything open-source I can, and try to accommodate anyone who needs help using these projects. Obviously, this takes time. You can use this service for free.
However, if you are using this project and are happy with it or just want to encourage me to keep creating, there are a few ways to do it: -
- Give appropriate credit when using "Github My Profile App", with a link to My Github account or my portfolio address :D
- Put a star and share the project 🚀
Thank you! ❤️
Creative Commons
CC BY-NC-SA
Attribution - No Commercial Use - Sharing under the Same Conditions
See the Explanatory Summary | See the Legal Code
This license allows others to remix, adapt, and build on your work for non-commercial purposes, as long as they credit you and license their new creations on the same terms.
https://github.com/rodolphe37/halloween2021-bat-tuto-youtube-video
https://github.com/rodolphe37/cra-template-github-my-profile
https://github.com/rodolphe37/react-native_geolocation-tracker
https://github.com/rodolphe37/cra-pwa-react-ultimate-messenger