WorldWise is a React-based Single Page Application designed to help users track their travel history. With CSS modules for styling and React Router for routing, this app provides a seamless and intuitive experience for managing your visited cities and countries.
-
Dummy Authentication:
- Log in to access your travel history.
-
Interactive World Map:
- Display a world map upon logging in.
-
City/Country Tracking:
- Add cities to your list by clicking on the map.
- Automatically fetches the city name and allows users to add travel date and notes.
-
Sidebar List:
- View the list of cities and countries visited in the sidebar.
-
Marker on Map:
- Added cities are marked on the map for easy visualization.
-
City Details:
- Click on a city to view details, including name, travel date, notes, and a link to Wikipedia.
-
Remove Cities:
- Easily remove cities from the list with a click on the X icon.
-
Use Your Position:
- Utilize the "Use Your Position" button to center the map on your approximate location.
- React.js: Building the interactive and dynamic user interface.
- CSS Modules: Styling components for a clean and modular design.
- React Router: Handling navigation within the single-page application.
- Clone the repository:
git clone [repository URL]
- Navigate to the project directory:
cd worldwise
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Run the server:
npm run server
Now, you can access your WorldWise Travel History Tracker by following these steps. Explore the app, track your travel history, and enjoy the seamless experience it provides!
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Make your changes and commit them:
git commit -m 'Add feature'
- Push to the branch:
git push origin feature-name
- Create a pull request.