WithinReach is a location-based platform that instantly provides personalized recommendations for tailored places, events, and experiences; Eliminating the need for extensive searching. The Google Maps API has been integrated into a React web app with a PostgreSQL database. API requests are made from the React frontend to the Express backend using the 'fetch' method, and third-party API requests are handled using the 'got' library on the backend.
Prerequisites
-
Install Git if you don't already have it.
-
Install yarn via npm
npm install --global yarn-
Install PostgreSQL
-
Use Git to clone the repository
git clone https://github.com/Gkimbo/within-reach.git- Run yarn install
cd within-reach
yarn install- Create database with
createdb within-reach_development- Run migration with
yarn run migrate:latest- Seed the Database
yarn run db:seed- Create a
.envfile in the server of your project: Run in the terminal
cd server
touch .env- Copy the keys from the .env.example file into it and add your own api keys.
You will need keys from the following websites:
API-Ninja
Unsplash-API
You will also need the google maps api key!
- Once you're done all that its time to launch the app
yarn run dev- Finally navigate to http://localhost:3000 in your browser and make sure you're all set!
-
Landing Page: When a user visits the website, they will see the landing page. This page will describe the app and have a form for signing in. Under the form, there is a link to allow the user to sign up.
-
In order to sign up the user will have to fill out all fields and pick at least on thing that interests them:
- Once registered the user will be redirected to the home page.
-
Home Page: When a logged-in user visits the home page, they will be able to see three different features:
- A button that, when pressed, will take the user to a map displaying points of interest around them.
- A list of activities that the user can select. Upon selecting an activity, the user will be shown a map of places where they can engage in that activity.
- A list of popular destinations with city names and scrolling pictures. If the user selects a city, they will be directed to a map of that city displaying their points of interest.
-
Update Interests: Users can update their interests at any time. In the navigation bar at the top of the page, there is a button called "Update Interests" that will direct the user to a page with a list of their interests and a form on the right to add new interests.
- In the list of the user's interests, they can click on an edit button to modify that interest, and a delete button to remove it.
- Clicking the edit button will replace the "Add New Interest" form with an edit form.
- The user can always click a button under the edit form to return to the "Add Interest" form.
-
Map: Users can access any map from any page by clicking the icon in the top left of the navigation bar. This action will take the user to the home page, where they can click on the "Click Me for Things to Do!" button, leading them to a map displaying nearby points of interest.
- On the map page, a search bar at the top allows the user to enter any city and view their points of interest on the map.
- Additionally, the map page presents a list of interesting things around the user to the left of the map.
- Clicking on one of the points of interest will expand its details, providing the user with more information, including the address of the attraction.
React , Node.js , Express , JavaScript , HTML , CSS , PostgreSQL , Knex/Objection , Foundation , Font-Awesome, Google Maps API, API-Ninja, Unsplash API.
If you would like to contribute to this code base:
Follow the 'Install' instructions to clone the repository from GitHub. To prevent unwanted modifications of the application: Create a new git branch to refactor existing features, or implement any new features. Send pull request for review and consideration of merging the new features into the main application branch.
Know what there is to do around you at all times. Fun things are just one click way.