Team GemStackers
presentHidden Gems

Hidden Gems Demo Video

Hidden Gems Demo Video

Discover Hidden Places, Share Hidden Stories!

This is an app where people can find nice places to go to that many people probably wouldn’t know about. People can post, share and make recommendations about different places e.g. restaurants, activities, nature or events. Good for people who are traveling, or recently moved. Good for locals looking for new experiences/things to do where they live. Full stack web app using a Next.js frontend and a Node.js backend. Visual map which allows user to view all events and places (Gems) around Greater Manchester. Can also activate your location to view Gems near you. List of all Hidden Gems to browse through, with details about the event or place such as creater, date of event (where applicable), and vote and comment counts Technologies: Next.js, Node.js, PostgreSQL, express.js, node-postgres, pg-format, jest, supertest, dotenv, Firebase, Tailwind CSS, Leaflet, next-navigation, Headlessui, react-hook-forms, yup.

The Team

  • Team member imagePreview: Team member image

    Olamide Olawuyi

  • Team member imagePreview: Team member image

    Iryna Bondarenko

  • Team member imagePreview: Team member image

    Flynn lomas

  • Team member imagePreview: Team member image

    Nicola Jones

  • Team member imagePreview: Team member image

    Emily Spiers

  • Team member imagePreview: Team member image

    Hassan Chudary

Technologies

Frontend: Next.js, Axios, Firebase, React Leaflet, Tailwind CSS, Yup Validation Library, Versel, Backend: Express.js PostgreSQL, Jest, SupabasePreview: Frontend: Next.js, Axios, Firebase, React Leaflet, Tailwind CSS, Yup Validation Library, Versel, Backend: Express.js PostgreSQL, Jest, Supabase

We used: Frontend: Next.js, Axios, Firebase, React Leaflet, GeoCode.maps.co API, Tailwind CSS, HeadlessUI and MUI FontAwesome, React Hook Form Library, Yup Validation Library, Versel, Backend: Express.js, PostgreSQL, Jest, SuperTest and Husky, Supabase, Render

Next.js File-Based Routing: efficient routing system using the file structure
Dynamic Page Layouts: pages and layouts built with React components
API Integration with Express Backend: all data (users, gems, comments) are fetched from the backend using Axios
Map Coordination: GeoCode.maps.co API converted coordinates to addresses and vice-versa
Interactive Map: React Leaflet allows Gem locations to be displayed visually on the map
Firebase Data Storing and Image Uploading: Firebase allows users to upload and store images, as well as access to select stored files in the database e.g. user avatars during signup
Tailwind CSS: for styling components

Challenges Faced

Working with new technologies, working in a group of 6 people and gitHub merge conflicts.