TravelWorld

KO | EN

gitlite — search

#hacktoberfest #python #typescript #javascript #angular #java #react #flutter #machine-learning #deep-learning #discord-bot #ui

★ 64 Open GitHub ↗

TravelWorld - A Fullstack Tours & Travels Web App

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TravelWorld 🌍

A Fullstack Tours & Travels Web App Using MERN Stack 💫

## Backend Repository

- [TravelWorld Backend Repository](https://github.com/shuence/Bakend-for-TravelWorld)

## Resources

- [React Docs](https://beta.reactjs.org/)
- [BootStrap](https://getbootstrap.com/docs/)
- [ReactStrap](https://github.com/reactstrap/reactstrap)
- [Stackoverflow](https://stackoverflow.com/)

## Authors

- [@Shuence](https://www.github.com/shuence) 💫

## Badges

[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)

## Live Preview

[TravelWorld 🌍](https://travelworldtours.netlify.app/)

![image](https://github.com/shuence/FitClub/assets/65482186/4c863ee9-2e02-4e98-95c0-e122cf91320e)

<https://github.com/shuence/Travel-World/assets/65482186/69a5ebf9-85d7-4f65-a8a2-066dceebbc24>

## Setup

To Setup this project run

```bash
git clone <https://github.com/shuence/Travel-World>
cd Travel-World
yarn
yarn serve
```

## Environment Variables

`REACT_APP_BASE_URL`= <http://localhost:4000/api/v1>

## Features

- **Tours Listing:** Display a list of available tours for users to explore.
- **Featured Tours:** Highlight and showcase special or popular tours on the homepage.
- **Tour Details:** Provide comprehensive information about each tour, including description, itinerary, price, and more.
- **Gallery:** Showcase high-quality images and videos of destinations and tour experiences.
- **User Authentication:** Allow users to create accounts and log in to access personalized features.
- **Booking System:** Enable users to book tours online with a secure and easy-to-use booking system.
- **Search Tours:** Implement a search functionality to help users find specific tours based on their preferences.
- **Reviews and Ratings:** Allow users to leave reviews and ratings for tours they have experienced.
- **Responsive Design:** Ensure the website is optimized for various devices, including desktops, tablets, and smartphones.
- **Newsletter Signup:** Allow users to subscribe to a newsletter to receive updates and promotions.
- **User Reviews and Testimonials:** Showcase positive reviews and testimonials from previous customers to build trust.
- **Contact Form:** Provide a contact form for users to get in touch with inquiries or feedback.
- **Blogs:** Added Blogs feature to provide more information to customers.
- **Alerts:** Appropriate alerts of errors and success for better user experience.
- **FAQ's:** Include a frequently asked questions (FAQ) section to address common queries from users.
- **Analytics** Integrated Google Analytics for analytics.

## What I learned

While building this project, I embarked on my first full-stack journey, transitioning from frontend development to working with the backend. The journey was both exciting and challenging, and I learned a lot along the way:

1. **Frontend Gracefulness:** As I crafted the frontend, I encountered various errors, but I embraced each challenge as an opportunity to learn. With useState and other hooks, along with Bootstrap for styling, I built an intuitive and responsive user interface.

2. **Backend Confidence:** Setting up the Express and MongoDB server initially seemed daunting, but I persisted. Working on controllers for API calls and defining routes took time, but I gained confidence as I overcame each obstacle.

3. **Expanded Toolkit:** Throughout the project, I explored additional React concepts like useEffect, useContext, and React Router DOM for seamless navigation between components and managing state effectively.

4. **Deployment Know-How:** Deploying the backend server was a crucial step in making the application accessible online. I learned to configure the production environment, manage dependencies, and ensure security with HTTPS and authentication.

5. **Continuous Improvement:** I adopted a proactive approach to monitoring and logging server performance, identifying potential issues early on and implementing CI/CD pipelines for smooth and automated deployments.

6. **The Joy of Problem-Solving:** Despite encountering obstacles, I discovered the joy of problem-solving and the satisfaction that comes with finding solutions to complex challenges.

7. **Version Control and Rollbacks:** I grasped the importance of version control not only for the codebase but also for server configurations, facilitating easy rollbacks if needed.

Overall, this project marked a significant milestone in my journey as a full-stack developer. Combining frontend and backend expertise, I can now confidently bring complete web applications to life and tackle new challenges with enthusiasm.

## Tech Stack

**Client:** React, Bootstrap, Reactstrap, Remix Icons

**Server:** Node.js, Express

**Database:** MongoDB

## Roadmap

- Implement additional login options, such as Google signup.
- Explore and integrate popular payment gateways for secure online transactions.
- Enhance the app with modern features like real-time chat support and personalized recommendations.
- Introduce advanced search filters for customized tour searches.
- Integrate geolocation services for location-based tour suggestions.
- Implement a user dashboard for managing and tracking bookings.

# Hi, I'm Shuence! 👋

## 🚀 About Me

I'm Shubham Pitekar, a passionate full-stack developer with expertise in ReactJS,NextJS, NodeJs,ExpressJS and MongoDb. I love turning ideas into reality on the web. I thrive on challenges and continuously seek opportunities to push my boundaries. Let's create impactful projects together!

## 🛠 Skills

JavaScript, HTML, CSS, React, Bootstrap, Node.js, Express, MongoDB.

## Happy coding 💯

Made with love from [Shuence](https://shuence.netlify.app) ❤️

TravelWorld

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README