
This month I focused on creating microservices projects and learning how to use Docker, Kubernetes, TDD with Jest and Typescript as tools, CI/CD with GitHub Actions, creating my first npm package, and also webpacks. 

As of 7/13 I finished all of these projects. to help me with the largest project I made four smaller projects to fill in the learning for services I haven't used before. One project focused on backend and creating an event bus and learning how to split up services. Number two focused on frontend strategies and implementation. Number three was to connect various frontend applications, including React and Vue and have the different pages connected to different services and deploy on AWS. The fourth was to help me learn unit & integration testing with Jest: 

1.[GitHub Link](https://github.com/kyleb12345/first-microservices-blog), 

2.[GitHub Link](https://github.com/kyleb12345/micro-frontend-practice),

3.[GitHub Link](https://github.com/kyleb12345/Frontend-MicroServices2), 

4.[GitHub Link](https://github.com/kyleb12345/React-Testing). 

Before these I never had to run and connect multiple services together, and didn't know what an event-bus and load balancer are or how to make my own Webpacks or npm modules. These projects also taught me how to use Docker, Kubernetes, and Skaffold. To get them up and running was a bit of a challenge, I had to install Linux to get them running on my 7 year old Windows PC. Nonetheless these projects were a good initial set up to move onto and finish the more complex microservices project that is now complete!

Check it out! [GitHub](https://github.com/kyleb12345/ticketing-app)


Next up, as I was formerly a teacher and sell lesson plans on the side, I am going to make my own all inclusive Geography lesson plan website. For teachers they can buy subscriptions to year-round lesson plans with all the material they need from activities, projects, powerpoints, tests, and so on. For students, on their end they will have access to an interactive textbook, and with authentication and authorization access to different assignments.

Before I began learning web development, I sold lessons I created here:
[Lesson Plans](https://www.teacherspayteachers.com/Store/Geography-Scholar)
Then created a mostly complete, free, online interactive textbook using Google Sites. Now I cannot wait to create this on my own. [Online Interactive Textbook](https://sites.google.com/view/geography-scholar/home)

What am I doing now?

[GitHub](https://github.com/kyleb12345/ticketing-app)

Welcome to my most complex project!

This is a microservices app (5 services) with auth to buy and sell tickets. Built with JS, TypeScript, NextJs, Docker, Kubernetes, and was previously deployed to Digital Ocean.

It is currently not hosted, but was previously deployed successfully through Digital Ocean. This project was used to teach me further about TypeScript, testing using Jest, and getting more familiar with Docker, Kubernetes, and using GitHub Actions. During this project I also created my first npm package to pass common modules between the different services: https://www.npmjs.com/package/@geoscholar80/common

The project is broken down into five services: authentication, client, expiration, payment, tickets, and client. In the app users were able to sign up, sign in, post new tickets to sell, and buy tickets for sale through the Stripe API. An order is set to expire after 15 minutes, and if an order was completed it was shown on the user's order log page.

Microservices Ticketing

[Link](https://d2wwihkrirj1au.cloudfront.net/) | [GitHub](https://github.com/kyleb12345/Frontend-MicroServices2)

This project was used to teach me how to connect various frontend projects together, along with webpack, and how to deploy through AWS. This app's landing page, pricing page, and auth page were made using React, however, once you hit login (no need to input any information) it will direct you to a dashboard made with Vue. Logging out with redirect you to the landing page made with React.

Micro-Frontend

[Link](https://infinite-basin-55644.herokuapp.com) | [GitHub](https://github.com/kyleb12345/YourWines)

'YourWines' is a site that used Yelp as inspiration, but focuses specifically on vineyards and wineries. 

The landing page uses a parallax effect on large enough media sizes by changing the speeds at which the clouds, title, and foreground move while you scroll down.

I created authentication and authorization on the site to allow visiters to register in order to leave reviews and upload new locations. A user cannot edit or delete any other user's review and only the admin account or original user can edit or delete a review or location. Cookies for a user are stored for two days on their browser. Passwords are hashed and encrypted. 

When a new location is added, its own page and unique ID is created and using the mapbox API it is added to a clustermap on the homepage and to a location specific map on its own new page.

YourWines

[Link](https://eloquent-kirch-200986.netlify.app/) | [GitHub](https://github.com/kyleb12345/Portfolio)

This is the largest single page static website I have built aside from my Tic Tac Toe project. 

The website has all of my hosted projects, their deployed links, and the links to GitHub. Check this site out to see an awesome parallax scroll, cloud animation, panels, and be sure to check the website out at different media sizes.




Portfolioception

[Link](http://aqueous-shore-08867.herokuapp.com/products) | [GitHub](https://github.com/kyleb12345/plantsite)

This is my second largest project and is an online shop to sell plants. Due to the recent winter freeze, well, I can't say I have much to display anymore... Enjoy the tomatoes?

Nonetheless, each item I add to the site is connected to the stripe API (the test version as its not a 'real' online shop, though it could be...). I made myself administrative functions and users are able to create accounts, log in, add products to their cart, and check out. It will also show whether an order is on the way or sent as managed from the administrative account to toggle those just as a real business would.

Sessions are stored on the user's browser, passwords are encrypted and hashed. All site data is stored on MongoDB.

Watch the GIF to see how the full project works as I switch from admin user to a regular shopper. This was my first larger full stack project. Before this I created the Tic Tac Toe, infinite URL todo list, and MySQL projects. Afterwards I created YourWines, then moved onto learning React and NextJS creating Space Meetups and my portfolio sites.

Online Plant Shop

[Link](https://nextjs-space-meetup.vercel.app/) | [GitHub](https://github.com/kyleb12345/nextjs-space-meetup)


Originally I began this project with React and used Firebase as the backend. I then migrated the project to NextJS and MongoDB. This is the first NextJS project that I deployed and made to completion. The first version was a ReactJS meetup site around the world, but since I upgraded it, what's 'next?' Space meetups.

Space Meetups

[Link](https://kyleb12345.github.io/React-Grocery-List/) | [GitHub](https://github.com/kyleb12345/React-Grocery-List)

I created this app to help teach me custom hooks and to get a better understanding of useState and useEffect.

Grocery List

[Link](https://node-sql-heroku-project.herokuapp.com/) | [GitHub](https://github.com/kyleb12345/SQL-EJS-EN)

This was my second full stack dynamic website. Before I began web development, I learned MySQL and saw that my only web development projects so far were using MongoDB. This site was to just hook up a node and express app with a database and query language that I learned before.

MySQL Join Us

[Link](https://salty-brushlands-42883.herokuapp.com/) | [GitHub](https://github.com/kyleb12345/Todos)

As typical as it is, this was my first dynamic deployed full stack application. What is unique about it though is that one can create their own URL by simply adding any name they want the list to be. Before I knew how to implement authentication and authorization and create user specific pages, this was my solution to create any amount of lists necessary.

Before this site, I made a static Tic Tac Toe project using HTML, CSS, and JavaScript and deployed it.

Infinite URL Todo List

[Link](https://optimistic-archimedes-a3b5a0.netlify.app/) | [GitHub](https://github.com/kyleb12345/tic-tac-toe)

This was the first site I ever deployed. If someone is next to you, play a game or two of tic-tac-toe with them!

I made it using HTML, CSS, and JavaScript.

Tic Tac Toe

[Link](https://kyleb12345.github.io/Nav-Landing/) | [GitHub](https://github.com/kyleb12345/Nav-Landing)

This website is perfect for simple single page websites that need a clean look. The navigation bar is the main feature of this website.

Cool Landing Page

[Link](https://kyleb12345.github.io/picture-in-picture/) | [GitHub](https://github.com/kyleb12345/picture-in-picture)

*Note:* In order for this site to work you may have to allow permission and it will not work on mobile devices. I included a console.log of the error for to see as soon as the page is loaded. Just check the console! However, if you pull the code and run it locally it will work no issue.

This simple site immediately asks for permission to share your screen to put anything you choose into a picture-in-picture mode. Once you hit the start button the screen you chose will then show and can be dragged around and adjusted.

Built with HTML, CSS, and JavaScript

Picture-in-Picture

[Link](https://kyleb12345.github.io/fancyQuoteGeneratorTweet/) | [GitHub](https://github.com/kyleb12345/fancyQuoteGeneratorTweet)

This project fetches quotes from a random quote generator API and displays them. You can fetch a new quote by hitting the New Quote button, you can also share the quote in a tweet if you are logged into twitter.

Built with HTML, CSS, and JavaScript

Quote Generator

Thanks for checking out this portfolio site. My name is Kyle and I am just beginning my web development and programming journey.

I began with a Google Data Analyst certification course, through that I learned the ins and outs of being a data analyst and what skills and tools they use. In doing all of it I enjoyed learning MySQL and this led me down the path to learning about other database systems and then how websites use them. Thus the plunge into web development began, from my first static website, tic-tac-toe, to this portfolio site you're on now created with NextJS, Node, Express, and MongoDB. 

What technologies have I learned so far? MySQL, MongoDB, Redis, Firebase, Excel, Tableau, HTML, CSS, Bootstrap, JavaScript, TypeScript EJS, React, NextJS, NodeJS, Express, Docker, Kubernetes and various APIs from Google Maps and MapBox to Stripe.

Before, I was a teacher. I taught AP Human Geography, on-level Geography and Leadership. I was Department Chair for Social Studies at my school and was the content lead over my subject for the district. As schools transitioned through multiple waves of Covid I led other Geography teachers through it, adjusting how school was done- virtual, hybrid, and in-person with covid. Both before and after covid transitions other teachers used my lesson plans that I developed for the district that I taught to them. Through that I have taught over a dozen teachers and thousands of students geography in Texas throughout the years.

Before teaching in Texas I lived in China for a while. I taught English and American History at Xiamen No. 1 High School, and attended Xiamen University to expand my Chinese language skills.

I have a bachelors degree in International Development and minors in Business and Chinese from the University of North Texas.

If you want to get in contact with me go ahead and submit a message in the contact page!


All Projects