Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmed-yasser-66/world-wise
A react app that helps you record your destinations and collect memories ✈
https://github.com/ahmed-yasser-66/world-wise
context-api json-server leaflet-map react-router reactjs
Last synced: 16 days ago
JSON representation
A react app that helps you record your destinations and collect memories ✈
- Host: GitHub
- URL: https://github.com/ahmed-yasser-66/world-wise
- Owner: Ahmed-yasser-66
- Created: 2024-12-31T18:02:37.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-31T18:12:23.000Z (about 1 month ago)
- Last Synced: 2024-12-31T19:19:18.044Z (about 1 month ago)
- Topics: context-api, json-server, leaflet-map, react-router, reactjs
- Language: JavaScript
- Homepage:
- Size: 864 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌍 World-Wise
World-Wise is a React application that allows you to record your travel destinations and collect memories. With an interactive map interface, you can select places you've traveled to, add notes, and save them for future reference.
## ✨ Features
- 🗺️ **Interactive Map**: Utilize the Leaflet map to select and mark your travel destinations.
- 📝 **Add Notes**: Attach personal notes to each location to remember your experiences.
- 🔐 **Fake Authentication**: Experience a simulated authentication flow with a fake auth context.
- 🌐 **Routing**: Navigate seamlessly through different pages using React Router.
- 📡 **Data Management**: Simulate data interactions with JSON Server and manage state using Context API.
## 🛠️ Technologies Used
- ⚛️ **React**: JavaScript library for building user interfaces.
- 🗺️ **Leaflet**: Open-source JavaScript library for interactive maps.
- 🌐 **React Router**: Declarative routing for React applications.
- 📄 **JSON Server**: Full fake REST API for simulating backend interactions.
- 🔧 **Context API**: For managing global state in React.
- 🔐 **Fake Auth Context**: Simulated authentication context for demonstration purposes.
- 🎨 **CSS**: Styling the application.
## 🚀 Getting Started
Follow these steps to set up the project locally:
### Prerequisites
Ensure you have the following installed:
- 🖥️ **Node.js**: [Download and install Node.js](https://nodejs.org/)
- 📦 **npm**: Comes with Node.js, but ensure it's up to date.
### Installation
1.**Clone the repository**:
```bash
git clone https://github.com/Ahmed-yasser-66/World-Wise.git
cd World-Wise
```
2 .**Install dependencies**:
```bash
npm install
```
3. **Set up JSON Server**:
Install JSON Server globally if you haven't already:
```bash
npm install -g json-server
```
4.**Start the JSON Server**:
```bash
json-server --watch data/db.json --port 8000
```
5.**Start the React application**:
```bash
npm run dev
```