sabesansathananthan/diycartographydisplay

Interactive display and archive of students' work from NCSU's Art and Design course, DIY Cartography.

🗺️ Mapping Urban Change: DIY Cartography

Interactive display and archive of students' work from NCSU's Art and Design course, DIY Cartography. Includes a dynamic timeline and sortable database of student-made maps of North Carolina, Wake County, and Raleigh. Students examine their local geographies through a combination of expressive aesthetics, infographics, collage, and historical research. This website offers NCSU design college an opportunity to display innovative work by students for recruitment and engagement in an accessible manner, and provides inspiration and reference for future classes.

Live demo: https://studentmapdisplay.web.app/

Quick Start

1. Clone the repository and change directory.

git clone https://github.com/wyhinton/DIYCartographyDisplay.git
cd DIYCartographyDisplay

2. Install yarn dependencies

yarn install

3. Run the app locally.

yarn start

App Design

• Google Sheets backend, and Google Photos for image hosting
• Centralized state management provided via an easy-peasy store

Maintenance

Adding More Student Maps

1. Add To CMS
   1. Upload the maps to the [email protected] Google Photos account
   2. Hit the "Add Sheet button" on our active Google Sheet. Using the exact same format for years 2016/2018/2020, Input all the data for the students into the new sheet. Make sure to fill any empty values with an "NA".
2. Update Source Code
   1. Add the new sheet to the pool of requested sheets
   2. Add new enum variants for the class year to the AuthorDisciplineFilter and FilterGroup enums
   3. Add a new section to the Toolbar component
3. Build + Deploy
   1. A github action is set up to build, then deploy the build, to Firebase hosting. This action is triggered when pushing to the repo. So just run git add ., git commit -m 'my update', git push, and you should see the action boot up.

Misc

Notes

• This project contains slightly modified versions of the source libraries for React Time Series Chart and React Grid Gallery. The modifications to React Time Series chart allow for circular event markers, while the modifications to React Grid Gallery removes the built in Lightbox component and enables smoother image loading.
• The only environment variables in use here is an api token for using v4 of the google sheets API.
• This project uses the free Google Sheets API tier. This means there is a limit 500 requests per 100 seconds, and 100 requests per 100 seconds per user. There is no daily usage limit. See https://developers.google.com/sheets/api/reference/limits

Browser Stack

• Material UI - Theming, grid layouts, and ui components
• Evergreen UI - Icons, UI components
• React Slick - Lightbox image carousel
• React-magnifier - Magnifying lightbox images
• React Grid Gallery - Justified gallery of all the map images
• React Time Series Chart - Timeline