DEV Community

Cover image for I Made an entire FULL-STACK App using ONLY my Phone 🤯️
Eluda
Eluda

Posted on

I Made an entire FULL-STACK App using ONLY my Phone 🤯️

Thanks to Cyclic.sh for sponsoring this article!

After a long day of programming, I came back home, went into the shower, and a series of thoughts suddenly crossed my mind...

It is a known fact that phones have truly come a long way. From bulky communication devices, to little computers that fit in our pockets.

It's amazing that these little rectangles are able to make calls, take professional photos, and even do complicated AI processing.

But with all this power, who’s to say that one cannot use their phone to write a full-fledged program?

So I took it upon myself to solve this little mystery. In this article, I'll show you how easy it is to write a full-stack app, using nothing but your phone, and a little magic from Cyclic.sh.

We'll build an app for scheduling posts on DEV.to, since that's not an official feature as of yet. I hope that you find it useful :)

Let's begin!

Setting up our IDE 💻

Installing Termux

Although it’s available on the Google Play Store, that version is outdated.

To install the latest version of Termux, you have to visit F-Droid.

After that is done, launch Termux, and explore the wonders of Linux, straight from your phone!

Please note that it’s important to run these two commands before doing anything, because that will prevent a lot of issues going forwards:

pkg upgrade
pkg update
Enter fullscreen mode Exit fullscreen mode

Runnning basic commands in termux.

Installing Git, Github CLI, and Vim

It wouldn’t be Linux if we didn’t have Git, and our favorite text editor, Vim! We’ll also use Github CLI to simplify the Git workflow.

Installing these is as simple as figuring out how to close Vim ;)

pkg install git gh vim
Enter fullscreen mode Exit fullscreen mode

I know how to use Vim, he says arrogantly. Another person asks: Do you know how to exit? He thinks about it for a second, realizes his stupidity, and cowers down into becoming an alcoholic.

And we wouldn’t be able to make a web application without the help of Node and its packaging system, NPM. They’re also super-easy to install:

pkg install nodejs-lts
Enter fullscreen mode Exit fullscreen mode

Making the front-end 🤷‍♂️️

This was a lot easier than I thought it would be…

Developing a Vue app, on mobile!

It’s a lot easier to build a webapp starting from a good template! Running this command does exactly that:

npm init vue@latest
Enter fullscreen mode Exit fullscreen mode

I won’t go into depth on how I made the front-end code, since it’s pretty simple. Instead, here's a short video of me coding with Vim:

Spoiler alert: it’s pretty rough on the fingers!

Coding in vim

Making the back-end 🙅️

You’d think that this part would be complicated, but with Cyclic starter templates, it’s as easy as pie!

Creating an Express server, with Cyclic

I used Cyclic’s Express template to save myself from hours of coding.

With the help of Cyclic’s mobile-responsive website, this was a freakishly easy thing to do.

Cyclic’s Express API Starter Template

Connecting our Cyclic API to the front-end

How do we go about connecting a back-end to a front-end? Simple. HTTP Requests!

Note: we also have to setup CORS, but for quick usage, it can be done with one line of code: app = express(cors())

Here’s the code, written on a mobile device:

Backend code

Launching our server 🚀

This step can be a bit challenging. To deploy our back-end, we'd usually need to buy a server and spend hours configuring it.

Thankfully, Cyclic.sh saves us from all this trouble. With Cyclic, we can deploy our server for free, and effortlessly make it work with any Github repository.

Integrating Cyclic with our Github repository

With the help of Cyclic’s mobile-responsive website, this was a freakishly easy thing to do.

Deploy from Github with Cyclic

Deploying with the click of a button

After finishing all this work, it’s time to relax, kick-back, and deploy!

With Cyclic, deploying means clicking a single button. It’s so simple that you don’t even need a computer to do it!

Connect with Cyclic

Conclusion

What a journey! And you know what the most surprising part is? It actually works!

Wanna see it for yourself? Here's the source code, and here's the live app.

We used many tools in this journey, ranging from VueJS and TailwindCSS for the front-end, to Express and Cyclic for the back-end. And the power of Cyclic extends even ways beyond that!

In fact, Cyclic can deploy any kind of app, ranging from React to Svelte to NextJS. Pretty neat, huh?

Now, if you were to attempt this challenge, what would you have done differently?

Discussion (9)

Collapse
pengeszikra profile image
Peter Vivo

maybe 2 space tab is best for compact coding.

Collapse
wrench1815 profile image
Hardeep Kumar

Wait y'all don't use 2 space tabs in html, css, js?

Collapse
hnrq profile image
Henrique Ramos • Edited on

Awesome!!

Collapse
ironcladdev profile image
IroncladDev

I'd have used replit.com for coding on a phone. Agreeably, 2 tab spacing is the best for smaller screens.

Collapse
leopold profile image
Leopold • Edited on

How did you manage the responsive ? (if there is any).

Fun challenge!

Collapse
pengeszikra profile image
Peter Vivo

Grat for app making in phone, that is challenging.

Collapse
eludadev profile image
Eluda Author

Thanks!

Collapse
polterguy profile image
Thomas Hansen

Funny, not sure I recommend it, but definitely funny :D

However, you can rapidly (less than 1 second) create a Web API, and an Angular frontend with your phone using our CRUD generator, for then to afterwards edit the generated files using the integrated Hyper IDE, that works 100% perfectly from any device you might happen to have ... ;)

You don't even need to download or install anything, the entire process would take you some 2-3 minutes using nothing but your phone ^_^

Collapse
lucianodiisouza profile image
Luciano dii Souza

"how not get bored on family parties"