Clothes Store — Single Page Web App

This past week I’ve been working on something I’m really excited about! A single page web app that has some of the functionality of a web store, without using a framework.

I could have used a framework, I probably should have used a framework, but I made the decision that at this stage I really wanted to focus on the fundamentals before using any fancy JavaScript frameworks.

I’m quite happy with how it turned out! Here’s a video of it running on a mobile:

and here’s one on a desktop:

The way I’d set it up was:

  • Product— holds all details of each product in the store
  • Shopping cart — can add and remove products
  • Voucher — creates vouchers for discounts
  • Checkout — Displays subtotal, adds voucher, displays total
  • Store — Displays the HTML of the page depending on what happens
  • Index — Sets up the store, changes based on the user’s interactions.

I really TDD’d the development of the back end, and got pretty good test coverage for unit tests.

One thing that I really need to learn is how to automatically feature test in JavaScript. I looked into something called Zombie.js, but at this stage I’d stopped using node. I’d love to find something like capybara for JavaScript.

One issue that I have with the code that I’d written is that I have some really long functions. I’ve refactored out what I could, but there are still a lot of long ones in there. I’m injecting a lot of HTML via JS functions, and for the life of me I can’t figure out how to make these functions smaller. A framework might help with this.

I don’t love the look of it, but I really focused on the functionality; specifically making it single page (so no refresh). With more time I think I’d be able to make it look a lot better.

Overall I learned a lot from this project, and really enjoyed doing it. I feel like this has made me get a lot better at front end all ready!