Travel Destinations

🎯 My project for the ReactJS course at SoftUni (June 2022). This is a Web application where you can share the best travel destinations you have visited and to browse such destinations shared by other users. Each destination has title, description, image URL and geolocation. The project is deployed on Firebase.

🔗 Link to the project:

    Travel Destinations

▶️ Getting Started:

1. Clone the repo

   git clone https://github.com/mikegsCoder/Travel-Destinations.git

2. Open Visual Studio Code in the "client" folder and open the Terminal

   View -> Terminal

3. Install NPM packages

   npm install

4. Start the project (by default this project uses remote server deployed on Render)

   npm start

5. If you want to use the local server:

   1. Open constants.js (location: client/src/constants/)
   2. Comment the baseUrl constant, related to the remote server.
   2. Uncomment the baseUrl constant, related to the local server.

6. Go to the "server" folder

   cd server

7. Start the server

   node server.js

ℹ️ Application Functionality:

• Guest visitors can:
  • browse all destinations;
  • browse recent destinations;
  • browse destinations by category;
  • view destination details;
  • view comments for the destination;
  • view destination geolocation.
• Logged in users can:
  • browse his own destinations;
  • create new destinations;
  • edit his own destinations;
  • delete his own destinations;
  • like destination created by other users (only once per destination);
  • create comments for all destinations with no limit on created comments per destination;
  • edit his own comments;
  • delete his own comment;
  • view profile statistics by clicking on his email on the header section.
• Some more features:
  • implemented Error Boundary;
  • implemented Guarded route;
  • implemented private routes DestinationOwner and CommentOwner;
  • implemented Carousel with React Bootstrap;
  • implemented Geolocations with React Leaflet;
  • implemented data validation for Register, Create Destination, Edit Destination, Create Comment and Edit Comment forms;
  • implemented notification providers;
  • implemented comments list server side pagination;
  • implemented 404 (Not Found) component;
  • responsive design.

🧪 Test Accounts

    Email: peter@abv.bg
    Password: 123456

    Email: john@abv.bg
    Password: 123456

🛠️ Technologies and Tools used:

• ReactJS
• React Router v6
• React Bootstrap
• React Leaflet
• JavaScript
• HTML 5
• CSS
• Font Awesome

⚙️ Application Backend:

• SoftUni practice server
• Developed by Viktor Kostadinov
• Populated with data for Travel Destinations application and deployed on Render 👉 Admin Panel

🖼️ Screenshot - Home Page:

🖼️ Screenshot - Destination Carousel:

🖼️ Screenshot - Destination Details:

🖼️ Screenshot - Destination Geolocation:

🖼️ Screenshot - Register with Data Validation:

🖼️ Screenshot - Create Destination with Data Validation:

🖼️ Screenshot - Comments List Paginated:

🖼️ Screenshot - User Profile Statistics:

🖼️ Screenshot - 404 (Not Found):

✌️ Leave a feedback

Give a ⭐ if you like this app. Thank you ❤️!

📖 License:

This project is licensed under the MIT License.