
![](one-more-turn-screenshot.png)

A gameplay tracker for Sid Meier's Civilization VI.

## Features

- Discover new civilizations and their unique abilities
- Explore the strengths of history's most revered leaders
- Sort civilizations by victory type
- View effects of specialty districts
- Make a play wishlist for civilizations that catch your eye

## Take Aways

- Improved React skills and expanded upon it with the Gatsby framework
- Introduced to Headless CMSs
- How to use GraphQL to query only the data I needed
- Dynamic page routing

## Tech Stack

- Gatsby
- Sanity.io
- GraphQL
- RAWG Video Game Database API


A gameplay tracker for the video game Civilization VI.

One More Turn


![](game-port-home.png)

A video game library where users can search over half a million games.

## Features

- Instantly search for your favorite games or discover new ones
- View the summary, Metacritic score, and other basic information for the queried game
- Find other games in the series
- Uses session storage to minimize requests sent to the API

## Features To Be Added

While I designed this project to be very small in scale initially, these are features I would like to add at a later point:

- A login portal
- Add a game to a custom wishlist
- Rating system
- Drop a comment for a specific game
- Convert load more button to infinite scroll
- Increase browsing navigation endpoints (i.e., games by a certain developer, genres, etc.)

## Take Aways

I had 3 main focuses for this project:

- Increase design and CSS skills
- Implement search functionality
- Showcase ability to manipulate data from a 3rd party API

## Tech Stack

- React
- React Router
- Styled Components
- JavaScript
- RAWG Video Game Database API


A video game library where users can search over half a million games

Game Port


![](aah-screenshot.png)

An E-commerce store for American Artistic Handcrafts, the antique store from the show The Man in the High Castle.

## Features

- Sign in/up to buy & sell historical artifacts
- Add products to your cart and checkout via Stripe
- Upload a photo and description of a product you want to sell
- Reset your password and check its security strength upon creation
- View your order history
- Edit your product information and/or delete it from the database.
- Search for items from a dropdown menu
- View price only if signed in
- Locate store with Google Maps
- Email sent to customer address after purchase

## Take Aways

This was my biggest project to date, and thus learned quite a lot:

- Introduced to the Next.js framework, and with it server-side rendering and routing
- Performing GraphQL mutations for creating, updating, and deleting products
- Fetching and caching GraphQL data
- Using React Context for managing local state
- Performing authentication
- Managing roles and permissions with an admin interface
- Sending emails to a dummy address
- Defining schemas and creating data relationships

## Tech Stack

- Next.js
- Node.js
- Styled Components
- Apollo
- KeystoneJS
- GraphQL
- Stripe API

### Note: deployment coming soon!


An E-commerce website for the antique store from The Man in the High Castle

American Artistic Handcrafts


![](ag-law-screenshot.png)

A website for my fiance's father's law firm based in Modesto, California.

## Background

AG Law started as my final project for my coding boot camp. My fiance's father, Anthony, had recently passed the BAR exam and became a practicing attorney. The website he was using was a generic GoDaddy template, and I wanted to make a more appealing product.

My final project was merely a single home page made via create-react-app with limited functionality. I couldn't even get react-scroll to work, nor did the contact form connect to a database. The only "advanced" feature it had was storing associate lawyers in MongoDB, but I confess one of the class TAs helped with setting that up and fetching the data. Subsequently, it has been my go-to project every time I learn a new technology.

## Take Aways

- Furthered developed Next.js skills
- How to store data in and fetch from React Markdown files
- Submitting form data to a database
- Simple filtering with booleans

## Tech Stack

- Next.js
- Node.js
- MongoDB
- React Markdown

## Future

Ever since the coding boot camp, I've been determined to further my development skills and create for Anthony a real, working website he can use. Although this project is strictly for portfolio purposes, I have learned a lot in a year and a half since earning my certificate and my next stage is to make a real world application.

Currently, I am collaborating with Anthony exactly what he wants in his website and planning technologies to be used, folder structure, color themes, and functionality. As of now, I plan to use Next.js, Apollo, Node.js, Keystone Headless CMS, and GraphQL.


A website for my fiance's father's law firm

KC

Full Project Collection

One More Turn

Game Port

American Artistic Handcrafts

AG Law