Project 2: Travelgram

Launch project on Heroku

Overview

Travelgram is a travel-focused social web application that uses MongoDB, Express and Node.js to store user data and posts to the network. It utilises user authentication to register and login users to allow them to create and edit their own profiles, create new posts, and comment on posts.

Travelgram is my second project from General Assembly's Web Development Immersive course. It was an individual project build over one week, and was the first multi-page web application I had built. I really enjoyed working on this project as it was great to produce a web app that felt like a real world application of my skills.

Brief

To create a instagram clone that meets the following technical requirements:

• Have at least 2 models – one representing a user and one that represents the main resource of your app.
• Include relationships - embedded or referenced.
• Have complete RESTful routes for at least one of your resources with all CRUD actions.
• Be deployed online and accessible to the public.
• Have semantically clean HTML
• The app should include authentication - with encrypted passwords & an authorisation flow.
• The app should be styled with Bulma.

Technologies Used

• EJS
• CSS3
• Bulma CSS Framework
• JavaScript(ES6)
• Git
• GitHub
• Heroku
• MongoDB
• Express
• Node.js

API Used

• Google Maps JS

Approach Taken

I began planning my project by considering the general user interaction on the site, routes that would be required to implement the project, and models (fields, data types, and models needed).

Once I had this planned out progress building the app was swift.

Wireframes

Wire frames were provided to us as part of the brief of the project. These wireframes were meant to be used as a guideline and could be modified as we added features beyond the scope of the initial brief. The wireframes can be found here.

Functionality

Screenshots

Home

Register

Login

Explore

New Post (Demonstrating Google Maps Autofill)

View Post

View Profile

Edit Profile When you view your own profile page a button to edit your profile is visible. When clicked it takes the user to an edit form

Bugs

Wins and Blockers

Future Content and Features

There are a number of features I would add if I were to revisit this project or had more time:

• Implement likes on posts
• Hosting images using an API rather than relying on users entering url strings.
• Following users
• Better backend authentication
• Password encryption
• Admin account privileges