TravEM

Made for bloggers. Used by travelers.🌍

Travel blog with custom content management system (CMS). 🚀 React + Express

Try it out (LIVE): https://putujemstravem.com/

TravEM documentation - table of contents

How it started?
PM and UI design
Project description and features
Technologies
Architecture
TravEM UI

How it started?

The project was 100% custom built for our clients - travel bloggers from Croatian YouTube channel Putujem s TravEM.

Matija from "Putujem s TravEM" reached to us and descripted his wishes - he and Ema wanted to write a blog for a long time, but did not want to use WordPress - they wanted to have the best travel blogging webpage in Croatia, but also in Southeastern Europe.

That's where we jumped in. After initial meetings we were thrilled about new project, brainstormed ideas, made a market research to discover what's missing in SE European travel blogging market and looked at their ideas from different perspectives. With our technical knowledge, we knew we had a good idea in our minds, but the next step was to convince Matija and Ema by using a prototype of the project, in other words with fantastic UI design of their future web blog.

PM and UI design

Ema and Matija had loads of things that they wanted to have on their blog, with a top priority being a map showcasing their travel destinations right on the homepage. Besides that, they needed custom CMS to add, update and delete articles, countries and places they visited, along with all other data, for example featured articles on homepage etc.

The UI design by itself took some time, with regular meetings every week or two. We discussed about recent design changes, added features and listened to their feedback - what the did or did not like, what they wanted to add or remove from some of the pages. Among the various discussion topics, there was a focus on pricing and providing a transparent financial estimate to ensure there were no surprises along the way. Once Ema and Matija were completely satisfied with the design, development could begin.

The following image shows Fosleen's Figma for this project. More detailed images can be found at the bottom of this Readme file.

Project description and features

The project has 2 views - user and admin.

On the user view there is a homepage with hero section, destination menu, top 3 featured posts, banner with textual data and 3 more posts, map with colored visited countries and featured places (that lead to country/place page on click), featured places above map, blog stats and other featured articles. The navbar has 3 menus (destination, tips and tricks and plane tickets) and searchbar (search articles by title) and social media links. The similar thing is in the footer of the page, alongside with option to subscribe to mailing list to get information about new articles first.

There also exist country page with most important information about selected country, vlog links, articles about and places that our clients visited in that country. At the bottom is the option to see visa info about that country for citizens of Croatia, Serbia, Bosnia and Herzegovina, Slovenia and Montenegro. Place page shows all articles and vlogs (videos) that are describing the selected place. There are also other types of articles - plane tickets and tips and tricks where TravEM shares their tricks to have better and easier travel experience.

On the admin view, logged users can add new articles, edit and delete them. Every article can be connected to type of article (destination article, plane ticket article or tips and tricks article) and connected to country and/or place. User can see list of articles, countries and places in a table and search them by name. Some articles can be set as main country articles (to show on top of the country page) or set as featured at the homepage. Places can also be featured (to show above map on homepage). Other blog content (stats, hero and footer images, visa info etc.) can also be changed using admin dashboard. Every form has corresponding validation and error showing.

Web blog is securely hosted and accessible to all users, employing top-tier security measures.

Technologies

Frontend 🎭

React - A JavaScript library for building user interfaces
react-loader-spinner - A lightweight spinner component for React applications
react-toastify - A React notification library providing customizable toast messages
sweetalert2 - A customizable and responsive modal library for React applications
yup - A schema validation library for JavaScript objects
emailjs - A library for sending emails in JavaScript applications
react-table - Fast and extendable data tables
formik - Form library for managing form state
mapbox-gl - Interactive maps library.
primereact - UI component library for React applications.

Backend 🕸️

NodeJS - A server-side JavaScript runtime.
Express - A minimal and flexible Node.js web application framework.
sequelize - ORM for Node.js
bcrypt - A library for hashing passwords securely
body-parser - Middleware for parsing request bodies
helmet - Middleware for securing Express apps with various HTTP headers
jsonwebtoken - Library for generating and verifying JSON Web Tokens (JWT)
morgan - HTTP request logger middleware for Node.js
nodemon - Utility for automatically restarting the server during development
passport - Authentication middleware for Node.js
swagger-jsdoc - Library for generating Swagger documentation from JSDoc comments
swagger-ui-express - Middleware for serving Swagger UI in Express apps

Documentation 📄

Swagger - RestAPI endpoint documentation
Jira - Project management tool for issue tracking, task management, and agile project management
Postman - Platform for API development - design, test, and document APIs quickly

DevOps (and database) 🔨

For database, we are using MySQL database. For database manipulation, we use Sequelize ORM to write more complex queries easier.

As of devops, deployment script is written for PHP- it is used for webhook on Github. What it does? It pulls the changes from Github automatically on push and restarts the server so we don't have to do it manually. Backend is hosted on Ubuntu server.