DEV Community

Cover image for Twilio hackathon Project update: Received; UI
Mazen Touati
Mazen Touati

Posted on • Edited on

10 5

Twilio hackathon Project update: Received; UI

Hi, I would like to update the status of my Twilio hackathon project.

A quick reminder about the project's goal

my goal, is to build a platform that enable people to reserve a storage space and create a public gateway with an easy to remember URL.

By now I've reached the step 3 of the project which is preparing the UI or Hi-fi prototype for the app.

without further ado, these are some UIs design for the main features

Landing page

As I described in the initial post, I'm aiming for market ready product. Hence I've prepared a landing page to add more value for the product.

Landing page

Storage space

When a user logs in, he will have access to a storage space where he can manage all the received files or create and share new folders.

App main interface

Public bucket

When a user share his public profile URL with a friend or a co-worker. The later will need a password to unlock a specific folder and upload files to it.

Public bucket password

Public bucket upload

2FA authentication

Regarding Twilio I'll use 4 API:

  • Twilio Verify to ensure phone validity.
  • Twilio Authy as the 2FA which will be enabled by default.
  • Programmable SMS & SendGrid as notification channels.

The following is the UI part for the 2FA step

2FA

Links

I've already pushed all the established UIs alongside the Source file (Adobe XD) to the repository. Also, as for Step 2 of the project I've pushed the initial database model too.

Project's repository: Recieved on Github

Twitter: @mazen_touati

Thanks for reading, feedbacks are appreciated 🦄

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (3)

Collapse
 
sergix profile image
Peyton McGinnis

I really like the UI! And your idea is pretty similar to my submission. 😆

Collapse
 
mazentouati profile image
Mazen Touati

I'm glad you liked the UI bit. Yes after checking you submission there's similarities in the core but the implementation and use cases would be noticably different. Good luck Peyton 😁

Collapse
 
sergix profile image
Peyton McGinnis

Good luck to you as well!

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay