Inspiration

I’m an Engineering Physics student—so I learn a lot about engineering, math, and physics. I know that fields in STEM are sometimes thought of as being “cold”, and not as “human”, in a sense, as a field like, say, history.

Aside from struggling with understanding concepts at times, I struggle with my overall wellbeing. Something that’s helped has been relating the STEM concepts I’ve been learning to my own life. It makes STEM human, it brings me comfort, and it helps me remember/understand the content I'm learning. I thought it might help other people feel less alone, learn about STEM concepts, and make STEM feel more relatable—and that’s where mylifeastoldbystem.com came from.

What it does

This is a website where people can view, like, and submit user’s submissions, all of which relate STEM concepts to real life. Right now there are four example posts: an S, a T, an E, and an M. Read through the posts for an explanation!

You can see who submitted the post, and you can see how many likes the post has gotten. You can “like” it as many times as you want, similar to Medium claps—the idea behind this was so that people could spread as much love for STEM as they like, so I didn’t want to put any restrictions on it. There is also Facebook liking functionality for further social media reach.

Submitted entries would be reviewed manually before being turned into a submission on the site.

How I built it

I wanted to do something completely full-stack.

Text: identified concepts and wrote the copy

Design: Adobe Photoshop and Illustrator

Front-End: HTML/CSS, JavaScript (no frameworks; more on that later...)

Loading in data: loaded in XML file on page load

Back-End: attempts included.....

  • PHP/MySQL
  • Node.js and Express
  • using XAMPP? AMPPS? phpmyadmin??
  • YDN-DB
  • this was frustrating because I really wanted to set up a backend :(
  • ended up embedding Facebook liking system

Challenges I ran into

I had a commitment earlier in the day, so I had to start hacking late—so I decided to work on my own. Taking care of the entire project from start to finish was fun, but it was a lot of work.

I tried getting a ton of things started—Angular, React, many, many node modules, MySQL, PHP (I'm 100% sure my PHP is somehow configured improperly)...every time I installed something, the command couldn't be found. I couldn't figure out how to configure my system, and after spending 10 hours trying to get something going, I decided to just put in a Facebook like button.

Accomplishments that I'm proud of

  • Finishing the designs
  • building the website from scratch
  • Got core functionality working
  • The form does email validation

What I learned

  • ran things on localhost!! python -m SimpleHTTPServer worked for me and it was so exciting!
  • some CSS transitions
  • circular incrementation
  • tried practicing some different design styles
  • I need to ask someone how to deal with my computer so that I can actually use PHP/MySQL/React/Angular/Browserify/Express/everything I tried to get going...............

What's next for my life as told by STEM

  • Figure out what's wrong with how I'm using my terminal so I can set up a backend for real!
Share this project:
×

Updates