stroll

Stroll is a React Native mobile app that allows you to create and find walks in your area. Walks focus on attractions and points of interested and can be filtered by category. Some of these categories include historical walks, architectural walks, scenic walks, and more. Stroll sits on the React Native Maps and Google Directions APIs to create a slick and intuitive user experience.

Installation

Start by installing Expo on your mobile device. Clone this repository to your local machine (don't forget to npm install).

Create a secrets.js file in the root directory.

Generate a Google Directions API key and add it to your secrets file.

const googleSecret = '[YOUR API KEY]'

Download and initialize ngrok. ngrok will allow you to securely tunnel and use your computer's local host on your mobile device. Add the ngrok server to your secrets file as well.

const ngrokSecret = '[YOUR NGROK SERVER]'

Create a new database called "capstone"

psql
createdb capstone

You must initialize the postGIS extension in the database in order to store geolocation data. If you have postgreSQL 11.5 or higher, postGIS should be an extension that was included in your download.

\c capstone
CREATE EXTENSION postgis;
SELECT postgis_full_version();

The above command should show you the version of postGIS in your database if the extension has been added successfully.

To initialize your server:

npm run start-dev

To initialize Expo:

npm start

To login, enter the email (test@test.com) and password (test).

Get strollin'!

Backend

Our database was created using PostgreSQL and Sequelize. One unique challenge was figuring out how to connect navigation points to a walk. Navigation points are saved in the database similar to a doubly linked list so that each navigation point points to the next navigation point. This structure makes it easy to retrieve and display a walk's navigation points in the correct order.

Frontend

Our mobile app was created using React Native and Expo. The app was styled with CSS, React Native styled components and the NativeBase styling library. We wanted to create an intuitive user experience so we used React Navigation and set up a stack and dashboard navigator. We also created a dashboard with instructions on how to get started and help buttons along the way if the user got stuck.