React-Portfolio

Please use this table of contents to navigate this README.

Description
Installation
Usage
Credits
License

Description

A portfolio utilizing React to showcase my web development work.

What was your motivation?

My motivation was to create a portfolio of my web development work utilizing React, so that I could have a portfolio that I could improve over time and have more contorl of how the app is affected when I make changes to it in the future, as well as demonstrating my overall proficiency in React.

What did you learn?

I learned that JSX is similar to HTML, but in many ways very different in how it can be styled especially if any components are designed to be rendered conditionally. I learned that many aspects of Bootstrap work in ways in JSX that are very similar to HTML, but the syntax is different and that one component can be styled without affecting the other components. Additionally, I learned that deploying a React app to GitHub Pages is very complex after I encountered technical difficulties that were significant enough prevent me from deploying the app to GitHub Pages and having to resort to deploying the app to Heroku instead of GitHub Pages.

Installation

Please utilize the following steps to install and deploy the app.

Step 1: Create a folder where you want the app to reside on your local computer.

Step 2: Create a repository on GitHub and use the git clone command to clone the repository to the folder that you just created.

Step 3: Run the command npx create-react-app <name of your app> to create a development version of the app.

Step 4: Then copy the src folder from the Public Repository and make any needed changes to the package.json.

Step 5: Save, then add, then commit to your repository.

Step 6: If you want to deploy the app utilizing GitHub Pages first add a homepage field to your package.json "homepage": "https://myusername.github.io/my-app"then run npm install --save gh-pages then modify the scripts to include "predeploy": "npm run build", "deploy": "gh-pages -d build" then save, add, and commit and run npm run build.

Step 7: If step 6 does not work you may need to change the second of the two scripts that you just added to your package.json "deploy": "gh-pages -b main -d build".

Step 8: Alternatively, if you want to deploy the app using Heroku run heroku login then run heroku create. Then run the command git push heroku main and once the build has succeeded go to your Heroku dashboard and select the app.

Step 9: Before beginning this step make sure that your GitHub account is linked to your Heroku account. Click on the Deploy tab and then click on GitHub. Then begin typing the name of your repository and then you should be able to select it from a list, then click connect. Also, make sure to enable automatic deployments from your main branch! Now when you go back to your repository in your browser and hit the refresh button you should see your new Heroku app under Environments on the right hand side of the screen. Now the app is deployed and you can continue to modify it as needed!

Usage

The app can be used locally by running the git clone command to clone the Public Repository and then running the command npm start. Please visiti the link to the deployed application to utilize the deployed version of the application. The app can be utlized once deployed by following the Installation instructions above.

The following screenshots give an idea for how the app can be used.