WorldWise is a Single Page Application (SPA) that allows users to register and track all the cities they have traveled to. The app automatically associates each city with its corresponding country. Users can navigate between pages, search for cities on a map to add them to their list, delete cities, or find their current location using the browser's GeoLocation feature. Note: Pricing and Product pages are just added to demonstrate the SPA and navigation flow. They will be changed to Travel Tips and Memories pages in the future.
- User Registration: Register an account to keep track of your traveled cities. Note: The login page is purely for simulation purposes; there is no real authentication implemented.
- Interactive Map: Add cities to your list by finding them on an interactive map.
- GeoLocation: Easily add your current location (city) to your list after providing permission.
- Manage Cities: Add, delete, or update your list of visited cities.
- SPA Navigation: Fast, seamless navigation between pages with React Router.
- Automatic Country Assignment: Cities are automatically linked with the appropriate country.
- Frontend: React
- Build Tool: Vite
- Styling: CSS Modules
- Routing: React Router
- Linting: ESLint (custom configuration)
- Map Integration: Leaflet Library
- Date: npm datepicker
To run this project locally, follow these steps:
git clone https://github.com/atenajoon/worldwise.git cd worldwise
Before running the project, ensure that you have Node.js installed. Then, install the project dependencies:
npm install
Vite makes it easy to start the app with a fast dev server. Run the following command: Terminal 1:
npm run dev
Terminal 2:
npm run server
To build the project for production, use the build command:
npm run build
After building, you can preview the production version locally by running:
npm run preview
- After installation and starting your servers, open your browser and navigate to the local development URL generated by your terminal. In most cases, it will be something like: http://localhost:5173/.
- Login with the following credentials to start adding cities. email: [email protected] password: testpass Note: The login page is only a simulation with no real authentication.
- Use the map to search for and select cities, which will automatically be linked to their countries.
- Use the "Current Location" feature to add your present city to your list.
This project is licensed under the MIT License.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh