The single web page application known as Student Mapp or (Smapp), is a navigation application designed to help students navigate throughout Solent University. The search system will allow students and other users to locate all the university sites, buildings and rooms. The routing system will allow users to select two locations and be provided with all possible routes and information on how to get there.
Clone the repository to terminal or download as a zip file
Click clone button and copy & paste the HTTPS link
Open terminal and use the git clone command with the HTTPS link
Click clone button and select download as zip
Installs all files built within this application
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Above is images of the main wireframe for desktop and mobile. More on this checkout out: Wireframes and StyleGuide
Four agile sprints were implemented to design, build, test and review the prototype. Each prototype was referenced Markup or ‘Mark’ with the number of each prototype (e.g. Mark-1). User stories were created based on previous user research. Each prototype was designed using Sketch and modified from the previous prototypes, using different design components from a design library. Each prototype was built through React functional components (React Components, 2020). MapBox (MapBox, 2020) was then used to create the 2D world map and Leaflet (Leaflet, 2020) was used to simulate UI elements. Usability testing was then integrated for each prototype to test usability and user perception. After testing, each prototype was reviewed to identify any early design issues that need to be addressed within the next sprint.
Mark 1 was designed to be tested by users to consider ease of use of the basic design components and controls such as adding markers, and ability to maneuver through the map with zoom controls using React Class Components, React-Leaflet and Mapbox.
As a user I want to be able to add a marker to the map so that I can easily search for my desired location
First make sure you have cloned and installed locally correctly.
- Use
git branch checkout smapp-app-mk1within the terminal to move to Mark 1 prototype. - Run in terminal
npm start
Mark 2 was designed to be tested by users to consider ease of use of the basic design components and controls such as adding markers, geolocation and ability to maneuver through the map with zoom controls using React Functional Components, LeafletJS and Mapbox.
As a user I want to be able to retrieve my current location on the map
First make sure you have cloned and installed locally correctly.
- Use
git branch checkout smapp-app-mk2within the terminal to move to Mark 2 prototype. - Run in terminal
npm start
Mark 3 was designed to be tested by users to consider ease of use of searching for locations through the use of a search bar.
As a user I want to be able to find for a location via a keyword search
First make sure you have cloned and installed locally correctly.
- Use
git branch checkout smapp-app-mk3within the terminal to move to Mark 3 prototype. - Run in terminal
npm start
Mark 4 was designed to be tested by users to consider ease of use of searching for locations and provide the correct route to get from one destination to another.
As a user I want to be able to be provided with a route and directions from one marker to another.
First make sure you have cloned and installed locally correctly.
- Use
git branch checkout smapp-app-mk4within the terminal to move to Mark 4 prototype. - Run in terminal
npm start