Recently, I took on a challenge to build a mobile application portfolio for a client—within just one hour. Thanks to Vercel's v0 AI, I not only achieved it but exceeded expectations. Here’s how I did it, step-by-step.



Everything started with a simple yet detailed prompt:

"Hey, I am planning to create a single-page website for a client. I need to show my mobile application portfolio to the client. This webpage will be like a proposal where I tell about myself, display my apps, and share my contact info. For the app section, I envision cards with app screenshots as thumbnails, each displaying the app's name and a one-line description. Clicking a 'View App' button should open a modal with more app images and a download button for my resume. I want this optimized for mobile, using the theme I’ve attached."

This prompt clearly defined my requirements, ensuring that Vercel's v0 AI generated a solid starting point.

Within seconds, v0 provided me with the base code for a fully functional portfolio webpage. It included:

Interactive modals to showcase app images.

A resume download option inside each modal.

The generated code was clean and responsive, especially optimized for mobile view as requested.

While the AI delivered a great foundation, I needed to personalize it further:

 I refined the structure, ensured all sections aligned with my brand, and fine-tuned the responsiveness for a flawless user experience.

 To enhance performance, I uploaded all images to Cloudinary. This step reduced load times and ensured smooth delivery, especially for high-resolution app screenshots.

 I checked for consistency, added a few stylistic elements, and made sure all links and buttons worked seamlessly.

Deploying the project was a breeze. Using Vercel's platform, I deployed the code directly, tested the live version, and verified everything was running smoothly. Within minutes, I had a live link ready to share with the client.

In just one hour, I went from concept to deployment—delivering a professional, mobile-optimized portfolio. This experience underscored the incredible potential of AI tools like Vercel's v0 in accelerating development timelines.

And the best part? This blog post was crafted with AI too. Full circle! 😄

How I Created a Mobile App Portfolio with AI in Just One Hour

This blog post guides you through setting up automated deployment for your React application on different environments based on the branch you push to using GitHub Actions.



Saves time and effort by automating deployments.
Reduces human error by removing manual deployment steps.
Provides a clear separation between development, UAT, and production environments.
Prerequisites:

A React application
A GitHub repository
A self-hosted runner configured for your GitHub Actions workflow

Here is the yml file using which you can do deployment on testing and production domain at the same time

- production# Update with your production branch name

- name: Create environment based on branch

if [[ ${{ github.ref_name }} == "main" ]]; then

echo "REACT_APP_BASE_URL=your api endpoint" >> .env.development

echo "REACT_APP_BASE_URL=your api endpoint" >> .env.production

The workflow checks the current branch name (${{ github.ref_name }}).
Based on the branch (main or production), appropriate environment variables are set in the .env.development file.
Deployment Steps:

The workflow fetches code from the repository.
Node.js is installed.
Dependencies are installed.
The React app is built using the build:development script (adjust if needed).
Conditional scp commands deploy the build to the designated directory on your EC2 instances based on the branch pushed.
More Secure Methods:

Consider using a secrets management solution in GitHub Actions to store sensitive information like base URLs. This prevents accidentally committing them to your public repository.
You can access secrets within your workflow using the ${{ secrets.<SECRET_NAME> }} syntax.
SSH Keys:

For scp deployments, avoid committing your SSH key to the repository. Instead, configure a deployer user on your EC2 instances and use a key pair specifically for this user.
You can configure a deployer user with limited privileges for security.
Conclusion:

This approach streamlines React app deployments based on branches, improving development efficiency and reducing manual configuration. By incorporating more secure practices for secrets and SSH access, you can further enhance the security of your deployment process.

Workflow file to deploy react app automatically on multiple domains from single runner

Turn on USB debugging and Wireless Debugging.

adb pair host:port code

In this host:port will be available on screen like 192.157.1.8:39486. and code will be the pairing code like 454343


Now press enter and you are connected to your device.

Connect both devices with the same wifi in case you are facing an issue.

Drife Code blogs and ai

Using wireless debugging for Device connection and how to connect android device over wifi for development

More Stories

How I Created a Mobile App Portfolio with AI in Just One Hour

Workflow file to deploy react app automatically on multiple domains from single runner