Welcome to Travel-Designer, a small project aimed at sharing travel stories and ideas with everyone. This application is designed to be convenient, easy to use, and doesn't require page refreshes!
This project was developed as part of the End-of-Bootcamp project with Axsos Academy. I had the pleasure of partnering with these talented developers:
Feel free to explore our code repository and contribute to make Travel-Designer even better!
To set up and run this project, please follow the steps below:
-
Clone the repository:
git clone <repository-url>
-
Change into the project directory:
cd <repository-directory>
-
Navigate to the server directory:
cd server -
Install the server dependencies:
npm install
-
Go back to the main project directory:
cd .. -
Navigate to the client directory:
cd client -
Install the client dependencies:
npm install
-
Start the client development server:
npm run dev
-
In a separate terminal, go back to the server directory:
cd ../server -
Start the server using nodemon:
nodemon server.js
The website will now be accessible at localhost:5137 and the server will be running on localhost:8000. You are all set to use the application!
Our project is all about bringing travel enthusiasts closer. With our Travel Buddy & Design App, you can find like-minded travelers, create personalized itineraries, and share unforgettable experiences. Discover travel companions based on shared interests and desired destinations. Post trip updates, exchange travel stories, and seek advice from a vibrant community. Design your dream itinerary and receive valuable feedback. Seamlessly coordinate trips and communicate with fellow travelers through our integrated messaging system. Get inspired, forge new connections, and embark on exciting adventures. Join us on this journey of exploration and friendship, one travel buddy at a time. Feel free to contribute and make our Travel Buddy & Design App even more amazing! Let's make travel unforgettable!
-
Front End:
- Vite: Vite makes the life of developers easier. We used Vite-React-SWC to speed up our development server and bundle our website easily for the web.
- React: React (SWP) is a JavaScript-based library that uses virtual DOM to manipulate data across all pages.
- react-router-dom: for front-end routing.
- Tailwind: for styling our components and making responsive pages.
- Material UI: We used it to create ready-to-use React components.
- GitHub REST API: to show general information about our team.
-
Back End:
- Node.js and Express: Fast, unopinionated, minimalist web framework for Node.js.
- TripAdvisor API: to show general nearest information about the person's location by search.
- Postman: for testing our REST API endpoints.
- Node-Fetch: A lightweight module that brings the Fetch API to Node.js.
- Mongoose: elegant MongoDB object modeling for Node.js.
-
Database:
- MongoDB.
So, let's talk about the functionality by telling the user story:
Once the user visits the webpage, they are met with a search bar. The webpage will ask them to accept location access. Then, based on the coordinates, the 10 places near that coordinate will appear on the search page.
If the user wants to search for a place of their choice, the data gets sorted to include both the new places and the old nearby places.
If they want to search a place, Let's say Nablus:
Then If you navigate to the Sign in or sign up pages this is the scenario :
You will be met with this page, where all validations are required! ,Next Let's sign up
- How the sign up proccess would look like , Clean Regestration :
- But what if my Passwords don't match?
Upon Successful Regestry , we navigate to the Sign in page
Upon sucseefull sign in you will be met with this dashboard
- You Can Like Peoples comments
- you can Post posts
- you can delete your posts or your comments, you can edit your post as well.
- when you click on a post, you will see the post details and people who commented on it and you can comment yourself!
This is where you will see your posts, information , and posts you have collaborated on (github wanna be) Please don't sue , we are open for work , you will edit your posts, and delete them if you want.
Becasue we can
Working on this project has been an incredible experience for our team. We thoroughly enjoyed collaborating and leveraging our individual strengths to ensure the success of the project. Throughout the development process, we showcased effective time management and communication skills, allowing us to work efficiently and harmoniously.
One of the remarkable aspects of our team was the diverse problem-solving approaches each member brought to the table. This diversity not only enriched our project but also fostered a respectful and collaborative environment where everyone's ideas were valued.
Although our project is already functional and delivers on its core objectives, we believe it has even more potential for growth. There are additional features and functionalities that we would like to implement in the future, enhancing the project's overall value and user experience. We plan to revisit the codebase, optimize it further, and continue adding new features to make it even more impressive.
Your feedback and criticism are essential to us, as they help us improve and refine our project. If you decide to use our code or have any suggestions, please don't hesitate to reach out to us. We would greatly appreciate it if you could show your support by giving us a star on the repository.
Finally, we learned a lot during this project in a limited period of time. We were all eager to learn and help each other, which made the experience even more enjoyable.
Thank you for taking the time to read about our project!
- Creators of Travel-Designer
-
Youtube 'http' issue : Link
-
Maybe Don't use React Render because it's only for videos? : Link
-
Time Zone by area: Link
-
Expires : Link
- The Sign Up and Sign In Form Link
- Simple Toast : Link
- Nav Bar : Link
- React Modal : Link
- Steps : Link
- posts : Link
- adding collaborators : Link
- comment form : Link
- Loading : Link
- Edit Button : Link
- Comment Form : Link
-
Vite + why Vite : Link
-
Fetch Api MDN : Link
-
active style Link : Link
-
resize for ract -did not find anything else , can be done in CSS media queries- : Link
-
jwt header :Link
-
click outside an element : Link
- [] Remove any unused code.
- [] Add Hooks instead of repeated code
