The following video showcases the problem we are addressing, our solution and the design.
The following video showcases our website and web application.
As avid makers and hobbyists, we understand the struggle that the pandemic has caused over the last year with getting access to technical parts and resources. We've observed that students have been socioeconomically disadvantaged, needing to pay high prices for parts such as electrical components and expensive tools due to low quantity volume. This causesunsustainable shipping situations and we wanted to reduce the waste generated. (Do we really need 3 bags and one box for a single capacitor?)
Experiential hands-on learning is crucial to the student learning experience and we made it our goal to tackle this challenge by creating MaykerSpace, a community hub to share parts and foster a community of learners and makers.
With our platform: students, hobbyists and makers can find the parts and tools that they need to learn and experiment, while also giving back and offering to lend their own resources.
In only 24 hours, we were tasked with creating a web application to improve and enhance remote and socially distance hands-on learning for students.
| Stack | Technology Used |
|---|---|
| Front-End | React, Ionic, Figma, Typescript, SCSS |
| Back-End | Google Firebase, Node.js |
| Cloud | Firebase OAuth |
| Database | Google Firestore |
| APIs | MapboxGL & MapboxGLDirection APIs |
The basis of our web application is a React app which. Our code base was built primarily using TypeScript. We chose to use TypeScript instead of conventional JavaScript for it's strong typing.
The vision for this product is that it will be a cross-platform application to support a large user base. We decided to utilize the Progressive Web App (PWA) functionality of React to support the majority of devices without requiring a download.
We used Firebase for bot authentication and our database. We chose Firebase because of its wide variety of features for web applications.
As with any hackathon, we know that technical challenges arise which are annoying but serve as very valuable learning experiences. During the 24 hours creating this project, we identified primarily 3 main technical challenges.
Debugging in an integrated environment
Because this hackathon was shorter than a typical MLH hackathon (24 hours), we had a faster project management cycle, requiring faster development of our integrated software such as completing front-end, back-end and API integrations in succession or in parallel. We found it challenging debugging various issues caused by the various frameworks used. Due to the shorter time, we had to improve on our root cause analysis and be efficient in debugging and ensuring we were not bottlenecked by any process.
Multi-Platform Development
Due to the design requirements of our solution, we needed to develop a cross-platform application that could be accessible to users with different devices on various operating systems. We went with React for its fast rapid-prototyping capabilities in addition to the Ionic framework which allowed for our application to be used for mobile and web. We found a few issues with cross-compatibility, especially using normal React components instead of the Ionic components. This was a good learning experience for understanding the difficulties and importance of testing for the deployment of applications.
Design Integration
We used Figma for our front-end UI/UX design since it is a powerful tool for rapid-prototyping and conceptual design. However, because we were using a dynamic framework such as React with Ionic, we needed to convert the conceptual Figma design into React Elements and apply the appropriate CSS to get the desired outcome. Challenges started to arise when we needed to style Ionic UI components; with some properties of these elements being locked due to the framework rules. It took a bit of time to style everything properly, but we were able to improve on our CSS skills throughout this project.
We paid close attention to the user interface and designed a modern and stylistic UI/UX for users.
Value Proposition is always an important factor in determining business feasibility. We wanted to understand some potential customer segments for our idea and we identified 3 potential stakeholders where our product would add tremendous value.
Students / Teachers
With the advent of remote learning, we have seen that most learning resources have been adapted online, leaving not much opportunity for in-person labs and projects. Our solution would be a unique opportunity for students and teachers to potentially set up pick-up times for components and allow for students to borrow parts between each other and have a way of tracking inventory.
Hobbyists
With an active list of available parts to borrow or request, hobbyists & makers are better able to save money by borrowing components instead of buying new; saving money and reducing environmental impact in the process. This would serve as a good way to foster community between enthusiasts and makers.
Technical Teams
Being members of post-secondary technical teams ourselves, we understand the difficulty in training team members on technical skills without the in-person materials. Our solution would allow team captains/leads to organize pickups amongst the team and effectively keep track and share resources between members.
With 24 hours, we were very satisfied with what we were able to accomplish. Our group has been slowly developing skills throughout MLH hackathons and we were very happy to see the improvement of our skills over time compared to our first hackathon. Our biggest accomplishments were:
- Developing a "full-stack" application, utilizing front-end, back-end, cloud, and API elements in less than 24 hours
- Developing a clean and modern looking UI/UX for our website using Figma including conceptual design art
- Working effectively as an integrated team, utilizing each other's skillsets while also being flexible.
- Spending our Valentines' day with something we truly love, programming! <3
Through the process of this hackathon, our team members were able to learn many useful skills that will be applicable to our studies and future projects. Our team identified a few key skills that we were able to learn and improve upon through CalgaryHacks:
- Website UI/UX and design implementation with React + CSS
- Effective page routing strategies
- Integrated Design process such as putting together front-end, back-end, cloud services, and API usage.
- Dynamic Map Routing and usage of MapBox API to route paths between users.
- Integration of Firebase and Firestore to store and retrieve user data. (Async functions!)
As with any project, we wanted to identify some key areas of improvements and potential future implementations:
- Refine UI/UX and optimize for cross-platform (We only had 24 hours)
- Look into potential monetization opportunities such as:
- Developing additional user account types for institutions and businesses
- Developing potential payment system to allow users to charge a fee for renting with Stripe
- Develop more complex routing algorithms to factor in multiple pick-ups. Mapbox has this functionality but we were unable to program it in a short amount of time.
- Refine the User Profile Class, potentially implementing features to allow users to have a bio to share more about themself and to chat amongst each other in the app in order to encourage networking in the local community.
Because we are also on our local engineering students' society, we may see actual use in offering this service and may work towards further implementation for a feasible product, however, it would require more rigid testing and development.
Ensure that you have the standard Node.js development tools available to use and the Yarn Package Manager installed globally.
To develop or run this repository locally:
git clone https://github.com/RatikKapoor/mayker-space.git
cd mayker-space
yarn install
ionic servePull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please base all pull requests off of the main branch as they will be rebase merged. Check that there are no linter issues before opening a pull request by running yarn run lint-check.