Skills
Web Design
My web design process involves wireframing, creating rough sketches through Figma or Adobe XD, iterating through several prototypes before achieving the final design. I strive to build modern, beautiful, and responsive websites that are performant and accessible.
- Prototype design to pixel-perfect HTML and CSS
- Build attractive landing pages and static/dynamic sites that display a visual hierarchy, have a purpose, and convey effective communication principles
- UI/UX development, search engine optimization techniques and interactive design
Web Development
I develop complex web applications using many of the latest and greatest frameworks such as React and Angular, often opting to make requests to a Node/Express server paired with MySQL, MongoDB or PostgreSQL.
- Experience developing full-stack web apps with React/NextJS, Angular/NestJS, and Vue/NuxtJS
- Develop single page applications (SPA)
- Experience developing these applications with a strongly typed language such as Typescript
- Database/cache techniques using Redis or Redux
Backend Development
I develop secure, scalable, RESTful API's for network-based applications. RESTful Web Services should be lightweight, maintainable and should expose an intuitive API in a stateless manner. My process typically involves:
- Identify The Resources
- Identify the Request Verbs for each endpoint
- Map the proper Request Headers at each end-point such as the type of response required and the authorization details
- Request And Response Body
- Response Status Codes
- Cacheability
Languages: JavaScript, TypeScript, Python
Front-End: React, Angular, Vue, Pug, HTML, CSS, Sass, Redux, SVG
Back-End: NodeJS, Rest API Development
Database: MySQL, Firebase Firestore/RTDB, MongoDB, PostgreSQL, Amazon S3
DevOps: Docker, Kubernetes, GitHub Actions, GitLab
Version Control: Git
Projects
typeorm-fastify-plugin
Typeorm-Fastify-Plugin is a small and lightweight plugin for use within the Fastify Community. Fastify.io is a fast and low overhead web framework for Node.js that heavily depends on it's community of plugins. The plugin enables developers to create and namespace multiple Database Connections using Typeorm API and exposes those connections to the Fastify Server, available app-wide. The plugin is written in TypeScript, tests are ran with TapJS, and workflows are automated through Travis-CI and GitHub Actions.
Mad Chatter
The Mad Chatter is a fully-featured social web application developed with React on the front-end and NodeJS on the backend. The social app is lightning quick thanks to the help of Redux Thunks, memoized selectors, and callbacks. File inputs are intercepted with Multer on the backend and the social app boasts a direct messaging feature built with Sockets.io. You can sign up a new account or use:
Email: greg@example.com
Password: test1234
Forkify
Forkify is a Recipe's website built with JavaScript ES6 classes, adhering to the MVC and publisher/subscriber model. Some of the app's features include API search functionality, pagination, the ability to bookmark recipes, star favorites, upload new recipes, increase serving amounts, and much, much more. The web app is bundled with Parcel JS, optimizing code splits, network requests, images, and caching. The API server is deployed to Heroku which fetches its data from MySQL through Sequelize.
Natours
Natours is a tour booking service web app that generates views server-side (SSR) with Pug templates. Some features include Stripe Checkout, authentication via web tokens, Mapbox, automatic emails through nodemailer/@sendgrid and html-to-text, and much more. Full disclosure: This app is still being tailored for responsiveness. You can sign up a new account or use:
Email: isabel@example.com
Password: test12345
MealSteal
The idea behind "MealSteal" (not a great name, I admit😋) is to be a food delivery web application. Built entirely with React and styled-components, this app highlights the benefits of state and context, which enabled me to create a shopping cart. The data is stored and fetched from Firebase RTDB. Additionally, this application takes advantage of the React-Transition-Group to render animations.
MyMapty
MyMapty is one of the first projects I ever built utilizing JavaScript ES6 classes, HTML & CSS. MyMapty gets the end-user location via the Geolocation API and passes these coordinates to the Leaflet library, rendering a beautiful map layer. The user can then map their workouts by interacting with the map and inputting their custom workout data. Workouts are then stored in local storage so they can be accessed across browser refreshes. Users can choose between running and cycling but I plan on adding more options.
CAB Coffee
The inspiration to create CAB Coffee Shop came about during my time at Penn State University. The project is a collaboration between myself and 2 other classmates. The name, CAB, actually comes from the initials of our last names. The project is built with Webpack on the front-end, complete with minifiers, code splitting and much more. Our team is proud that we built a shopping cart view that maintains its state across browser refreshes using vanilla JavaScript.