- Description
- User Story
- Feature List
- Packages & Libraries
- Tech Stack
- Installation
- License
- Security
- Contributions
- Authors
Perpektiv provides a unique opportunity to explore and discover Richmond through its eclectic art and diverse culture. By harnessing the data originally collected by the Richmond Mural Project, Perspektiv provides mural and artist information with a social and gamified spin. Coupled with directions and nearby restaurant options, Perspektiv provides something for everyone. Whether you are a seasons Richmonder or new in town, you will find something fascinating to discover about this great and weird city.
AS A Richmonder or visitor
I WANT to explore the city and experience things that I enjoy (who doesn’t love art and food??)
SO THAT I can have a deeper appreciation and love for this city and its culture
- Geocoder for exact location and dynamic directions
- RESTful API documentation via Postman
- Protected routes and user authentication
- Gamification logic that levels up users as they visit more POIs
- Error handling and error message displays
- Photo uploads and comments on murals
- QR code integration automatically updates user progress (see video)
Perspektiv leverages a number of libraries and packages to create a fast, responsive, and modern web application. Below are some of the packages that help our application run smoothly and efficiently:
| Name (a-z) | Usage | Installation |
|---|---|---|
| axios | Handles CRUD operations for both frontend and backend API calls | npm i axios |
| bcryptjs | Hashes user credentials before passing to and storing in the database | npm i bcryptjs |
| cookie-parser | Middleware which parses cookies attached to the client request object | npm i cookie-parser |
| express-mongo-sanitize | Middleware which sanitizes data to prevent MongoDB operator injection | npm i express-mongo-sanitize |
| framer | Library that helps drive Perspektiv's interactive animations | npm i framer |
| framer-motion | An open source and production-ready motion library for React | npm i helmet |
| helmet | Used to add an additional layer of security to the Express backend | npm i framer-motion |
| jsonwebtoken | Safely and securly transmits user credentials via JSON object | npm i jsonwebtoken |
| mapbox | Leverages Mapbox services for Perspektiv's custom map view | npm i mapbox |
| morgan | Used to log HTTP requests in the node console | npm i morgan |
| mongoose | Enables object modeling for our MongoDB database | npm i mongoose |
| multer | Middleware for handling photo uploads on mural posts | npm i multer |
| node-geocoder | Used to get user location and lookup nearby points of interest | npm i node-geocoder |
| react-bootstrap | Bootstrap 4 components built with (and for) React (used for styling) | npm i react-bootstrap |
| react-map-gl | Renders Perspektiv's interactive map view | npm i react-map-gl |
| react-responsive | Media queries in react for responsive design | npm i react-responsive |
| semantic-ui-react | The official Semantic-UI-React integration (used for styling) | npm i semantic-ui-react |
| slugify | Used to create clean URL slugs that contain no foreign symbols | npm i slugify |
| uuidv4 | Used to create universally unique identifiers for Perspektiv's data sets | npm i uuidv4 |
| xss-clean | Sanitize user input coming from POST body, GET queries, and url params | npm i xss-clean |
- MongoDB
- Express.js
- React.js
- Node.js
- Geolocation with Mapbox API
- Nodemailer & SendGrid
- Custom error handling middleware
- Custom auth & protected route middleware
- Clone the repo:
git clone https://github.com/markdcross/perspektiv-v2.git - Install server-side NPM packages:
npm i - Install client-side NPM packages:
cd client && npm i
Distributed under the MIT License.
Here are some of the added security measures that were taken to ensure Perspektiv not only could protect itself from unwarranted activity, but also the art that is represented on it:
- Encrypt passwords and reset tokens
- Prevent cross site scripting - XSS
- Prevent NoSQL injections
- Add a rate limit for requests of 100 requests per 10 minutes
- Protect against HTTP parameter pollution
- Add headers for security (helmet)
- Use CORS to make API public (for now)
Current Contributors:
- Josh Allan
- Mark Cross
- Danny Fraley
- Roberto Rupert
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Below is contact information for the authors of this application. Please feel free to reach out directly if additional questions exist.
| Name | Portfolio | Github | |
|---|---|---|---|
| Josh Allan | [email protected] | joshallan.dev | jallan07 |
| Mark Cross | [email protected] | markdcross.dev | markdcross |
| Danny Fraley | [email protected] | dannyfraley | |
| Roberto Rupert | [email protected] | bertodemus.github.io/Bifurcate/ | Bertodemus |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent