Pick Location Angular Express

Let the user randomly choose a location on google map, then the admin will approve the scanned locations, the approved locations will be displayed in real time for the user to see.

Table of contents

• Tech Stack
• Features
• Requires
• Environment Variables
• Run Locally
• Authors

Tech Stack

Client: Angular 17, Socket.io-client

Server: Node, Express, Socket.IO

Database: PostgreSQL

Features

• User pick a location in google map
• Users can view approved locations realtime
• Dashboard admin mange user's positions
• Login, register
• Authenticate, Authorization with jwt (store in local storage)
• Layout admin, user

Requires

Software:

• Nodejs

• Yarn

• instructions for installing PostgreSQL

• After installing nodejs, open terminal to install Angular 17

• npm install -g @angular/cli@17

You will need to create a project on Google Cloud to use Google's API at console.cloud.google.com

Then enable the following 2 APIs:

Then create api key:

Environment Variables

Use api key that you created in the step above to add it in environment.ts, environment.development.ts, .env files

For environment.ts:

production: true

serverUrl: import.meta.env['NG_APP_SERVER_URL']

apiUrl: import.meta.env['NG_APP_API_URL'],

ggApiKey: import.meta.env['NG_APP_GG_API_KEY'],

For environment.development.ts:

production: false

serverUrl: 'http://localhost:3000

apiUrl: 'http://localhost:3000/api

ggApiKey: import.meta.env['NG_APP_GG_API_KEY'],

For .env files folder client:

NG_APP_SERVER_URL=your-server-url

NG_APP_API_URL=your-api-url

NG_APP_GG_API_KEY=your-api-key

For .env files folder server:

DB_HOST=localhost

DB_USER=postgres

DB_PASSWORD=your-postgres-password

DB_PORT=your-port

DB_NAME=database-name

APP_PORT=3000

NODE_ENV=development

GG_API_KEY=your-api-key

GG_PLACES_URL=https://places.googleapis.com/v1/places:searchNearby

ACCESS_TOKEN_LIFE=7d

ACCESS_TOKEN_SECRET=your-access-token-secret

REFRESH_TOKEN_LIFE=30d

REFRESH_TOKEN_SECRET=your-refresh-token-secre

CLIENT_URL=http://localhost:4200

Run Locally

Clone the project

  git clone https://github.com/hoanggaphan/pick-location-angular-express.git

Go to the project directory and open a terminal

  cd client

Install dependencies for client use npm

  npm install

Start the client

  ng serve --open

Open another terminal and

  cd server

Install dependencies for server use yarn or npm

  yarn

Start the server

  yarn dev

Authors

• @hoanggaphan

---

⬆Lên đầu trang