On our local SPCA website, the "Find Pets for Adoption" page has been "Under Contruction" for some time. I decided to build a little "pets for adoption" app as part of a "re-imagining" of their current, outdated website. I built the site as a Single Page Application, employing the MEAN stack, with AngularJS on the client-side, Node and ExpressJS on the server, and Mongo as the datastore.
The CSS is all handwritten, and the site is fully responsive. It was designed with the "Moblie First" philosophy as a guide. I find that writing the CSS myself works well for me, although I think frameworks like Bootstrap and Foundation can be very benificial, and if a project calls for that, I wouldn't hesitate to use them.
The most important thing I learned while making this web application was the best way to navigate the relationship between page load time and image size. This site utilizes many images, and there are background images which can really have a very obvious affect on load time. There are many statistics floating around about how long a user will wait for a page to load before moving on to something else, and none of them suggest that they'll wait more than a few seconds, so I'm always conscious of what I am asking of the server. The first and most important way to alleviate that load is to make sure the images are as optimized as possible.
This web application was for a client that installs brick patios, sidewalks, etc. They specialize in 'Permeable Pavers,' which are bricks that allow water to permeate them instead of running off into storm drains. They wanted me to build an app that allowed the customer to enter their own information so they could make a more informed decision about their needs.
The application relies heavily on data-binding, and it moves in 'steps,' each of which is conditional on the users input in the previous one. There are many mathamatical formulas implemented, and the last step utilizes the 'requestAnimationFrame' api to give the user an animated output of their personal inputs.
This is an application I built for my 3 year old son to use to help him learn about how
letters sound. I had been dipping my toes into React and thought this would be a good app to learn more about it. I'm hooked. I really enjoy working with React, and look forward to using it for more complex applications.