WorldWise Project Documentation

Table of Contents

1. Introduction
2. Project Structure
3. Installation
4. Running the Project
5. Available Scripts
6. Configuration
7. Dependencies
8. Components
9. Contexts
10. Pages
11. Routing
12. Styling
13. API
14. License

Introduction

WorldWise is a React application built with Vite. It provides a minimal setup to get React working in Vite with HMR and some ESLint rules. The project includes various components, contexts, and pages to manage and display city and country information.

Project Structure

.env.local
.eslintrc.json
.gitignore
biome.json
data/
	cities.json
index.html
package.json
public/
README.md
src/
	App.jsx
	components/
		AppNav.jsx
		AppNav.module.css
		BackButton.jsx
		Button.jsx
		Button.module.css
		City.jsx
		City.module.css
		CityItem.jsx
		CityItem.module.css
		CityList.jsx
		CityList.module.css
		CityMap.jsx
		CityMap.module.css
		CountryItem.jsx
		CountryItem.module.css
		CountryList.jsx
		...
	contexts/
	hooks/
	index.css
	main.jsx
	pages/
vercel.json
vite.config.js

Installation

To install the project dependencies, run:

npm install

Running the Project

To start the development server, run:

npm run dev

Available Scripts

• dev: Starts the Vite development server.
• build: Builds the project for production.
• preview: Previews the production build.
• server: Starts a JSON server to serve the data/cities.json file.

Configuration

The project uses Vite for configuration. The Vite configuration file is located at vite.config.js.

Dependencies

Main Dependencies

• react: ^18.2.0
• react-dom: ^18.2.0
• react-router-dom: ^6.9.0
• json-server: ^0.17.3
• leaflet: ^1.9.3
• react-leaflet: ^4.2.1
• react-datepicker: ^4.11.0

Development Dependencies

• @vitejs/plugin-react: ^3.1.0
• eslint: ^8.36.0
• eslint-config-react-app: ^7.0.1
• vite: ^4.2.0
• vite-plugin-eslint: ^1.8.1
• @types/react: ^18.0.28
• @types/react-dom: ^18.0.11
• @babel/plugin-proposal-private-property-in-object: ^7.21.11
• @biomejs/biome: 1.9.2

Components

The components are located in the src/components directory. Some key components include:

• City
• CityList
• CountryList
• Form
• SpinnerFullPage

Contexts

The contexts are located in the src/contexts directory. Key contexts include:

• CitiesContext
• FakeAuthContext

Pages

The pages are located in the src/pages directory. Key pages include:

• Homepage
• Product
• Pricing
• Login
• AppLayout
• PageNotFound
• ProtectedRoute

Routing

The routing is managed using react-router-dom and is defined in the App component. Key routes include:

• /: Homepage
• /product: Product page
• /pricing: Pricing page
• /login: Login page
• /app: Protected route with nested routes for cities, countries, and forms.

Styling

The project uses CSS modules for styling. The styles are located alongside their respective components in the src/components directory.

API

The project uses a JSON server to serve city data from the data/cities.json file. To start the JSON server, run:

npm run server

License

This project is licensed under the MIT License.