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.

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:

   git clone https://github.com/sacred-g/GoogleMap-Basic.git
   cd GoogleMap-Basic

2. Install dependencies:

   npm install

3. Create a .env file:

   Create a .env file in the root of your project directory and add the following content:

   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.
   • 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.
   • 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:

   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 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.