DEV Community: Payton Pierce

How to view localhost on your mobile phone

Payton Pierce — Wed, 13 Jul 2022 16:09:41 +0000

Nowadays, it's more important than ever to ensure that websites and web applications look and feel great both on a desktop and on a mobile device. While many tools have been created over the years to help aid in mobile-responsiveness, such as Responsively and Chrome's built-in Inspect tool, sometimes it would make things a lot easier and smoother to just see your progress, live, from your phone, without having to deploy a work-in-progress.

Fortunately, there is an easy way to view the same localhost you see in your browser, on your smartphone.

Prerequisite: Your phone and your machine must be connected to the same wifi signal for this to work.

Step One: run your local project on localhost

On your machine, get your app up and running in whatever way your particular project calls for, to get it projected to localhost in your browser. Make sure you have that localhost port open in a tab.

Step Two: Get your local IP address

Open up your terminal, and type in ipconfig. This will spit out a bunch of text, but you want to look for the line that says IPv4 address.

Once you've located that address (it should look like 111.111.1.111, but with different numbers), enter it in your phone's mobile browser (Chrome, Safari, whatever) address bar, followed by the port you previously opened on your machine (localhost:3000 or 8000 or whatever it may be). So the final result will look something like this:

123.456.7.890:3000

As long as your localhost port is running and you entered the numbers accurately, your phone should now display the mobile view of your project. It should reload in sync with your desktop as you make changes and save.

Congratulations! You now have a live view of what your project will look like on your particular mobile device, without having to use additional tools, install special software, or deploy a half-made app. While this method doesn't come with any special development tools, it does help ensure that some of the inconsistencies caused by viewing on "mobile" through other means can be eliminated.

I created a minimal, responsive, open-source developer portfolio template with React!

Payton Pierce — Sun, 03 Jul 2022 03:19:58 +0000

Hey there! 👋🏻 I recently updated and published a template that I built for developers to use for their portfolios! I based it on my personal portfolio, which got enough compliments on the design that I figured I should share it ☺

fully responsive
includes dark-mode toggle
clean, minimal design
fun "terminal" effect on About page

Github Repo | Live Demo | Live Implementation

All of the instructions for installation and use are included in the README file of the repo. Most of the personalization is just editing a single file, and switching out some image files! If you use it, let me know, I would love to see some fun new implementations of it 💜

I made my first independent React project!

Payton Pierce — Wed, 30 Sep 2020 21:05:09 +0000

I work with React every day for my job, but I hadn't gone out of my way to work with it independently, save for a few code-along tutorials. I wanted to make something completely from scratch, with nice design and with dynamic data.

So, I created a Portfolio Template!

A few months ago, I posted my portfolio here, which was made in Vanilla JS at the time, and got some amazing feedback. Since then, I've translated it into React, and decided to make a template based on the design.

Let me know what you think :)

https://github.com/paytonjewell/ReactPortfolioTemplate

Portfolio Review

Payton Pierce — Thu, 16 Jul 2020 18:21:33 +0000

After spending a long time looking at inspirations, playing around with ideas, and self-doubting, I think I'm finally happy with my portfolio.

I'm definitely on the newbie side of the developer spectrum, so I know that my projects themselves aren't anything to write home about, but I would be very appreciative of any feedback that I can get! And that includes anything from design to best coding practices to ways to improve the projects I have listed.

Dev.to has been a fantastic resource for me in my learning process and I look forward to any constructive criticism I can get from this awesome community!

Here is the link to the portfolio website!