Feedback for new travel web app - Wander Maps

Feedback for new travel web app - Wander Maps
0

#1

Hi all!

I recently built a full fledge travel web app using Express, NodeJS, and ReactJS. It’s called Wander Maps. It provides users with Google Maps of different cities, marked with things to do so that it can be used for both trip planning and when you’re actually at the place.

I’d love any and all feedback you might have and areas you think it could be improved.

Thanks!
Mike


#2

@michaelcjoseph,

the images are taking too long to load. I recommend that you resize these images to the smaller sizes (the sources are still almost twice as big).

It looks like you used the webpack? I can’t read these minified code and am not going to sign up or buy these maps, so I can’t give you useful feedback past this.


#3

Hi @dre.shreeman,

Thanks for the feedback! Yes I’m using webpack.

In general when sizing images, should you base it on what the image size would be on mobile and allow it to scale up, or what the image size should be on a large monitor and allow it to scale down for mobile?

Past the sign up/buy section, is just the embedded google map, so there’s not much functionality beyond that.


#4

@michaelcjoseph

You actually can specify which image to upload according to media size. Just keep in mind, the bigger the images are, the longer they take.

There are many methods where we handle the downloading process for better user experience. I believe React.js is one of those tools where they only load the “next image” just like Facebook does when you scroll down, and it loads more.

Anyway as for controlling the sizes of image dependent on the window size:

for example, you can do the following:

   <main class="row">
	            <picture class="col-md-12">
	                <source media="(max-width:600px)" srcset="img/Main500.png">
	                <source media="(max-width:900px)" srcset="img/Main850.png">
	                <source media="(max-width:1200px)" srcset="img/Main1076.png">
	                <img class="img-responsive main-image" src="img/Main2050.png" alt="Big image of lopsided html code">
	            </picture>
	        </main>

Check out a discussion about this…


#5

additionally, the image file size can be reduced without losing resolution with this resource: https://tinypng.com/


#6

@fentablar

That’s a neat feature!