Lumen Spot is a responsive, mobile-first, server side rendered React Redux web application designed to help photographers find information about sunrise, sunset, and twilight times for desired locations. Lumen Spot provides location-based weather data and inspiration pictures to help users prepare for the best photoshoots.
In order to get started clone this repo. Enter the commands below in your terminal:
git clone https://github.com/bvellek/lumen-spot-app.git cd lumen-spot-app yarn install
Build: the build process, for both development and production, of this app uses Grunt as a task runner for compiling Sass and autoprefixing and minifying CSS. If you do not already have Grunt CLI installed run
yarn global add grunt-cli.
Development: to run the app locally use the command
yarn devand open your browser to 'localhost:8081'.
Testing: to start the test suite, run
yarn testor for continuous testing
yarn run test:watch.
Production: to prepare for production run
yarn run production. Webpack is run in production to remove all unnecessary comments and errors from React.
Lumen Spot is a web application that I designed and developed to help inspire photographers. Light is the most important aspect of any photo. In order to find the light that best suits a photographer's vision, it is crucial to know the times at which the sun is rising and setting. This application helps users find out detailed sun times for a specific location and also provides current weather conditions. To further aid in the photographer's vision process, I include example photos taken by other photographers at the same location.
|Landing Page||Location Results Page|
|Small and Large Wireframes|
|In the design phase of this application, I started by writing user stories to determine the key features. The primary user features are to search for a location (either by entering an address, place of interest, or using current location), see sunrise, sunset, twilight times for the location, see weather for the location, and see photos from other photographers at the same location. After determining the user-critical features, I added some other features to improve the user experience. These include a link to a map of the location, a link to extended forecast weather, and photo settings with links to photographer's profiles. With these features in mind, I created wireframes of the app using Sketch. I tackled the design process with a mobile-first approach, because I know the majority of users will be using this app on location, on their phones. Using this approach also greatly improves the responsive design process.|
In the development phase of this application, I began with an HTML first approach to make a quick mockup of the app. I prefer to develop this way as it promotes progressive enhancement.
One difficulty of an isomorphic React app is maintaining the state of the app on reload. In order to remedy this issue, I stored all vital aspects of the state (namely the search coordinates for locations) in the url query string. This allowed me to fetch data from APIs on the server side and pass the 'preloaded state' to the client-side application. This prevents a fetch on the server and a redundant fetch on the client. Another issue I encountered was maintaining history support. With no simple React/Redux solution for history support that met all my needs, I decided to implement my own history using the History API's pushState() and onpopstate().
Flexbox was used to create the mobile-first, responsive layout. For maintainability and easy understanding for other developers, I used Jest and Enzyme to test all components, actions, and reducers. This was coupled with Travis CI for continuous integration in the deployment process.
This app utilizes the following three APIs for data:
- Sunrise Sunset: provides all of the sun times data. I had to proxy this request through my server because Sunrise Sunset only offers an insecure source.
- Weather Underground: provides the weather data and weather icons.
- 500px: provides all of the inspiration photos.
Using a progressive enhancement strategy with an HTML first approach and within the constraints of web standards offered an implicit level of accessibility. This application was also tested for screen reader accessibility. Other accessibility improvements include:
- WCAG 2.0 Level AA Compliance
- VoiceOver Context: in order to maintain context for non-sighted users, I added longer descriptions certain features like the Search link on the landing page and the inspiration images on the Location Search Page. To maintain visual styles, I used a
.visually-hiddenclass from the A11Y Project to hide this extra context from sighted users who have more visual context.
- VoiceOver Rotor: the Rotor is a commonly used feature that allows for more efficient web browsing by listing common elements like headings, links, and sections. To maximize this feature I ensured that all pages had proper heading structure.
- Contrast on all text elements to match Web Contact Accessibility Guidelines.