Skip to content
Xenia Kadar
← Back to the archive

ArchiveFull-stack blogging platform

TripTrek

A full-stack travel blog where people share trips by topic (from beach escapes to city walks) with colour-coded categories, comments, drafts, and light and dark modes.

React · Tailwind CSS · Node.js · Express · MongoDB · JWT · Passport.js · Jest

Type
Full-stack blogging platform
Build
Personal project
Repos
Frontend + API
Demo
Archived

Overview

TripTrek is a full-stack blogging platform for sharing travel experiences. Posts are organised into colour-coded topics, so readers can browse by the kind of trip (beach, city, and beyond), then open any post to read it and join the conversation in the comments.

The TripTrek homepage, where readers browse recent posts by colour-coded travel topic.
The homepage, browsing posts by colour-coded topic.

What I built

The project spans two repositories that work as one product: a React frontend and a Node.js and Express API, talking to each other over a REST interface. The frontend owns the interface, routing, and state; the API owns authentication, validation, and data, persisting everything to MongoDB through Mongoose.

Key features

  • Account creation with validation for username availability, email format, and password strength
  • Create, edit, and delete blog posts
  • Colour-coded topics and topic-based browsing
  • Comments on individual posts
  • User profiles listing authored posts and saved drafts
  • Draft saving
  • Light and dark modes
  • Mobile-first responsive layout
The TripTrek interface in dark mode, with the colour-coded topics adapted for a dark background.
The same interface with the light/dark toggle switched.
TripTrek on a narrow mobile screen, with the layout stacked into a single column.
Mobile-first layouts stack cleanly on small screens.

Technical approach

  • A React client calling the Express REST API, with client–server data flow handled explicitly
  • Authentication built on JWT, Passport (local strategy), and bcrypt password hashing
  • MongoDB data modelled with Mongoose across a models / controllers / routes structure
  • Shared UI state managed with React's Context API
  • Responsive interface in Tailwind CSS with a light/dark theme toggle
  • API hardening with Helmet, compression, and rate limiting, plus input validation and error handling
  • Automated tests in Jest using mocked functions and simulated user events

What I learned

This is the project where full-stack development clicked into place, connecting a React frontend to an Express backend and moving data cleanly between the two.

  • Integrating a React frontend with an Express API
  • Designing REST endpoints and managing client–server communication
  • Modelling and managing data in MongoDB
  • Structuring components and sharing state with the Context API
  • Building responsive layouts with Tailwind CSS
  • Writing tests with Jest
  • Implementing authentication and hardening an API