ReadtyMap - Speak to Google Maps to find your location.

Overview of My Submission

ReadtyMap is a tool that can search for a location by voice, as well as by typing and searching. Deepgram and Google Maps are the technologies being used here.

Sometimes people are just lazy when it comes to typing. People frequently use Google Maps to find the location in many everyday situations. Despite the fact that there are many similar apps available, it is still worthwhile to create a simple one.

Submission Category:

Wacky Wildcards

Link to Code on GitHub

phonist / readtymap

Search location by voice

ReadtyMap

ReadtyMap is a tool that can search for a location by voice, as well as by typing and searching Deepgram and Google Maps are the technologies being used here

About The Project

Sometimes people are just lazy when it comes to typing. People frequently use Google Maps to find the location in many everyday situations. Despite the fact that there are many similar apps available, it is still worthwhile to create a simple one.

Build With

• Deepgram
• Google Maps
• React
• NextJs
• Typescript
• Redux
• Redux-thunk
• Material-UI

Getting Started

Use Voice

1. Click on the microphone icon.
2. Start speaking when page showing 'Listening'.
3. Stop speaking when page shows 'Searching'.
4. ReadtyMap will show the location.

Development

The majority of the time, development takes place in src/components/Map/, where the keys feature is used.

The deepgram.ts in pages/api/deepgram.ts is used for the speech to text feature, which is called by function in src/components/Map/Autocomplete.tsx.

…

View on GitHub

Prerequisites

• Node - 16.2.0
• Yarn - 1.22.17
• Deepgram acount
• Google Maps API key

Installation

1. git clone https://github.com/phonist/readtymap
2. cd readtymap
3. create .env file at root directory and assign value to these keys:

NEXT_PUBLIC_GOOGLE_API_KEY_MAPS=<your google maps api key>
NEXT_PUBLIC_DEEPGRAM_API_KEY=<your deepgram api key>

1. yarn dev
2. navigate to localhost:3000 and start your development

Getting Started

Use Voice

1. Click on the microphone icon.
2. Start speaking when page showing 'Listening'.
3. Stop speaking when page shows 'Searching'.
4. ReadtyMap will show the location.

Development

The majority of the time, development takes place in src/components/Map/, where the keys feature is used.

The deepgram.ts in pages/api/deepgram.ts is used for the speech to text feature, which is called by function in src/components/Map/Autocomplete.tsx.

Meanwhile, the Google Maps API is used for the map feature, which is called by function in src/components/Map/GoogleMap.tsx.

The project structure are depicts below.

pages/
|-- api/
  |-- deepgram.ts
|-- index.tsx
|-- _app.tsx
|-- Map.tsx
redux/
|-- reducers/
|-- actions/
|-- thunks/
|-- types/
      |-- interfaces/
|-- reducers.ts
|-- store.ts
src/
|-- components/
  |-- Map/
    |-- Autocomplete.tsx
    |-- GoogleMap.tsx
    |-- Pointer.tsx
|-- Listening.tsx
|-- Loading.tsx
|-- Searching.tsx

• Deepgram.ts is Deepgram's API interface.
• All UI components are stored in the src folder.
• All redux logic is stored in the redux folder.
• All typescript interfaces are kept in the folders types and types/interfaces.

Conclusion

The project is host on readtymap

The first thing that came to mind when I saw that Dev + Deepgram was hosting a hackathon was what I could do with the speech to text API.

Despite the fact that there are numerous similar apps, the first idea that comes to mind is to use voice to search for locations, creating a simple one is still worthwhile.

Developers who want to learn more about Deepgram's speech to text feature can use ReadtyMap as a starting point.
Thank you for providing this platform for us to explore additional software possibilities, Deepgram. :D

Comments

[BekahHW]

Thanks for trying things out, Adrian!