Inspiration

Looking at the current world situation, people are struggling to take care of personal needs while managing their quarantine. They need a free market combined with final mile delivery.

How Needs & Offers Functions

Needs and Offers accomplishes that end by allowing users to post their needs on the map, and allowing other people with surplus resources to post offerings or directly message those people looking to for supplies

Not only can people come on this platform in the case of quarantine to request food delivery, but they can use the platform for anything from job searching to finding a contractor to install new windows after a hurricane.

Needs and Offers is a demand side marketplace where users tell the market exactly what they are looking for, and the market then replies with people who are willing to deliver goods and services.

Project

The project was split into two halves. The first was to create a mobile web app for Android and iOS users and the other was to design and develop a landing page to attract users to launch the web app.

Design

The design for the web app was forked from Drag Labs' iOS app, CoCre8. The design is stored in Figma and we copied the relevant frames across into a new layer.

The design for the landing page was created in Adobe XD. Inspired by the colour scheme and components of the app design, a basic desktop mockup was created (v1.) The Icons 4 Design plugin was used to import icons from Material and Font Awesome icon libraries and the Notes and Annotations plugin to add suggestions to edit the design.

As the design process continued, a second version was created with a two column layout for the category section which better suited the larger screen of a desktop and an improved hero section with a background image that better reflected the content of the app and copy that suited the overall theme of the app rather than the specific use-case of disaster recovery.

Finally, now that a desktop look for the website had been agreed, work began on responsive layouts for mobile and tablet (portrait) since tablet (landscape) was similar enough to the desktop version and the design for the landing page was complete.

Development

We used Git for version control. Originally, we were using two Github repositories for development and using Github Projects as a task management tool for the landing page but since Drag Lab's existing codebase is in GitLab, we moved over to there and used JIRA as the task management tool for the web app.

Since the landing page was a small project, we decided to use pure HTML, CSS and JS and use as few libraries as possible. jQuery was used to make it easier to leverage JavaScript, TouchSwipe to make the slider swipeable for mobile users and Font Awesome to add icons. Flexbox was used for alignment and CSS Animations to add some interactivity.

The landing page is complete and viewable

We decided to use React Web to create a web app since it would be cross-platform across all platforms without the hassle of maintaining two seperate apps for Android and iOS.

The sign-up page is complete on the web app and development will hopefully continue after the hackathon.

Challenges

It was our first online hackathon so it was a new experience for all of us.

We were a remote team operating in different timezones six hours apart so it was a challenge to keep in contact. We decided to have a daily standup on Slack at 9AM PST (4PM BST.)

It was difficult to configure continous integration between Gitlab and Amazon Web Services but asking for help on Hack Quarantine's Discord server helped us to resolve our problems.

Accomplishments

The feature I'm most proud of is the mobile slider because I figured out how to configure it to only be swipeable on mobile devices. - Louise

What I Learned

A first for me was learning how to minify CSS and JS files and using Figma and Gitlab. - Louise

What's Next

Complete the React web app and link the Landing Page to it

Share this project:

Updates