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’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 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!