This project is a React web application that lives at this Cloudfront distro URL. It's a mapping application using Mapbox, to create and manipulate polygon features.
- Introduction
- Getting Started
- Features
- Deployment
- Tools and Technologies
- API Documentation
- Feature Explanation
- Next Ideas
- Undo Functionality
The goal of this project is to create a web application that allows users to create, manipulate, and manage polygons on a map. Users can save polygons with names, edit them, and view all created polygons.
- Node.js and npm
- Mapbox account for the token
- AWS account for deployment (optional)
- Clone the repository:
git clone git@github.com:nh83012001/perimeter-app.git
cd perimeter-app- Create an .env file:
touch .envAnd add the following variables
VITE_GRAPHQL_ENDPOINT=https://qsb51itvz4.execute-api.us-east-1.amazonaws.com/dev/graphql
VITE_MAPBOX_TOKEN=yourMapboxToken
- Install dependencies and run the development server:
npm install
npm run devThe application will run locally at localhost:5173
- View and navigate the map
- Create polygons by adding a minimum of 3 points
- Save polygons with a name
- Clear all points during creation/editing (trashcan)
- Edit previously created polygons
- Delete multiple polygons
Build creates a dist folder. Deploy dev uses serverless and my AWS credentials to deploy.
npm run build
npm run deploy:dev- React / Vite
- Mapbox
- Serverless to deploy
- Material for some light styling
- Apollo Client for server connection and running query/mutation hooks
- Prettier
- Eslint
- Backend Service
- Mapbox GL Draw tools - where controls come from
To draw a polygon, use the control on the top right corner of the map that is a square. It is selected if the background is orange and deselected (normal select/move capabilities) if the background is grey.
Since mapbox lets you select multiple features and I didn't really want to overwrite it, I gave you the ability to delete multiple polygons at the same time. You select one feature, then press shift, and select additional features. This could be improved by just sending the delete once with an array of polygons to be deleted.
The trashcan control lets you delete as you are drawing lines, but also lets you delete features. I went ahead and let you delete from either place.
- Code maintainability: Break out into separate components like map container, link button, edit/create form popup
- Code maintainability: circleCI and an analysis tool (like Code Climate)
- Feature: Default apollo caching is in there. I would consider doing a write to cache for getMapSession query on update/delete. Then I could just always be reading from that query on load.
- Feature: Disable the share link whenever you don't have any polygons saved
- Feature: Work on making the controls more clear
- Feature: Snackbars when you get successful save, update, delete. Plus either a snackbar or animation when you copy to clipboard
- Bug: If you load map data and delete, you keep a greyed out polygon.
- Styling: I normally use material-ui and bring in a theme with a color pallette and a few overrides I like.
- Styling: Make the form to update the polygon inside of a mapbox popup
I had a feature/undo branch where I was implementing what I thought would be a good experience for the undo in the screenshot for at the end of the code challenge. The way this was working is that the undo would track all the updates you make to the name and selected feature.
If I was implementing for a production app, I would turn this into a control below the trashcan and only be tracking for the state of all of the polygons. It becomes a little bit tricky though, because you are making undo changes, but not having a save popup. So you would end up getting out of sync pretty quickly from what you have saved in the server.