https://github.com/navin772/globetrotter
Guess the famous destinations across the globe 🌎!
https://github.com/navin772/globetrotter
api js mongodb python selenium vercel
Last synced: 2 months ago
JSON representation
Guess the famous destinations across the globe 🌎!
- Host: GitHub
- URL: https://github.com/navin772/globetrotter
- Owner: navin772
- Created: 2025-03-01T16:00:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-18T11:36:28.000Z (over 1 year ago)
- Last Synced: 2025-12-27T22:44:16.079Z (6 months ago)
- Topics: api, js, mongodb, python, selenium, vercel
- Language: JavaScript
- Homepage: https://globetrotterfrontend.vercel.app/
- Size: 294 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Globetrotter
Globetrotter is a full-stack web application where users get cryptic clues about famous places and must guess which destination it refers to. Once they guess, they'll unlock fun facts, trivia, and surprises about the destination!
## Project Structure
The project is divided into two main parts:
- **Backend**: Python FastAPI application with MongoDB Atlas database
- **Frontend**: React.js application with styled-components
- **Tests**: E2E tests written with Selenium WebDriver
## Features
- 🌍 Random destination questions with cryptic clues
- 🎮 Multiple-choice answers with immediate feedback
- 🎉 Animations for correct/incorrect answers
- 📊 Score tracking system
- 👥 User registration with unique usernames
- 🔗 "Challenge a Friend" feature with shareable links
- 📱 Responsive design for all devices
## Setup and Installation
### Prerequisites
- Node.js (v14+)
- Python (v3.8+)
- MongoDB Atlas account (or local MongoDB)
### Backend Setup
1. Navigate to the backend directory:
```
cd backend
```
2. Install dependencies:
```
pip install -r requirements.txt
```
3. Create a `.env` file with your MongoDB Atlas credentials:
```
MONGODB_USERNAME=your_username
MONGODB_PASSWORD=your_password
SECRET_KEY=your_secret_key
```
Note: The MongoDB URI will be constructed in the code with proper escaping of the username and password.
4. Run the server:
```
python run.py
```
The backend will be available at http://localhost:8000
The hosted backend is available at https://globetrotterbackend.vercel.app, check the health with https://globetrotterbackend.vercel.app/health.
5. Backed tests:
Endpoint tests are written in `tests/test_api.py` and can be run with the following command:
```bash
pytest tests/test_api.py
```
Make sure the env is correctly configured and the backend is running before running the tests.
### Frontend Setup
1. Navigate to the frontend directory:
```
cd frontend
```
2. Install dependencies:
```
npm install
```
3. Create a `.env` file with the following content:
```
REACT_APP_API_URL=http://localhost:8000
```
4. Start the development server:
```
npm start
```
The frontend will be available at http://localhost:3000
## Running the Application
You can use the provided script to run both the backend and frontend:
```
./run_app.sh
```
## Running E2E tests with Selenium
1. Install the required packages:
```bash
pip install selenium pytest
```
2. Run the tests:
```bash
pytest tests/test-e2e.py
```
## Deployment
### Backend Deployment on Vercel
1. Make sure you have the Vercel CLI installed:
```
npm install -g vercel
```
2. Set up your environment variables in Vercel:
```
vercel secrets add mongodb_username your_username
vercel secrets add mongodb_password your_password
vercel secrets add secret_key your_secret_key
```
3. Deploy the backend:
```
cd backend
vercel deploy
```
### Frontend Deployment on Vercel
1. Update the `.env` file with your deployed backend URL:
```
REACT_APP_API_URL=https://your-backend-url.vercel.app
```
2. Deploy the frontend:
```
cd frontend
vercel deploy
```
## MongoDB Atlas Setup
The application uses MongoDB Atlas for the database. The data is stored in:
- Database: `city_data`
- Collection: `cities`
The collection contains documents with the following structure:
```json
{
"city": "City Name",
"country": "Country Name",
"clues": ["Clue 1", "Clue 2"],
"fun_fact": ["Fun Fact 1", "Fun Fact 2"],
"trivia": ["Trivia 1", "Trivia 2"]
}
```
## Dataset
The initial dataset was expanded to 105 destinations. The dataset is stored in the `city_data` collection in the MongoDB database.
The application uses a dataset of famous destinations with:
- City and country information
- Cryptic clues about each destination
- Fun facts and trivia
The dataset is stored on the backend to prevent users from accessing all questions and answers through the browser.
## Future Enhancements
- Add more destinations to the dataset
- Implement difficulty levels
- Add timed challenges
- Create leaderboards
- Add more social sharing options
- Implement user authentication with OAuth
## License
This project is licensed under the MIT License - see the LICENSE file for details.