A simple react website to display skills and accomplishments and some more detail than traditional resume built by ChatGPT.
Conversation with Chat GPT: (GPT 3.5 Chat)
This document describes the high-level steps and process to create a professional website from "scratch". I have limited development experience in general, even more so in front-end but with the accuracy and creativity of chat GPT I was able to develop my website in less than 20 hours.
Note
I'm an active computer science graduate student and information technology professional, I understand the technology is overwhelming. I feel if you can lean into the LLM's power, the process may be easier for many people.
Step 1
Tool: React
Reasoning: For this project I selected to use React as it is widely used across the technology ecosystem today for front end applications. Additionally I wanted to learn a skill that could be applicable to my professional work and I had never taken the time to deep dive into understanding front development language and structure. Although this may be overkill for creating a professional website it was very fun to explore functionality with Chat GPT.
Download Node: Node.js
Step 2
Open command line interface to desired application file storage location
Enter command to create the react app
npx create-react-app my-app
Understand the React application or Website folder and file structure
Open file explorer or use command:
cd my-app
Website Folder (my-app/):
- node_modules/: Contains all the project's npm dependencies.
- public/: Holds static files like the HTML file, images, and icons.
- src/: Contains your React component files, CSS, and JavaScript.
- package.json: A manifest file for managing project metadata and dependencies.
- README.md: A markdown file containing information about the project.
Website Driver Folder Files (src/):
- App.js: This is where you define your main App component. It's the heart of your React application.
- index.js: It's the JavaScript entry point. It renders your App component to the DOM.
- App.css: This file contains styles for your App component.
- index.css: Global styles for your application are defined here.
Step 3
Navigate using the command line to the website folder (my-app/)
Deploy the website locally with the command:
npm start
View Local Deployment
Navigate to localHost
Stop the Website: Use ctrl+C to stop the program from running locally
Caution
If you close the command line instance without ending the program, the website is being hosted on your local machine until you shutdown the computer or end the process. You can navigate to the task manager and end the Node.js process to stop the program.
Step 4
Define the structure and components of the website at a high level that you desire
Prompt Chat GPT (My Conversation):
Can you create a basic react app for a professional profile as simple as possible.
How would I format to have a picture in the top left name as title in the top center and skills on the right?
Step 5
Edit (my-app/) files (App.js) to recommended code from chat GPT
Re-deploy app and observe changes
Step 6
- Envision more features or functionality changes to the website and prompt Chat GPT for help to code
- Make changes to the local files and re-deploy the local website and view the changes
- Once satisfied with the local deployment proceed to step 7 for internet setup
Step 7
Use domain provider to reserve or purchase desired domain name.
Step 8
Tool: App Engine
Reasoning: For this project I selected to use AppEngine for deployment to minimize infrastructure setup complexity.
Install google SDK within the (my-app/) folder
Download: Install Google SDK Docs
Login to Google Cloud account with your credentials using the command:
gcloud auth login
Initialize the project using the command:
gcloud init
Note
This is the Google Cloud SDK Terminal. When you installed the Google SDK a specific terminal client was installed. This specific client and Terminal must be used for gcloud commands.
Step 9
- This file will tell Google cloud how to setup your website infrastructure
- Suggestion: Prompt chat GPT to help create one
Example: app.yaml
runtime: nodejs
env: flex
handlers:
- url: /static
static_dir: static
http_headers:
Cache-Control: public, max-age=604800
Example: Dockerfile
- This file will tell Google cloud how to setup your website infrastructure
- Suggestion: Prompt chat GPT to help create one
# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:12-slim
# Create and change to the app directory.
WORKDIR /usr/src/app
# Copy application dependency manifests to the container image.
# A wildcard is used to ensure both package.json AND package-lock.json are copied.
# Copying this separately prevents re-running npm install on every code change.
COPY package*.json ./
# Install production dependencies.
RUN npm install --only=production
# Copy local code to the container image.
COPY . ./
# Run the web service on container startup.
CMD [ "npm", "start" ]
Step 10
Package your application for deployment with the command line at (my-app/) using the command:
npm run build
Open the Google SDK Terminal and deploy your application to Google App Engine using the command:
gcloud app deploy
Navigate to Google Console and view deployment and costs.
Make changes to DNS settings for custom addresses.
- Google App engine > Settings > Custom Domains > Add Custom Domain
- Domain Provider > Add in CNAM and A, AAAA Data
Caution
Navigate to Settings and Disable Application
- Pause all Cost and Compute
- Validate ChatGPT prescription of hardware in app.yaml
Chat GPT is a powerful accelerator to code generation and basic understanding. It will take some manual troubleshooting by either re-querying chat GPT mentioning a visible error or using a traditional google search of the error to fix. Additionally although Chat GPT generated the code, it takes some time to understand the language and interactions between folders, files and functions. I feel with the support of large language models many more people will be able to access complex technology. It will be important to highlight the risks of potential local vulnerability creation from hallucinations or misleading design by large language model.