Hi all! For the last month I have been using this project to learn Express, Nodejs, and MongoDB. It’s my first time working with these technologies. The project itself is a website that uses Google Street View API to display an image of the sky above your location. I’ve just finished adding some database functionality; visitors to the site can both request images or register for an account, which allows you to save / delete images to your “cloud storage”.
The project mostly started as a playful response to phrases / technologies like cloud computing before I spent time building it out.
You can visit it here:
And the code:
I’m wondering if you all think this is a portfolio-ready project? Or maybe spot any red flags that should be addressed / have minor suggestions to improve it? There are some features I’d like to add but I feel it’s mostly polishing now. A future goal would be to rebuild the front end with React since it is all mostly just static pages.
Let me know what you think! Thank you.
I went to your project page and clicked the “Request cloud” button and my browser asked me if I wanted to allow it access to my location and I clicked “Allow” but yet I get an error message that says “Sorry, we have no imagery here.” Is this expected?
Hi, thanks for noting - the Street View API returns this for locations where Street View imagery is unavailable. I forgot that this happens sometimes so I’ll be sure to account for those cases.
I was just thinking that if you are using this for your portfolio and an employer is testing it and that’s the message they get without any explanation then that might not make a very good impression
Nice project. I noticed a couple of things though.
- In your HTML, before checking for the cloud image, the
img element doesn’t have
alt attributes. Perhaps you need to insert the
img element after retrieving the cloud image.
- And the
alt text for the image element seems to remain the same even when you are using a placeholder image when there is no image.
- I notice you are using
let a lot though you are not reassigning the variable. Is there any reason why?
I think this is a really cool idea and not one that I’ve seen a lot of or any of. (yours is the first). So I would definitely recommend it for a portfolio project for sure. All though I have yet to land a web development job myself and am still working on getting all my portfolio pieces together haha…
You said you’ve been using freecodecamp to learn Express, Nodejs and mongoDB ? Since when is that even possible?
@bbsmooth You’re totally right to say so! I added some code to handle that case a little more intentionally. so I appreciate that you brought it up. Going through the project again, there are definitely a couple parts that could use more robust error handling. Hoping to follow a couple tutorials on this topic and also testing.
@nibble Thank you! Inserting the img element after retrieving it from the API is a good suggestion. No specific reason that I’m using
let - is it best practice to use
const instead on those variables that aren’t being reassigned?
@userNameOnline Really appreciate your comment! I have been coding for a bit as a hobby but only recently started to take it seriously as a potential career. It definitely takes time and effort - I hope you get all the support you need to make it happen. And yes, freeCodeCamp has a Back End Development and APIs course that goes through Node.js, Express, and MongoDB. I used it to build an initial intuition and then looked things up on Google / checked the documentation whenever I had issues.
I would suggest revamping the UI/UX, as it doesn’t really look good visually. Make it look more “professional” as it comes across more as a toy project.
And all of this text “Google Cloud View is a project by Tristan Espinoza that uses the Google Street View API to display an image of the sky above your current location. Visitors can request a Cloud View image by clicking the ‘Request’ button. This prompts the visitor for permission to use your current latitude and longitude. The request then returns a Street View image with the camera pointed upwards.” should be re-worded to address the user directly. Simplify all of this wording and make it clear and concise for an average user to understand.
Whenever you’re writing an interactive app, make all of the text address the user directly, and think about its usability from a user POV.
@astv99 Thanks for these, I agree the UI / UX was definitely an afterthought but some intention around it can do a lot. I’ll spend some time thinking about that. And thanks for the suggestion to edit the text - I wasn’t sure how much to share but it sounds like it could use some cutting and/or focus on the user’s experience?
Yes, as I said you should address the user directly.
The mistake you’re making here is addressing a potential employer, which is both odd and awkward. Even if you’re making a “portfolio” app, you should assume anything you build is always for an end-user.
Try to avoid making “portfolio” apps that look like toys, experiments, or especially egregiously, obvious job-application material.