TLDR
(click to show/hide)
In an unexpected twist, I decide to not go to grad school for math after spending my final semester of school building an
e-commerce website for 3d models from scratch. This article reflects on my software journey right up to the completion of
this project and sets some goals for myself before entering the software engineering profession.
It's been a few months since I've had the chance to write an article. I did several things this past semester including operating math club, diving deeper into the Russian
language, making a startup with my roomate (which I'll talk about later), and graduating from UT!
For anyone who knows me, you'll know that my plan for essentially my entire academic career has been to pursue a graduate level degree and join a research lab. The major change
I went through this semester was deciding that I'd rather pursue industry (or at least try it for a few years). This has come with a major shift in my study habits to focus more on
web development as opposed to recreational and applied mathematics.
This article has a few purposes:
- Act as a snapshot of my web development knowledge/opinions to look back on later and track my progress
- Summarize my first experience with the process of creating a startup
- Make plans for the next major tools I want to learn
- Get back into the habit of writing regular articles
I want to repeat this type of article every 6 months or so, each focusing on major projects I complete during that time.
Ideally, reflection on my progress will improve my learning during each of these intervals.
But without further ado, let's jump into what I've learned the past couple of years that let me create this ecommerce website.
My past few years with web development
Middle / High School: My first introduction to coding was somewhere in middle school (back in 2014), where I started learning JavaScript on Khan Academy.
All throughout middle and high school, I made most of my projects through the site's built in canvas tool and learned bits of Java
through some of my classes. Overall, this was a great learning experience, but looking back, I wish my introduction to coding had been completely different.
The major issue I faced without knowing it was that I didn't learn much coding because I didn't realize how much more I had to learn and how to go about acquiring that knowledge.
The drawback to learning JavaScript through Khan Academy is that when the sites tutorials ran out, I felt confident I knew most of what I needed to know and the only thing left to do was to apply it to projects. I also grew too
familiar with the built-in coding panel and was never really pushed to explore a real IDE or set up any tools myself.
Watching the tutorials had worked well for me with math; most of calculus and linear algebra are pretty well covered by the video series available, so I thought learning computer science would be similar. Turns out, although I had learned
a good amount of the basics, there was a lot more coming.
Early college: My first semester, I took a course which introduced me to Python. The material was nothing new to me really, just a different syntax. What really opened my eyes further was the second semester when I took
a course on Data Structures. I realized how much more there was to learn and finally started diving into learning things which would come to be a lot more interesting.
Within a year or so, I had added NumPy, SciPy, R, MATLAB, Pygame, HTML, CSS, jQuery, VSCode, along with a couple others to my repertoire. Most of these were still
learned with the purpose of pursuing a PhD in math, so I went much further with things adjacent to Numerical Methods and Scientific Computing than I did with Web Development.
I also had the opportunity of attending a few REU's remotely through Harvey Mudd College and Arizona State University which really forced me to
get good at partner coding and collaboration tools / techniques like Git and Kanban.
Creating and Maintaining Layolay
My roomate approached me this past fall semester with the idea to make a 3D printing ecommerce website. The idea was that many 3D models were available online to print, but individuals without a printer and a few years of
printing experience were unable to make them effectively. Sites also existed for manufacturers to print and ship custom 3D models to customers, but that usually came with a high price and the necessity for the customer to have some 3D modeling skills
to create the design themselves, or outsource this to a third party.
With his 6+ years of 3D printing experience and my coding experience, we figured we could make this a reality and Layolay was born.
I'll use this section to talk about the tools we use, what I thought of them, and things we plan to do when rebuilding the site. I learned a lot about startups in general during this process,
but since this is a snapshot of my web experience, I'll keep my discussion to the software development aspects of our process.
Since we are relatively new developers, we decided to use Firebase along with React, which are great for setting up an application quickly and easily.
We also used Trello and regular Scrum meetings to make sure we had an agreed upon vision for what we were coding.
Trello and Scrum for Organization: Using Trello was invaluable for our organization as a team. For those that haven't used it, its a good idea to set up a lists for things that need to be done,
things that are currently being done, things that are finished and need to be reviewed, and things that have been reviewed. Whenever you have a meeting, you think if things need to be added to the first section, and
then you can go through the list of items and score them based on the amount of time they will take to complete. High difficulty tasks can be broken into smaller ones and then each person can then claim a number of items which are
reasonable for them to complete before the next meeting.
For future projects, I think our meetings should have focused more heavily on the architecture of our system. The TODO items ended up being things like features, pages, and bug fixes that we would just claim and work on individually,
but in a better organized project, we would have discussed as a group how the code for each of these would be laid out at a higher level. We ended up with similar pages and components having slightly different conventions and architecture
styles which probably could have been avoided if we planned out what would work best on paper first.
React for the Frontend: React was great throughout the project. Components were fairly reusable during the project which made the process much faster so we could get to a phase where we could test things out with real users.
The only realy downside we experienced with using React itself was the amount of bloat that came with using a big framework. Those who have used it before know that node modules are a huge mess, and we ended up installing tons of libraries for
styling that were tough to keep track of.
The best styling tool for creating the site quickly in my opinion was Tailwind, which let us work our styling into the JSX itself. I ended up using this for a few more projects since then as its
great for fast prototyping, but I think for larger, more professional projects in the future, I'll want to have a better way of organizing my CSS than inline class names.
Lastly, as I mentioned in the organization section, our components ended up being highly coupled and honestly pretty gross to deal with. Looking back, this definitely could have been solved with a lot more up-front planning.
Firebase for the "Backend": I say "backend" here in quotes because Firebase really doesn't give you all the functionality you would want in a backend. Well at least not for free. My primary complaint is that there is no method for
disabling functionality once your budget has been surpassed. This could easily be built into the system but wasn't - it's pretty clear they must make some money off of people this way.
Additionally, there just wasn't a lot of functionality for certain queries we were wanting to use. You can't use compound queries for documents with multiple 'where' filters, 'array-contains' only supports up to 10 results,
and any sort of text search needed some expensive external libraries. Perhaps some of these issues could also have been adressed in a more detailed system design, but overall, using Firebase wasn't a great experience other than that it
was quick to set up.
I may use it again in the future, but only for small projects and prototypes.
Netlify for Deployment: Netlify is a great service for free website deployment. It's not hard to replace the auto-generated domain name with a custom one and you can just point the service to an existing GitHub repo. No bad experiences here,
but I think I'd like to try testing it out along with a test suite or some other options like Heroku and Vercel.
My upcoming goals
Reflecting on some of my experiences with Layolay, I've decided to try and focus on the following topics and technologies in the next few months:
Custom Backends: I'm already looking into some options for making my own backends. I considered Express as its fairly popular, but I think I will focus on learning Django since my primary coding experience is with Python.
System Design: The largest issue with Layolay has been organization of our components and database. I plan on learning some techniques for planning out these architectures and putting them to practice.
Testing: We neglected any sort of official testing almost entirely during our project. Learning either Jest or the testing built into Django is an imporant next step for me.
Better Styling: This is a pretty general topic, but my goal is to learn things like Sass and start researching some general design advice.
With these in mind, some books on hand (I'm already almost done with The Pragmatic Programmer), and a strong motivation to make more projects, I'm looking forward to continuing learning
through the rest of the year, and can't wait to report back with what I've accomplished. Look forward to some articles on more fun topics than this later in summer!
