This is a portfolio site for Ve to highlight his technical career and progress. This web app version is built on top of the portfolio template components from Magic UI.
- Setup only takes a few minutes by editing the single config file
- Built using Next.js 14, React, Typescript, Shadcn/UI, TailwindCSS, Framer Motion, Magic UI
- Includes a blog
- Responsive for different devices
- Optimized for Next.js and Vercel
-
Clone this repository to your local machine:
git clone https://github.com/...
-
Move to the cloned directory
cd <FOLDER_NAME>
-
Install dependencies:
pnpm install
-
Start the local Server:
pnpm dev
-
Open the Config file and make changes
To use docker, build the local app from the Dockerfile, and run it as such. Use the no cache flag if you want to hard start building the app. I recommend this especially when making package or dependency changes. Otherwise if you're rebuilding the app from code changes I recommend usin the default build option.
```bash
docker build --no-cache -t ve-app .
docker build -t ve-app .
docker run ve-app
```
These steps depend on building the app successfully first with docker, then tagging the image, and then pushing it to GCP artifact registry.
```bash
gcloud auth login
docker tag ve-app gcr.io/experimental-learning/ve-app:latest
docker tag ve-app gcr.io/experimentation-learning/ve-app:latest
docker push gcr.io/experimentation-learning/ve-app:latest
```
# Initialization:
terraform init
# Initializes a new Terraform project, downloading necessary providers.
terraform plan
# Creates an execution plan, showing the changes that will be made to your infrastructure.
terraform apply
# Applies the changes defined in the execution plan, creating or modifying resources.
terraform destroy
# Destroys the resources defined in your configuration.
# State Management:
terraform state list
# Lists the resources managed by Terraform.
terraform state show
# Shows details about a specific resource.
terraform state pull
# Pulls the current Terraform state from a remote backend.
terraform state push
# Pushes the current Terraform state to a remote backend.
# Other Commands:
terraform output
# Displays the values of defined outputs.
terraform validate
# Validates the syntax and structure of your Terraform configuration.
```The next.JS app has jest testing across the frontend and backend, and allows for jest tests to run in a Jest DOM and the ability to write them in TypeScript. There's also CI/CD configured via CircleCI.
```bash
# Runs the tests across the app and provides a code coverage report
pnpm run test
# Checks if updated circle CI YML file is valid
pnpm validate-circle-ci
```
- https://stackoverflow.com/questions/69227566/consider-using-the-jsdom-test-environment
- https://stackoverflow.com/questions/72013449/upgrading-jest-to-v29-error-test-environment-jest-environment-jsdom-cannot-be
- https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany
This E2E test suite uses AI to reduce the work and overhead needed.
It uses this open sourced framework called shortest. You can visit the main website here called shortest.com.
How this works under the hood is that it uses Anthropics new "Computer use" paradigm where it takes screenshots, translates that into tokens, and overlays pixel based coordinates to do tasks - which is pretty cool. See more on this here.
pnpm run ai-e2e-testing
pnpm run ai-e2e-testing:ci
You'll want to make sure the --headless flag is on if running said tests in a CI/CD pipeline.
- Add web3 functionality such as the ability to mint a Ve Coin