Where Do I Go - Full Stack MERN App

About

🌎✈️ An adventurous hub featuring an extensive collection of destinations and places, created by our community from around the world, that can be liked, commented and rated by users

⚒️ Each user can create/edit/delete destinations and places, upload pictures and select suitable descriptions and details for their entries

• Users can create/edit/delete destinations and places, upload/delete pictures and provide a detailed information
• Each destination can contain many place, showcasing various attractions and landmarks
• Each destination represents a real city within a specific country
• Destination can be added in favorites (liked) by many users

🖼️ Responsive Gallery

• Keyboard navigation
• The gallery also features automatic scrolling while navigating through images
• The images in the gallery are responsive and hosted on Cloudinary, ensuring optimal performance
• For smaller screens, the images are processed to a lower resolution, ensuring a smooth and seamless user experience on various devices.

💬 Leave comments and rate places

📸 Furthermore, users can upload a personal photo or avatar to represent themselves

🏖️ Personal Dashboard

• Upload/Change/Crop personal avatar/photo
• User activities: comments, favorites, creations
• Places rating chart data
• Create destinations - select a country and city, add a description and additional details, upload photos, pick categories
• Creator Destinations: allows the user to navigate trough their destinations - edit or delete them.
• Favorite destinations list
• Settings

🤖 Option for the creator to generate AI-driven comments and rating for each place based on its name and location

🔎 Guests can check out all the cool spots that users create by navigating to the 'Discover' page and search for specific destinations

👾 Client Data Caching which makes the user experience even better

👮🏻 Content Regulation by Moderators

• Moderators are responsible for ensuring a safe and respectful environment for all users

Main Technologies:

FrontEnd

• React
• React Query (Caching)
• Vitest + JEST, MSW
• chartJS, Yup, Swiper, Tiptap

BackEnd

• Express, MongoDB, Mongoose
• Cloudinary (Cloud based image management service)
• JSON Web Token, bcrypt, Express Rate Limit, Dom Purify, JSdom
• Yup, Validator, Multer

AI Integration

• OpenAI

Project Screenshots & Implementation (May take a few seconds to load the GIFS)

Home page implementation

• Home
• CitiesSlider
• useScrollTop

Home page - Desktop	Home page - Mobile

---

Destination details implementation

• DestinationDetails
• ImagesGridWrapper
• Gallery
• PlacesSlider
• useScrollTop

Destination Details - Desktop	Destination Details - Mobile

---

Place details implementation

• PlaceDetails
• ImagesGridWrapper
• Gallery

Place Details - Desktop	Place Details - Mobile

---

Discover implementation

• Discover
• DestinationGrid
• SearchBar
• CategoriesNav
• ReactQuery Paginated Data Fetching

Discover - Desktop	Discover - Mobile

---

Dashboard implementation

• Dashboard
  • CreateDestination
  • Favorites
  • Dashboard Main
  • OwnerDestinations
  • UserSettings

Dashboard - Desktop	Dashboard - Mobile

---

Create Destination implementation

• CreateDestination
  • ImageUploader
  • ImageThumbsnailsPreview
  • createFormData
  • handleImageFiles
  • validateData

Create Destination Desktop	Create Destination Mobile

---

Create Place implementation

• AddPlace
  • ImageUploader
  • ImageThumbsnailsPreview

Add Place Desktop	Add Place Mobile

---

Edit Destination & Place implementation

• EditDestination

• EditPlace

• ImagesManager

• FormFieldEditor

• TipTap

Edit Destination & Place- Desktop	Edit Destination & Place - Mobile

---

Change Avatar implementation

• UserAvatar
• FileInput
• ImageCrop
• handleImage

Change Avatar Desktop	Change Avatar - Mobile

---

Navbar & Navbar Dropdown implementation

• Navbar
• useWindowSize
• Dropdown
  • useCloseDropdown

Navbar Dropdown Desktop	Navbar Dropdown Mobile

---

Gallery implementation

• Gallery
  • MainImage
  • SecondaryImages
    • applyCloudinaryTransformation
  • Arrows
  • Gallery Context
  • useKeyboardNavigation
  • useGalleryAutomaticScroll
  • useWindowSize
  • DarkOverlay

Gallery Desktop	Gallery Mobile

---

Register implementation

• Register
• userRegisterValidationSchema
• extractServerErrorMessage

Register Desktop	Register Mobile

---

Login implementation

• Login
• userLoginValidationSchema
• extractServerErrorMessage

Login Desktop	Login Mobile

---

Errors

• ErrorFallbackComponent
  • NotFound
  • ServerDown
  • SomethingBroke
  • Forbidden

Not Found Desktop	Not Found Mobile

Server Down Desktop	Server Down Mobile

Something Broke Desktop	Something Broke Mobile

Access Denied Desktop	Access Denied Mobile