Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sacred-g/googlemap-basic
- Display Google Maps with the ability to add markers. - User registration and login. - OAuth login with GitHub and Google. - Store markers and user information in MongoDB via the Data API.
https://github.com/sacred-g/googlemap-basic
description github githubauth google-maps google-maps-api googleauthenticaion mongodb mongodb-database mongoose oauth
Last synced: 14 days ago
JSON representation
- Display Google Maps with the ability to add markers. - User registration and login. - OAuth login with GitHub and Google. - Store markers and user information in MongoDB via the Data API.
- Host: GitHub
- URL: https://github.com/sacred-g/googlemap-basic
- Owner: Sacred-G
- Created: 2024-05-18T00:35:31.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-18T04:01:16.000Z (6 months ago)
- Last Synced: 2024-10-11T05:41:06.669Z (about 1 month ago)
- Topics: description, github, githubauth, google-maps, google-maps-api, googleauthenticaion, mongodb, mongodb-database, mongoose, oauth
- Language: JavaScript
- Homepage:
- Size: 3.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# GoogleMap-Basic
A web application that integrates Google Maps with markers, user authentication (including GitHub and Google OAuth), and a MongoDB backend using the MongoDB Data API.
## Features
- Display Google Maps with the ability to add markers.
- User registration and login.
- OAuth login with GitHub and Google.
- Store markers and user information in MongoDB via the Data API.
- Secure marker addition with JWT authentication.
## Getting Started
### Prerequisites
- Node.js
- MongoDB Atlas account
- Google Cloud Platform account
- GitHub account
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/sacred-g/GoogleMap-Basic.git
cd GoogleMap-Basic
```
2. **Install dependencies**:
```bash
npm install
```
3. **Create a `.env` file**:
Create a `.env` file in the root of your project directory and add the following content:
```plaintext
MONGO_API_KEY=your_mongo_api_key
JWT_SECRET=your_jwt_secret_key
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
```
Replace the placeholder values with your actual API keys and secrets.
4. **Set up Google OAuth**:
- Go to the [Google Cloud Console](https://console.cloud.google.com/).
- Create a new project or select an existing project.
- Navigate to the **APIs & Services** dashboard and create OAuth 2.0 Client IDs.
- Set the redirect URI to `http://localhost:3000/auth/google/callback`.
- Add the Client ID and Client Secret to your `.env` file.
5. **Set up GitHub OAuth**:
- Go to [GitHub Developer Settings](https://github.com/settings/developers).
- Register a new OAuth application.
- Set the callback URL to `http://localhost:3000/auth/github/callback`.
- Add the Client ID and Client Secret to your `.env` file.
6. **Start the server**:
```bash
cd server
node server.js
```
7. **Run the application**:
Open your browser and navigate to `http://localhost:3000/login.html` to see the login page. You can register or log in using the forms or authenticate with GitHub or Google.
```
## Folder Structure
**GoogleMap-Basic**
GoogleMap-Basic/
│
├── server/ # Backend server code
│ ├── models/ # Database models
│ │ ├── marker.js # Marker model
│ │ └── user.js # User model
│ └── server.js # Main server file
│
├── public/ # Frontend code
│ ├── index.html # Main HTML file
│ ├── login.html # Login HTML file
│ ├── register.html # Register HTML file
│ ├── styles.css # CSS file for styling
│ └── script.js # JavaScript file for client-side logic
│
├── .env # Environment variables
├── .gitignore # Git ignore file
├── package.json # Node.js dependencies and scripts
└── README.md # Project documentation
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
### Ensure you have the .env file in the root directory
## Steps to install
####Ensure you have installed all the required dependencies by running:
npm install
### Start the server
cd server
node server.js
### Open the Application:
Open your browser and navigate to http://localhost:3000/login.html to see the login page.
Register or log in using the forms.
Alternatively, log in using GitHub or Google.