Yelp-Feelers!

In this project, our team of 8, consisting of 2 UI, 2 FE, 1 BE and Team Lead (Both ME), 3 Data Scientist students, all tasked working as a team to create a website in 4 days that would essentially adjust the user's direct star rating to what we perceived to be a more accurate star rating based on processing their written review with our Data Scientist built sentiment analysis tool.

As Project Lead and Backend Developer I was responsible for providing guidance for each developer AND building out the API via NodeJS, Express, PSQL based on DS provided data, and the Frontend developer expected data needs. All desired endpoints were successfully built to spec.

Great team! I am very proud of my team and my contributions as the Project Lead and Backend Developer!

Photo by Jarritos Mexican Soda on Unsplash
img of stunning css and javascript books

Chicago Array of Things!

With this project, in four days, our team of 9 consisting of UI, FrontEnd, BackEnd developers, and Data Scientists were tasked with building a website representative of the Chicago Array of Things data.

As the FrontEnd developer of this project I was expected to use React, Redux, JavaScript, HTML, CSS, MaterialUI, and Axios to build out a way for users to select the different sensor and measure types and produce a relevant graph by sending that data to the back end API. Mission accomplished! I went above and beyond to add some state logic to help manage component rendering based on the app state! Enjoy React!

img of stunning css and javascript books

Lambda Times React Version!

Introducing React! Learning React has been rough...however, this week was spent introducing us to React. React strips away the need to interact with the DOM using the DOM API. React's virtual DOM interacts with the DOM for us by using a process called 'reconciliation' which monitors the state of the application and when it updates, the DOM is updated by the React virtual DOM.

Some deep stuff! We spend a lot of time focused on what prop drilling and state management is and their application within React. Once you get it, you get it! We also go over the React Render Cycle: Mounting, Updating, Unmounting. I am still grasping how all this fits together. There is a lot to consume here...liking it so far! This challenge embraces all that we have learned this week related to state management, prop drilling, and components. Did well satisfying MVP; couldn't quite get the carousel built...the bane of coding for me!

img of stunning css and javascript books

Applied JavaScript

Okay. This week was all about the DOM and using JavaScript to manipulate it. We were given the task of creating a Lambda Times newspaper website using js classes to access and manipulate the DOM.

The primary objective for MVP was to add functionality to the tabs that will act as filters for which tabs continue to display. Stretch is to add an image carousel using a similar approach! While I was able to get the MVP satisfied in the expected time, I had to get some help later to get the carousel (stretch) task completed later on. Looks great now though! Very pleased.

img of stunning css and javascript books

All About Fundamentals of JavaScript

We spent this week learning about variables, functions, callbacks, closure, prototypes, this and new keywords, constructors, and classes! Phew...what a week! Today's Sprint Challenge was to make use of all that within 3 hours! We were to build our own for loops to retrieve data out of an object, then we used inherent methods like forEach, map, filter, and reduce. Then we got our Carhartt gear on and dove into constructors.

I will say...THANK YOU class! Classes make object-oriented programming so much simpler. The whole point of today was knowing how to make use of the different ways to create objects that have key-value pairs and then access them for review based on situational needs. If you want to see my code, click the 'view my work' button below!

image of webpage with console logged data results

HTML, Advanced-CSS...Preprocessors, Responsive Design

In this week's 3-hour Sprint Challenge, Lambda tasked me with utilizing all we have learned in the previous 2 weeks plus make use of preprocessors; in this instance Less. We learned about the HTML meta tag, viewports, @media, and more! In this week's challenge we are expected to modify the page to match all RESPONSIVE layout designs for Phone(Mobile first), Tablet, and Desktop. Convention, flexbox, design, AND RESPONSIVENESS were all important. Bonus for animations! This page responds like a champ when changing browser size between 500 and 800+ pixels!

image of Desktop and Mobile SPACEWALKERS webpages

My First Crack at Responsive Design

In this project, I attempt my first shot at Responsive Design. I make use of a Chrome Browser addon called Pixel Perfect for the first time. Note to self, adjust the scale from 0.5 to 1.0, and center it...DOH!

image of webpage with content smaller than web canvas

Convention and Flexbox

In this week's 3-hour Sprint Challenge, Lambda challenged us with leveraging all we have learned about HTML & CSS over the past 4 days. Here we are expected to modify the header of the index page and portions of the body to match the design. On the about page we are tasked with making the majority of the page match design. Convention, flexbox, and design were all important.

image of webpages

Flexbox Novice

This is my first time working with Flexbox. In this project we modified existing file content to better align with the Flexbox concept as opposed to using inline-block. The major focus was on making a site that matched design file requests. We were also tasked with interconnecting two sites by use of the navigation bar and logo.

image of project webpages

More projects content to come...