The Wetective app can be found on Heroku at the link here.
The Wetectives frontend repository ingests the FBI's Most Wanted API, displays map data using OpenStreetMap and Leaflet.js, and connects to the backend repository via API endpoints in order to create new users and tips, as well as to retreive information about users or any tips they have submitted.
Once both the front and backends of the app are up and running, a user can navigate to the landing page of the app.
The top navigation bar has a link to either login
or sign up to register to become a user.
For ease of access this app implements OAuthentication, allowing the user to register using their google account credentials.
Once successfully logged in a user will then be directed to their user dashboard. If the user has submitted any tips for an active investigation then those tips will be displayed here.
Now that we are logged into our user account, the nav bar changes (as you can see in the above image). If we click on "Browse" link we are taken to the open investigation index page. This page displays all open investigations in the style of an image carousel.
Clicking on the "See More Details" button will take the user to the show page for that given investigation which displays the poster and pertinent information about the culprit.
If a user clicks on the map button in the top navigation bar they will be redirected to the map feature of the app. This displays a map with interactable pins that denote the location for ever FBI field office listed in their API. Clicking on a pin will display a list of open investigations that are associated with that field office. Clicking on one of these investigations will take you to its show page.
- Create a new user
POST /api/v1/users/register
"data": {
"type": "user",
"id": "1",
"attributes": {
"name": "test user",
"email": "[email protected]",
}
}- Search users by id
GET http://localhost:3000/api/v1/users/find?id={{id}}
"data": {
"type": "user",
"id": "1",
"attributes": {
"name": "Some person",
"email": "[email protected]",
}
}- Create a new tip
GET http://localhost:3000/api/v1/users/:id/tips/new
"data": {
"type": "user",
"id": "1",
"attributes": {
"name": "Some person",
"email": "[email protected]",
}
}- Retrieve a user's tips
GET http://localhost:3000/api/v1/users/:id/tips
"data": {
"type": "user",
"id": "1",
"attributes": {
"name": "Some person",
"email": "[email protected]",
}
}Note: You must also install and run the Wetectives BE app for full functionality.
- Clone this repository: On your local machine, open a terminal session and enter the following commands for SSH or HTTPS to clone the repo.
- Using SSH key
$ git clone [email protected]:wetective/fe.git- Using HTTPS
$ git clone https://github.com/wetective/fe.git- Once cloned, you'll have a new local copy in the directory you ran the clone command in.
- Change to the project directory: In terminal, use
$cdto navigate to the project directory.
$ cd be- Install required Gems utilizing Bundler:
- In terminal, use Bundler to install any missing Gems. If Bundler is not installed, first run the following command.
$ gem install bundler- If Bundler is already installed or after it has been installed, run the following command.
$ bundle install- Database Migration
- Before using the web application you will need to setup your databases locally by running the following command
$ rails db:{drop,create,migrate,seed}- Startup and Access
- Finally, in order to use the web app you will have to start the server locally and access the app through a web browser.
$ rails s- You will need to run the fe server simultaneously in order for the two parts to be able to talk to each other.
$ rails s -p 4999- Open web browser and visit link http://localhost:3000
| Rue Zheng | GitHub | LinkedIn |
| Brenna Stuart | GitHub | LinkedIn |
| Cory Bethune | GitHub | LinkedIn |
| Jared Hardinger | GitHub | LinkedIn |
| Blake Saylor | GitHub | LinkedIn |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent