I started Aussie Camps as my learning tool based on Colt Steele’s Yelp Camp training. Except that I wanted to make my app a little more local. I must point out that this web app was built following Colt Steele’s Web Development Bootcamp training and full credit goes to him. I did add my own stylings and some functionalities that I preferred but this was an app that came out of the training session and I don’t claim it as my own achievement. And yet I invested hours in learning, implementing and understanding what was going on while I was building the app. In no way I feel capable of repeating that process without any help but I must point out that even the teacher used google on multiple occasions and I feel 100% confident in that skill because even though I was following the tutorial, some things were already outdated which meant that I needed to source my own information of why some things weren’t working as they were based on the training sessions.
How I built Aussie Camps web application with NodeJs
I will confess, I started this training part just after learning JavaScript and also I knew nothing what NodeJs stood for. But now I feel that I am capable of at least attempting to create another very simple website using the same process. Sure, having experience with PHP and building websites on WordPress helped but it is a full process that I never had to go through even when I was building WordPress themes.
I started by applying some information that would create an impression of a fully working app. For that I applied Seed helpers which involved 500 local Australian cities (which I sourced from simplemaps website). To create multiple locations I used Math.random() as well as words representing Australian nature and aboriginal culture to add random names to places. It was done so that it would look like a real app while I was in production mode building it. I also found some Australian camp photos on Unsplash and used them for the project.
For Camp names I used another file with again Math.random() putting together random words to help them best represent Australian nature and culture. For first word I used words like: Tidda, Euroka, Koala, Kangaroo, Brumby, Bunji, Forest, Silent, Eucalyptus; and for the second one words like: Estuary, Village, River, Mangrove, Red Sands, Outdoors, Billabong. I must confess there were some very funny and cute examples that came out of it. Like Kookaburra Hunting Camp or Nuddy Swamps. But I digress, this part is no longer visible to the public anyways.
What this web application does?
It’s a very basic web app. Main idea is that it represents campgrounds so anyone can register as a user and add New Campgrounds as well as review and rate them. Only those who created a campground can edit of delete it, the same goes for reviews, only its author can delete it. It also includes a map (using Mapbox) both in the main Campgrounds page and individual pages. Photos can be uploaded and they are stored in Cloudinary.
I used many tools to get a finished product and I got stuck too many times. But as it is a Yelp Camp example, it has plenty information to go looking for. My version is far from perfect. I won’t go doing the whole set of steps there are just too many of them and Colt is way better at teaching them in his course. I highly recommend it for any beginner. He has a way of explaining things and it’s very easy to listen to him. I highly recommend getting the course if you want to become a Web Developer because it is a great starting point. In no way it’s final because just like Colt points out many times, talking about each part that he sometimes only touches lightly could be a separate course. But his course is a great place to get an overview and know which parts gets you most excited.
Front-End vs Back-End. Full-Stack?
I am still not sure about NodeJS. I know for one that watching tutorials about HTML, CSS, Bootstrap weren’t too exciting and I felt like I couldn’t’ understand half of it until I actually went out and did my own projects. That’s when the true powers of training and ability to find your own information and solve problems shows up. I believe that those are the best skills to have if you want to be a developer. If you have no patience for research or scrolling sometimes through pages and pages before you find something a little bit similar to what you wanted to do and then construct it into final result, if you don’t enjoy that, you will find yourself in trouble.
The same goes for the Back-End stuff. The more I think over it, go back and read deeper into the documentation, the more I find that I don’t know enough and yet I really want to know and to understand better. Because that is why I started this journey. I wanted to know what is there deep under the hood of things that we see daily now.
All I know is that I loved learning JavaScript from the start and I am excited for going deeper into it as my next step after finishing Colt’s course.
He won’t read this blog post but I thank him for those 63 hours we spent together and he didn’t even know it. I am being cheeky now but those who listened to his humour will get it.
I built Aussie Camps using amazing tools listed below:
Amazing tools and my childish explanations of why we used them:
NodeJS – runtime instalation to help run my application in the back end.
NPM – great library of packages.
MongoDB Atlas – to store web app.
Cloudinary – to store images that users upload on via the web application file input.
Mapbox – to show maps that return locations based on the information on the web app source.
Heroku – to deploy the app and be reachable online as well as editing the code locally and pushing changes back to Heroku.
NPM packages & Installations:
- node – build scalable network applications; event loop as a runtime construct. Enters the even loop after executing the input script and exits when there are no more callbacks to perform.
- nodemon – automatically restarted node when I was making changes and saving them.
- mongoDB – for local database.
- connect-mongo – well to connect mongo database.
- express – fast framework for node.
- mongoose – object modelling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.
- ejs-mate – helps use ejs and connect templates inside app.
- express-session – used for cookies, to not save session data in the cookie but rather in the server-side
- connect-flash – a specific place to determine the messages we are going to flash for users, like “Welcome” after they login or “You must login” when they are going to pages that are signed in users only.
- method-override – helps the client use PUT and DELETE over the usual POST and similar.
- passport – authentication middleware
- passport-local – authenticates users using username and password.
- joi – validation schema, helps require parts of forms based on preset requirements.
- multer – middleware for uploading files
- cloudinary – cloud service that helps with uploading images.
- multer-storage-cloudinary – multer support for uploading photos to cloudinary
- express-mongo-sanitize – to sanitise website from possible MongoDB injections of HTML code.
- sanitize-html – used it to secure website from HTML being added to inputs and other possible scenarios and prevent from hacking, breaking the website.
- helmet – helps secure Express app by setting various HTTP headers.
This is the list of packages used. I would definitely need to read through documentation to use them again. Some are easier for me than others. But I wanted this blog post to be as much as a brain dump of things I have learned as a reminder when I need to get back to this stuff.
Just a little reminder of how to push it to Heroku through terminal after making my changes:
git status
git add .
git commit -m “add start script”
git push heroku master
heroku restart
What’s next?
Next for me is slowly getting my head out there to see if anyone is looking for Junior Web Developers eager to absorb more and implement more and do sooo soo much more. All the while I am going to deepen my JavaScript knowledge because I loved coding with it and I feel there is just so much I don’t know yet and I want to know. I still haven’t decided on my next project but I should start looking for a framework soon too (probably React) and hopefully then I will decided if I am going to go with the usual Tasks App or being myself will think of something different and less attempted by others. You can check out my other projects on my Portfolio page.
Anyways. I hope you enjoyed this look through the tools and Yelp Camp review. Once again, I thank Colt for such an amazing opportunity to learn. I hope I will be a student you are proud off.
Now, check out my web app, which I left on Heroku domain on purpose. It’s a reminder how much I still need to learn. Go on and try creating a user and uploading campgrounds and reviews. Don’t need to use the real stuff (though be sure that if you use images, they are free to share), it’s suitable only for playing around as it is now and probably will stay there for a very short while.
Thank you for reading.