My Website

All hosted on Microsoft Azure

Description

This website is a current passion project of mine, Braeden. It started out as a way to show off my resume and coding skills. It has developed into a learning tool and something that I have fun developing in my free time.

Code

• Frontend Repository
• Backend Repository

File structure setup for this project:

website (this repo)
    ├── server (backend repo)
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── Dockerfile.development
    │   ├── Dockerfile
    │   └── Other files ...
    ├── client (frontend repo)
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── Dockerfile
    │   └── Other files ...
    ├── data (check data links)
    │   └── all csv files
    ├── env.py
    ├── docker-compose.yml
    ├── uploadData.py
    └── README.md

Pages

This main portion of this website include: a main page, this just the landing page with a short description of me; my resume, my most update to date resume; map explorer, you get a world map view and can request data about countries like earthquakes, weather, and more to come; resume builder, build your own resume with my format and save to the database, if logged in.
I am planning to add more ideas as a go.

Data Links

• locations.csv
• earthquakes.csv

Technologies

Frontend

The Frontend Repository has two branches, main and development, each with there own CI/CD deployment pipeline. All code edits are push to development, tested with the development test website then merge to main once ready.

Technologies:

• React: library for building user interface
• Bootstrap: helps with layout and design
• HTML: structure, used mostly in JSX files
• CSS: layout, imported in JSX files
• Vite: frontend tooling (see script dev/build)
• JavaScript: main programming language
• NPM: package manager
• Mapbox-gl: used for map in /map route
• MSAL: microsoft login system
• Docker: container with linux as the OS

Backend

The Backend Repository has the same setup as the frontend, two branches and CI/CD deployment pipeline

Technologies:

• NPM: package manager
• MSAL: microsoft login system
• Express JS: web framework, GET/POST/DELETE/PUT RESTful api style for HTTP requests
• Node.js: server environment, runs JavaScript
• JavaScript: main programming language
• Docker: container with linux as the OS
• Cosmos DB: No SQL database hosted on Azure