-
Notifications
You must be signed in to change notification settings - Fork 0
chris-sarli/station-search
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
########### ################### %% ####################%%%%%% ######### #%%%%%%%%%% ####### %%%%%%%%%%%%%% ####### %%%%%%%%%%%%%%# __ _ _ _ ###### %%%%%%%%%%%%%##### / _\ |_ __ _| |_(_) ___ _ __ ###### %%%%%%%%%%%%% ###### \ \| __/ _` | __| |/ _ \| '_ \ ###### %%%%%%%%%%%%% ###### _\ \ || (_| | |_| | (_) | | | | ####%%%%%%%%%%%%% ###### \__/\__\__,_|\__|_|\___/|_| |_| %%%%%%%%%%%%%% ###### %%%%%%%%%%%%% ####### __ _ %%%%%%%%%### ######### / _\ ___ __ _ _ __ ___| |__ %%%%%####################@@ \ \ / _ \/ _` | '__/ __| '_ \ #################@@@@@ _\ \ __/ (_| | | | (__| | | | ####### @@@@@@@@@@ \__/\___|\__,_|_| \___|_| |_| @@@@@@@@@ @@@@@@@@@@ @@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@ @@@@@@@@ @@@@@@@ ┌──────────────────────────────────────────────────────────────┐ │ Deployed application: │ │ https://chris.sarl/station-search/ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│ │ To run locally, first run │ │ │ │ npm install │ │ │ │ Application can be run with a development server by running: │ │ │ │ npm start │ │ │ │ Or with a production server using: │ │ │ │ npm run build && serve -s build │ └──────────────────────────────────────────────────────────────┘ Station Search is a simple interface to filter and sort the 270 stations of the London Underground. Stations can be filtered by name, Tube services, and travel card zone. Filtered results can be sorted by name, original opening date, and annual ridership (each ascending or descending). Upon selection, each filtered item will open the corresponding station's Wikipedia page in a new tab. The interface offers users several affordances: • Hovering on a station changes the cursor to a pointer and alters background color. • Hovering on certain clickable text elements adds an underline • Text field has a relevant placeholder value "Station name..." Additionally, white space and mindful typography (size and weight) is used frequently to imply structure. For filtering, simple text options are used. Some icons were tested for some operations (selecting all and none, changing ascending/descending of sorting function), but ultimately not used. While they did simplify the interface, they were not clearly recognizable. On small screen sizes, the sizes of certain buttons are increased, so they are easier to select given the less precise input method. P22 Underground, similar to the official New Johnston, is used as the sole typeface in the interface. Many UI elements (especially colors) are based on the Transport for London Design Style Guide, available here: https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards The data for this project was sourced from the following Wikipedia page: https://en.wikipedia.org/wiki/List_of_London_Underground_stations I downloaded an excerpt of the page source, and wrote a Python script to parse the page. The script extracted station name, lines, zones, date opened, ridership, and the URL of each station's individual Wikipedia page. Additionally, the script also parsed the URL of each station's included image, and downloaded a copy of each of these images. Because all of these images are published under Creative Commons, no citation is required in my interface. Ultimately, this script outputs a JSON file with all of this parsed information, including relative links to the appropriate downloaded images. Please note, I was feeling lazy, so the three station names that are each shared by more than one station (Edgware Road, Hammersmith, and Paddington) are not handled in the most elegant way possible. I manually appended the names of the second entries (as appearing in the original Wikipedia page) with "*", so there is both a "Paddington" station and a "Paddington*" station. Additionally, some ridership statistics were improperly parsed, so I manually corrected them. The JSON file created by the script is loaded by the App component, and passed as a prop to an SearchTool component. SearchTool contains both the filter/sort manipulation elements, but also the resultant items. SearchTool manages user changes to filtering/sorting, either through entering a query, changing line/zones options, or using one of the filter clearing options. SearchTool also renders a ResList (short for "Result List") component, to which it passes various aspects of its state as props, reflecting the current state of the filter, along with the original full collection of items created from the imported data. ResList, upon render, applies a series of mappings, filters, and sorts to the original item list to reflect the desired filtering/sorting. For each match, an Entry component is rendered, passed the JSON blob representing that specific station. Entry is merely a presentation component, which interprets the data passed to it and rendering the result block. Tube services are further rendered with a list of ServiceLine components, which are passed a line name to represent as a prop. Here is a summarizing diagram of the components: ┌───────────────────────┐ │ App │ │imports data from JSON │ └───────────────────────┘ ┃ ▼ ┌───────────────────┐ │ SearchTool(data) │ └───────────────────┘ ┃ ▼ ┌─────────────────────────────────────────┐ │ResList(init, crit, zones, lines, sortby)│ │ init refers to JSON data, │ │ crit to search query │ └─────────────────────────────────────────┘ ┃ ┃ one-to-many ╱┃╲ ┌───────────────────┐ │ Entry(item) │ └───────────────────┘ ┃ ┃ one-to-many ╱┃╲ ┌───────────────────┐ │ ServiceLine(line) │ └───────────────────┘
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published