Inspiration
This organisation gave more details of their requirements, so it was easier to picture what they would have wanted their application to look like. Design-wise, we took inspiration from online shopping platforms, because they have very well-established and refined UI.
What it does
Currently, it does not do too much - there is a login screen which is fully functional, and a minimart screen which displays items on sale. We hope to be able to work more on it in the future
How we built it
Reactjs, CSS, HTML/ JSX, Firebase. Informally, a lot of online tutorials, articles, deep dives into StackOverflow, tape, hopes and dreams.
Challenges we ran into
Neither of us are familiar with web development at all, so participating in this challenge essentially meant we had to learn web development in less than a week, and implement a moderately complex application. Even though we have had some programming experience, our lack of familiarity with the specific behaviours of certain frameworks and languages (such as React's interactions between the DOM and asynchronous functions) meant we encountered many issues in making our app work the way we intend it to.
What we learnt
Skills-wise, we picked up the basics of React, JavaScript and CSS, as well as the functionalities of Firebase.
What's next for H4G Minimart
A lot of features, essential and otherwise, were not implemented due to time constraints. We hope to work on this project even after the end of the hackathon, for the sake of our own learning, if nothing else. Features we would like to include, in general order of priority, are:
- A page for profile details (name, balance, transaction history), which may become the landing page after a successful login. The user would also be able to change their password and other account settings here.
- A popup or a new page dedicated to product information when an item listed in the mart page is clicked on.
- The functionality to add an object to cart (further refinements include adding a specific quantity, variant of product selected to be added, price estimates when adding item, etc)
- A cart -> checkout page, where users can select items from the cart to be purchased.
- The admin side of the application, which includes functionalities to add new users, reset password for current users, access inventory information, update inventory, summary of weekly activity.
- A "Forgot password" link for the users that sends a request to the admin to reset the password
Log in or sign up for Devpost to join the conversation.