Comic Box Online
Project Summary
App Icon
Platform
- Web (Chrome/Firefox/Safari)
- Mobile Application (Android)
Development Languages/APIs/Libraries
- JavaScript
- ReactJS
- React Router
- Bootstrap
- Bootbox
- JQuery
- C#
- HTML
- CSS3
- MySQL
Development Tools
- Notepad++
- Jetbrains IntelliJ
- MySQL Workbench
- Jetbrains Data Grip
- Microsoft Visual Studio
- Unity
- Adobe Photoshop
- Postman
- Yeoman.io
Revenue Model
- Free to use
Target Audience
- Comic Book Collectors
Team
- Bill McIntyre
Copyright © 2018 - Entrick Entertainment, LLC
Backstory
Sound Bite
Collect and organize how you want.
Executive Summary
Comic Box Online allows users to create an online, easily browsable record of their comic
book collection. A common problem for collectors is knowing exactly which issues you
have or which you are missing while on-the-go and while other solutions for this exist, each
had their own flaws or missing features that require users to make use of multiple
applications or websites to do everything they want to do. Comic Box Online was built
to be a one stop solution for collection management and was designed to be flexible
enough to add new features to accommodate to evolving customer demands.
I recognize that the most challenging part of entering this space is how established the
competing products are. Collectors have been using other solutions for a long time and a
lot of those users have huge collections that would be incredibly tedious to migrate over to
a new platform. To help ease this transition I’ve incorporated the most convenient ways of
adding books into your collection through bulk addition of issue numbers or UPC code
scanning through the mobile app. There is also a new wave of collectors who are just
starting out due to the release of majorly successful comic book movies that are bringing
new customers into the hobby (Owsley, 2018).
Both the website and application will be free to users.
Comic Box Online allows users to create an online, easily browsable record of their comic
book collection. A common problem for collectors is knowing exactly which issues you
have or which you are missing while on-the-go and while other solutions for this exist, each
had their own flaws or missing features that require users to make use of multiple
applications or websites to do everything they want to do. Comic Box Online was built
to be a one stop solution for collection management and was designed to be flexible
enough to add new features to accommodate to evolving customer demands.
I recognize that the most challenging part of entering this space is how established the
competing products are. Collectors have been using other solutions for a long time and a
lot of those users have huge collections that would be incredibly tedious to migrate over to
a new platform. To help ease this transition I’ve incorporated the most convenient ways of
adding books into your collection through bulk addition of issue numbers or UPC code
scanning through the mobile app. There is also a new wave of collectors who are just
starting out due to the release of majorly successful comic book movies that are bringing
new customers into the hobby (Owsley, 2018).
Both the website and application will be free to users.
Inspiration
As a comic collector myself I’ve personally used most of the different services available
and found each to be lacking something. I personally wanted to experiment with web
development as that was a new area to me and thought that this would be a great
project to do that with as it offered opportunity to make use of all aspects of modern
web development architecture.
and found each to be lacking something. I personally wanted to experiment with web
development as that was a new area to me and thought that this would be a great
project to do that with as it offered opportunity to make use of all aspects of modern
web development architecture.
Demo Screencast
Site and Tech
What Went Right
Design
Database
The design of the database allowed all tables to remain normalized and new fields that
were required based on feedback in the middle of production (additional fields for books
like ISBN and page count) were pain free to add.
were required based on feedback in the middle of production (additional fields for books
like ISBN and page count) were pain free to add.
REST Web Services
Laying out the spec for the REST web services that both the site and app make use of
was something I was unfamiliar with and took a couple of iterations through the different
conventions of api specs but in the end the design was flexible enough to handle everything
necessary. When the time remaining to develop the app was in question it was decided
that the “Bulk Add” option for books should be added, which was a completely different
format than any of the other requests necessary and adding it in was quick and easy.
was something I was unfamiliar with and took a couple of iterations through the different
conventions of api specs but in the end the design was flexible enough to handle everything
necessary. When the time remaining to develop the app was in question it was decided
that the “Bulk Add” option for books should be added, which was a completely different
format than any of the other requests necessary and adding it in was quick and easy.
Collection View and Data Entry
During the user feedback portion of the process there were a lot of positive mentions of the
collection view interface as well as how managing the many-to-many relations during book
entry (writers, artists, cover artists, signatures) on the website were handled in the form. I
think overall both are as clean as I could hope for.
collection view interface as well as how managing the many-to-many relations during book
entry (writers, artists, cover artists, signatures) on the website were handled in the form. I
think overall both are as clean as I could hope for.
Development
React
Web development as a whole was completely new to me going into this project and I had
some concerns with how much I’d enjoy it. When I started looking into ReactJS though
I was immediately interested because of their virtual-dom feature that I thought was so
smart. The more experience I got with React the more I grew to love it and the enthusiasm
I had for it definitely made the project go much more smoothly.
some concerns with how much I’d enjoy it. When I started looking into ReactJS though
I was immediately interested because of their virtual-dom feature that I thought was so
smart. The more experience I got with React the more I grew to love it and the enthusiasm
I had for it definitely made the project go much more smoothly.
C#
Having years and years of C# experience allowed me to focus on the design of the web
services a lot more than if I would have had to split my time both designing and learning a
new language in the process. This allowed for the spec of the web services to be flexible
and well thought out rather than something hacked together that would come back and
end up as a hindrance when a new unexpected endpoint needed to be created.
services a lot more than if I would have had to split my time both designing and learning a
new language in the process. This allowed for the spec of the web services to be flexible
and well thought out rather than something hacked together that would come back and
end up as a hindrance when a new unexpected endpoint needed to be created.
Time Estimation
Despite not having a solid grasp on the duration this project would take as a whole,
throughout the process I was able to make fairly accurate estimates (often over-estimating
a little) for how long features would take to implement and test. This helped the project stay
on track and allowed me to deliver more than was originally planned.
throughout the process I was able to make fairly accurate estimates (often over-estimating
a little) for how long features would take to implement and test. This helped the project stay
on track and allowed me to deliver more than was originally planned.
What Went Wrong
Aesthetics
Bootstrap
Lack of familiarity was a common theme during the development process but the one
part that was too out of scope was becoming truly adept with Bootstrap. Inexperience led
to some complicated interface issues with the website and the need to move on to
more pressing tasks kept a few of those around.
part that was too out of scope was becoming truly adept with Bootstrap. Inexperience led
to some complicated interface issues with the website and the need to move on to
more pressing tasks kept a few of those around.
Assets
Time being as short as it was for the app development portion of the project left me
unable to acquire proper art assets for it. With better planning for this in the future I
would begin this process much earlier. That being said I’m still very happy with the end
result, I just think there would have been room for improvement here.
unable to acquire proper art assets for it. With better planning for this in the future I
would begin this process much earlier. That being said I’m still very happy with the end
result, I just think there would have been room for improvement here.
Development
Unity Asset Store
Some Unity assets were required for time’s sake during the app development and
incomplete or vague documentation caused two features (barcode scanning and
collection view) to take a lot longer than they should have.
incomplete or vague documentation caused two features (barcode scanning and
collection view) to take a lot longer than they should have.
Barcode Lookup Database
Communication with the owners of the only public database for comics that includes
barcode information is progressing incredibly slowly. In the meantime I obtained a clone
of their database to use until I can either get access permissions or work with them to
create their own REST api for accessing the database so anyone can use it. Since the app
is currently hitting a clone of their data from a certain time, no new books are added without
manually obtaining a new copy.
barcode information is progressing incredibly slowly. In the meantime I obtained a clone
of their database to use until I can either get access permissions or work with them to
create their own REST api for accessing the database so anyone can use it. Since the app
is currently hitting a clone of their data from a certain time, no new books are added without
manually obtaining a new copy.
Testing
Inappropriate Testers
The testers for this project unfortunately were not comic collectors. They were able to point
out visual and workflow issues, but I think that I may have been able to get some more
valuable feedback on the collection management features themselves from fellow collectors.
out visual and workflow issues, but I think that I may have been able to get some more
valuable feedback on the collection management features themselves from fellow collectors.
Summary
This project exposed me to just about every aspect of modern web development and got
me to dig deeper with Unity than I’ve gone in the past. Trying my hand as the full-stack
developer has made me appreciate much more why companies choose to have dedicated
and focused developers for each level. It’s not terribly difficult to become proficient at each
area of development but to have the mastery that production quality projects demand
requires much more knowledge, experience and dedication to that field.
I went into this project knowing that there would be much more to do, and there definitely
is. Thankfully I’ve really enjoyed working on this and am looking forward to continuing
rather than being turned off to web development.
References
Owsley, B. (2018, May 07). Comic books see rise in popularity after success of characters
at box office. Retrieved from https://tinyurl.com/y8npv7e7
at box office. Retrieved from https://tinyurl.com/y8npv7e7
React. (n.d.). Retrieved from https://reactjs.org/
Unity. (n.d.). Retrieved from https://unity3d.com/
Otto, M., & Thornton, J. (n.d.). Bootstrap. Retrieved from https://getbootstrap.com
The web's scaffolding tool for modern webapps. (n.d.). Retrieved from http://yeoman.io/
Visual Studio IDE, Code Editor, VSTS, & App Center. (n.d.). Retrieved from
https://www.visualstudio.com/
https://www.visualstudio.com/
React-Router. (2018, June 08). ReactTraining/react-router. Retrieved from
https://github.com/ReactTraining/react-router
https://github.com/ReactTraining/react-router
Notepad++. (n.d.). Retrieved from https://notepad-plus-plus.org/
MySQL. (n.d.). Retrieved from https://www.mysql.com/
JS Foundation. (n.d.). JQuery. Retrieved from https://jquery.com/
Bootbox.js. (n.d.). Retrieved from http://bootboxjs.com/
Postman. (n.d.). Retrieved from https://www.getpostman.com/
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.