Hidden Gems: A Travel App

August 15th, 2023

ReactNode.jsExpress.jsPostgreSQLAmazon AWS

In the realm of travel and exploration, there's always something exciting about discovering hidden gems - those lesser-known, off-the-beaten-path destinations that offer unique experiences. This is the inspiration behind my latest project, Hidden Gems, a web application designed to spotlight interesting but less-explored destinations submitted by users across different cities.

Project Overview

Hidden Gems is more than just a travel app; it's a platform for community-driven discovery. The main goal of this project was to learn and implement AWS services like RDS, S3, and EC2 while building a complete application with React, Express, Node, and PostgreSQL.

Home pageExplore pageCard viewShare pageLogin pageUser page

Key Features

The application boasts a range of features, some already implemented and others on the roadmap:

  • View others' posts
  • Display recent and nearby posts
  • Search for posts by City
  • Upload posts
  • User profiles
  • Save and delete posts
  • User Authentication
  • Filter posts by Category

System Design

The architecture of Hidden Gems leverages several AWS services to ensure scalability and efficiency:

  • User entries are stored in an RDS PostgreSQL database, accessed via the Prisma ORM
  • Image files are stored in an S3 Bucket using the AWS SDK
  • Axios is used to interact with REST API endpoints for CRUD operations
  • Data is saved in local storage to minimize API calls
  • A custom synchronization algorithm updates local storage with the latest data

Here's a simple diagram illustrating how AWS resources are integrated into the project:

Hidden Gems AWS architecture

Optimizing for Performance and Cost

One of the key challenges in developing Hidden Gems was balancing performance with cost-effectiveness, particularly in terms of API calls to S3. To stay within the free tier limits, I implemented a local storage solution instead of session storage. This approach prevents unnecessary API calls with each new session.

However, to ensure users always have access to the latest data, I developed a synchronization function. This function updates the local storage with new posts uploaded by users, running every time the explore component mounts (thanks to the useEffect hook). It checks for new data created after the last update in local storage and appends only the new posts, significantly reducing the number of S3 API calls.

Conclusion

Hidden Gems represents not just a practical application of web development skills, but also a deep dive into cloud services and optimization techniques. As a work in progress, it continues to evolve, with new features being added and existing ones refined.

The project is live and can be explored at hidden-gems-sigma.vercel.app. Whether you're a fellow developer interested in the technical aspects or a traveler looking for your next adventure, Hidden Gems offers something unique. It's a testament to the power of community-driven content and the endless possibilities of modern web technologies.