Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahmoud-alaa1/world-wise
React application that allows users to track their travel experiences
https://github.com/mahmoud-alaa1/world-wise
context-api css-modules custom-hooks react react-router-v6
Last synced: 12 days ago
JSON representation
React application that allows users to track their travel experiences
- Host: GitHub
- URL: https://github.com/mahmoud-alaa1/world-wise
- Owner: mahmoud-alaa1
- Created: 2024-09-04T18:10:50.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-09-18T03:10:30.000Z (about 2 months ago)
- Last Synced: 2024-10-17T00:47:43.848Z (27 days ago)
- Topics: context-api, css-modules, custom-hooks, react, react-router-v6
- Language: JavaScript
- Homepage: https://world-wise1.vercel.app/
- Size: 1.82 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌍 WorldWise
WorldWise is a travel application that allows users to track their travel experiences across cities and countries. It helps you visualize where you've been and keeps a log of your adventures.
## ✨ Features
- Interactive Map: Explore cities you've visited and track your journeys.
- User Authentication: Secure login to protect your travel history.
- Protected Routes: Access the app's dashboard only after logging in.
- City & Country Listings: Detailed city and country lists to record your travels.
## 🖥️ Demo
You can check **live website** [World Wise](https://world-wise1.vercel.app/).
## 🚀 Technologies Used
- React: Front-end `library`
- React Router DOM: For routing between pages
- Context API: For managing city and authentication state
- Custom Hooks: Implemented hooks to handle data fetching, geolocation, and URL position tracking.
- CSS Modules: For component-scoped styling
- Vercel: For deployment
## 🔐 Authentication
This project uses a fake authentication context for managing user login. To access the main application, login with the following default credentials:
- Email: [email protected]
- Password: qwerty
## 📦 Installation
1. Clone the repository:
```
git clone https://github.com/your-username/worldwise.git
```
2. Navigate into the project directory:
```
cd worldwise
```
3. Install dependencies:
```
npm install
```
## 🔄 Usage
1. Run the application locally:
```
npm run dev
```
2. Run fake database
```
npm run server
```
3. Open [http://localhost:5173/](http://localhost:5173/) to view it in the browser.
## 📖 How It Works
- Homepage: Provides a welcoming interface with a call to action to start tracking your travels.
- Login: Users can log in securely to access the app.
- Protected Routes: Only authenticated users can access features like adding or viewing cities and countries.
- App Layout: Displays the interactive map and user information.
- City & Country Management: Use the CityList and CountryList components to manage your travel data.
## 📂 Project Structure
## 🤝 Contributing
Feel free to contribute to this project by creating issues, submitting pull requests or emiling me [Mahmoud Alaa](mailto:[email protected]?subject=[GitHub]%20World%20Wise).