Hey fellow builders! 👋
Do you use free hosting services for getting links from your images like ImgBB with poor quality and tons of ads?
Did you know you can host any kind of media on your own Google Drive?
The sad part is you’ll get only a Google Drive Sharing Link which you can't use on a blog or on a website to refer to as an image… Not anymore! Today we’ll build an app to fix this and host our images on Google Drive and get universal links from it.
We will build this sweet tool, right here, right now. Let’s get into it 🤟
Design
Even if I have some fun designing modern and sharp products like this, Let’s go for a retro-ish style since I’m in love with these aesthetics and vibes.
- Tips: Laser focus on the product’s value proposition, even if the Art Direction could be a key point, your audience must see the solution in your product addressing his current pain point at first glance. Remember we are not designing an art piece, but a solution to a problem.
- Tools: I use Figma all day, and muscular memory saves me a lot of time (shortcuts, automation…) but any design tool like Sketch or Adobe XD is fine!
- Secret sauce: You can estimate the success of your product by multiplying the relevance of your solution and the way you present it. Do it step by step. First, figure out the business and the solution, then, focus on the design. Keep in mind 50 x 0 = 0.
Coding
I want to present to you Svelte, an incredible JS compiler that allows you to mix HTML, CSS & JS with simplicity and elegance. Building applications, funny projects, and creative ideas with it are just… A joy.
- Tips: Take a few days to learn Svelte and handle the basics of it. I know we are all eager, but take those few days to understand what is Svelte. You’ll never regret it. If you want to learn Svelte, this resource is insanely well done.
- Tools: I use VS Code as a code editor, complete and you can add plugins for the Svelte syntax.
- Secret sauce: The coding part is a translation part. Where you translate your visual design into a real app. But also where you translate the logic behind the buttons and stuff. Be sure your design and your mind are clear, if not, just roll back to the design step and come on coding after.
Now push the code on GitHub, choose a deploying service like Vercel, press the deploy button, and voilà! Our brand new tool is now available to the world!
Hope this little breakdown could inspire you and motivate you to take action! I want to share with you something I have learned along the way: Taking action will ALWAYS be worth it.
You can ask me anything at duprez.hugo@gmail.com or see my other projects on my personal website. Don’t forget to follow me to see my next explorations about design and crafting!
