7 days
- React.js
- Node.js
- JavaScript (ES6) / HTML5 / SCSS
- Git / GitHub
- MongoDB & Mongoose
- BCrypt & Session Auth
- Bulma CSS Framework & SCSS
- Chai
- FileStack.js
- Mapbox
- MapQuest
- Artsy.net
- Google Cloud Vision
This was a group project with 3 members. The project was managed using Trello and daily stand-ups.
A hosted version of this app can be found at art-mapper.herokuapp.com
ArtMapper allows users to see where paintings are geographically located. Users can select a specific artist and see where his or her works are on display. Signed-in users can also add new artists to the database, and add new works of art. The 'Journey' element of the application encourages users to visit galleries. To complete a 'Journey', users must find specified paintings and upload photos of each painting.
Users can register accounts on ArtMapper through the Register Page. Users can sign in through the Login Page. Users must be logged in to add new paintings or new artists to the database. Users must also be signed in to complete a 'Journey'.
Signed in users can access their Profile page. From here they can see the number of paintings they have uploaded and edit their user information. User profile images are uploaded using FileStack.
All paintings on ArtMapper are linked to a specific artist. All artists can be found from the Artists index page. Clicking on a specific artist will take you to the Artist Show page, which shows more information about the artist and all the paintings that have been uploaded to that artists.
The location of each painting is shown on the map, with the paintings also displayed in a grid below this. Clicking on a specific painting will take you to the Painting Show page with more information about the painting and its location shown on a map. We used the Mapbox API to render the maps shown on the Artist Show pages and Painting Show pages. Paintings on the Artist Show pages can be filtered by a time period or searched for by name.
New artists can be added to the database on the Add Artist Page. When users type in the name of an artist they wish to add, a request is made to the Artsy API in order to find more information about the artist and a wikipedia link is automatically generated.
Signed in users can upload new locations of where to find an artists work from the Add Painting Page. An image of the painting can be uploaded using FileStack. The location of the painting can either be adding with 'Use my location' or by entering an address. The 'Use my location' button uses the location of the browser to determine the address of the painting. If you manually enter an address, the MapQuest api is used to geocode the address into latitude and longitude. If the MapQuest api can not locate the address, an error is shown.
The Journey section encourages users to explore galleries to locate paintings. Signed-in users can select a Journey to complete. A journey is comprised of a list of paintings by an artist. Users must locate the paintings in the real world to complete the journey. When a user has found the painting, they must take a photo of the painting (using FileStack). This image is then sent to the Google Cloud Vision api in order to verify that the photo is of the correct painting. If the photo is correct, the painting will be ticked off the journey.
The development process started with simple wireframes to workout the basic functionality of the site. We then decided what database models and routes would be needed. We started working on the backend api of the site by each making models and controllers for every route. Once the api routes had been made, this was tested by making api requests with Insomnia.
With the backend up and running, we moved onto working on the frontend with React.js. Basic components were made for each page and a router was set up in the app.js file. We each took pages and worked on these individually creating the layout and functionality for each page.
Once our core frontend functionality was working, pages were taken individually for styling. We broke our style.scss file into individual sub files for improved navigation and to minimise conflicts.
Work was carried out on branches of the code depository for each feature. This was merged with the Development branch of the code and any merge conflicts were fixed as a group. Features were tested on the Development branch before being merged with the Master branch.
Tasks were managed and assigned through the task manager Trello. We performed daily stand-ups to keep track of progress.
The layout of the site was created based on Mobile-First-Design principles. Initial mock-up wire frames were made during the planning phase to show the basic functionality of each page and general layout. These were then worked on in more detail during the styling aspect of the build. Bulma CSS framework was used to create the structure of the layout and its responsiveness. Further styling was added with SCSS.
Much of the project's basic structure was created as a group effort through pair coding. Once the main structure was in place individual features were built out by each project member. The following items were some features for which I took the lead:
- Project management and Trello board owner
- New painting functionality, including the use of the MapQuest API to convert an address input into geo-coordinates or giving the user the option to use their browser's location.
- Setting up the backend testing with Chai and writing the majority of the tests.
- Creating the Seeds file.
- Styling of all the form elements.
This was the first project I did using React.js. Although I enjoyed working with React.js, this involved a steep learning curve, particularly in regards to state and props.
This was the first group project I did while at General Assembly. This introduced new challenges such as the potential to create conflicts when merging code and also maintaining a consistent project vision. We minimised merge conflicts by each working on different features and kept track of who was working on each feature through Trello. Any merge conflicts were resolved as a group.
We were hoping to create an app which would encourage uses to create and maintain the database of paintings. We had initially planned to add a trophies or points system to motivate users to upload new paintings. Users would gain trophies by uploading new paintings. We would also have liked to let users add follow friends so they can compete with other users and see when their friends upload new paintings or complete a journey.
If we had more time, we would like to allow users to follow Artists, so they are notified when new paintings are on display, particularly if they are located near where the user is based.
Tests were written with Chai to test the Artists routes and the Login / Register routes. We would like to have written more tests to cover all the routes if there was more time.
There are currently no admin users and Journeys must be set within a seeds file.