Create a portfolio using React and GitHub Student Developer Pack

Create a portfolio using React and GitHub Student Developer Pack Hey there, in this blog we will be creating a Portfolio website using React and the tools provided by the GitHub Student Developer Pack. What is theGitHub Student Developer Pack? Never heard of it. Real world tools such as cloud hosting services, domain names, specific softwares can be expensive for students. That’s why GitHub created the Student Developer Pack in partnership with other tech companies to give students free access to the best developer tools in one place. That’s great. What all is included in the Student Developer Pack? Currently there are 23 services and tools included in the pack which can be used by a student. Some of the services are, 50$ Digital Ocean credits, a free Heroku Hobby Dev Dyno for two years, a free .me domain name, emailing via SendGrid with higher limits, private continuous integration builds through Travis CI and many more. Awesome. How can I apply for it? To apply for the GitHub Student Developer Pack, you need to be a current student. If you are not a student, then you aren’t eligible for the pack. Apply for the student developer pack at . Click on get the pack and follow the onscreen requests. If you do not have a school-issued email address that ends in .edu, you will also need a valid school ID, or other proof of enrollment like a picture of your schedule, which will be reviewed by the GitHub team. It takes 24 to 48 hours for the request to get reviewed. https://education.github.com/pack A summary about what’s coming next In this blog, we will be creating a Portfolio website using React and the tools provided by the GitHub Student Developer Pack. For this, we will be using the free Heroku dyno from the Pack and free Namecheap domain. We will also use GitHub to push our code and deploy to GitHub pages. Getting Started Before we dive deep into the coding part, we will first install the required tools. I will be using yarn package manager. You can find instructions for installing yarn at 1. ReactInstall and create a react app named portfolio using the following command https://yarnpkg.com/lang/en/docs/install/ yarn create react-app portfolio 2. Heroku CLIExecute the following command to install Heroku CLI on Ubuntu 16+ OS. Instruction for all other OS can be found at Make sure to login to Heroku CLI using command. curl [https://cli-assets.heroku.com/install-ubuntu.sh](https://cli-assets.heroku.com/install-ubuntu.sh) | sh https://devcenter.heroku.com/articles/heroku-cli heroku login 3. Install gh-pages and fontawesome package using yarn add gh-pages yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/react-fontawesome yarn add @fortawesome/free-brands-svg-icons Coding The Portfolio We will be using Bootstrap 4’s resume template to build our portfolio. The template can be found here. https://github.com/BlackrockDigital/startbootstrap-resume **Copying jquery and bootstrap**Create directories and inside public folder and copy the following files to it from the downloaded template.1. bootstrap.min.css2. resume.min.css3. bootstrap.bundle.min.js4. jquery.easing.min.js5. jquery.min.js6. resume.min.js css js **Linking the added dependencies**Open the inside the public directory and link the copied css and js as follows:For CSS For Javascript index.html **Adding template to React Component based structure**The Bootstrap resume template needs to be split into components. Create a directory in the directory where all the components will reside. We will split it into the following 7 Components:1. Sidebar.js2. Landing.js3. Experience.js4. Education.js5. Skills.js6. Interests.js7. Awards.js Components src **Using json as a user data store**Create a json file inside the directory with the name . This file will hold the portfolio data for the user. The structure of json file is as follows: src profileData.json Each of the json is named for the component of the data that is going to be used. key **Modifying App.js**App.js is the main file which imports all the other components and defines the structure of the website. First, we import all the created components and the user’s data from the json created. In the constructor, we set the for each component with its respective data from the json. This data from the state will be passed to components as . All the components are then arranged per the Bootstrap’s template. state props **Creating Sidebar.js**The Sidebar component consists of the code for the sidebar of the website. This is the complete tag from the template. Before copying the code from the template, make sure to make it compliant. should be renamed to or you can use this to convert your html to jsx. nav jsx class className https://magic.reactjs.net/htmltojsx.htm In the constructor of every component, the data from the props will be assigned to a variable through which it will be added to it’s relevant position in the . jsx For the Sidebar component, this is done as . It is done in a similar way for all the other components. this.sidebarData = props.sidebarData Replace all the hardcoded names and fields with the data from the json. To do this, reference your json data through the variable to which the props passed to the component are assigned. The syntax to reference a variable in jsx is referencing the variable within curly braces. So the first name of the user in the sidebar can be accessed as . All other data fields can be accessed and replaced by the data from the json in a similar way.Find on GitHub at following link. {this.sidebarData.firstName} Sidebar.js _Source code for the Sidebar.js for GitHub Education Portfolio._github.com Anupam-dagar/GitHub-Education-Portfolio/src/Components/Sidebar.js **Creating Landing.js**Landing.js is created in a similar way. The first section with is the needed landing section html. First the data from the props is loaded in the constructor and added on to the of the component. id about jsx _Source code for the Landing.js for GitHub Education Portfolio._github.com Anupam-dagar/GitHub-Education-Portfolio/src/Components/Landing.js **Creating Skills.js**Skills of a user in the json data is a list of dictionaries. To add this to the the loaded data from the props is looped over using a and the data is inserted in the . jsx map jsx where is the skills data of a user loaded from this.skills profileData.json In a similar way that other components are created. Run the server using to see your portfolio at in your browser. yarn start http://localhost:3000 Using GitHub Student Developer Pack Go to and look for Namecheap. Get a free domain name by connecting your GitHub account on Namecheap. Using Namecheap to get free **.me** domain https://education.github.com/pack/offers Authorize Namecheap and then find your free domain. After getting your domain, go to your domains list and click on manage to manage your domain.Click on tab and find . Click button to add new records. Add the following records: Advanced DNS Host Records Add new Record Replace with your actual GitHub username. After this, your domain is ready to be used with GitHub Pages. githubusername.github.io **Using GitHub to host your portfolio using GitHub pages.**In the root directory of your project, initialize a repository as follows . Head over to GitHub and create an empty repository with the name , here replace githubusername with your actual GitHub username. Copy the git link for your repo and add it to your local git repo as follows git git init githubusername.github.io git remote add origin Create a file with name in the root of your directory and add your namecheap domain name to it, in the format and save it. CNAME yournamecheapdomain.me Add 2 scripts and to your scripts in as follows. predeploy deploy package.json "predeploy": "yarn run build","deploy": "gh-pages -d build" Both the scripts should be inside the key of . Also add a key to and set it to scripts package.json homepage package.json [http://yournamecheapdomain.me/](http://yournamecheapdomain.me/.) . Run to push your code to branch and host it from it. Head over to to see your hosted portfolio. yarn run deploy gh-pages http://yournamecheapdomain.me/ Push your code to master by doing the following steps: git add -Agit commit -m "Push portfolio code"git push origin master **Hosting your portfolio on Heroku**With the GitHub Student Developer Pack, you get a free Hobby Dev Dyno for Heroku. Headover to Heroku on and connect your GitHub account with Heroku. https://education.github.com/pack/offers The process involves a manual verification by the Heroku team and may take a day or two to get approved. After the request gets approved, the app is ready to be deployed on your Heroku account with a Hobby Dev Dyno. To deploy your app, make sure to login to Heroku CLI. Also, add a new object inside as follows: package.json "engines" : {"npm": "6.4.1","node": "10.5.2"} You can get your version by running and version by running in your terminal. node node -v npm npm -v Create a Heroku app by executing where appname is your choice of appname for your portfolio. Commit your code if you haven’t yet and do . Wait for Heroku to complete the deployment. heroku create appname git push heroku master Run to open your app hosted on Heroku. heroku open That’s it, it’s as simple as that. GitHub Pages deployed version is at http://anupamdagar.com/GitHub-Education-Portfolio/ Heroku Deployed version is at https://studentpackportfolio.herokuapp.com/ The complete source code for the app is on GitHub at _Contribute to Anupam-dagar/GitHub-Education-Portfolio development by creating an account on GitHub._github.com Anupam-dagar/GitHub-Education-Portfolio About Me Hi, I am Anupam Dagar, an Information Technology undergraduate student from Indian Institute of Information Technology Allahabad. I am a GitHub Campus Expert, an opensource contributor and a full stack developer. To know more about me, connect with me on or 😄 Twitter GitHub