In November of 2020 I was forced to self-isolate as my Covid Alert app notified me of potential exposure. It was a great time to learn something new, and I decided to tackle GatsbyJS and its GraphQL image lookup.
This site functioned as a personal brochure website for roughly seven months, outlining my skills while still directing people who wanted to see my portfolio projects to a WordPress site for which I had created a custom theme.
This is a new version of a Store Map App I built a year ago with Vanilla JavaScript, this time built with React.
The application is custom-built for an unidentified store in Kitchener. It makes shopping easier by allowing customers to create and organize their shopping lists, and find where their list items are on a map of the store’s layout, just by pressing a button and rotating their device by 90 degrees. Because their lists are stored on the device’s local storage, their items are automatically saved and shown on each new visit to the app.
How it is built:
☑️Store Map in HTML & CSS
☑️React controls Shopping List and Item Locator
☑️React Beautiful DnD package added for user to arrange list items
☑️Item Locator finds list items using CSS
☑️Over 400 items and growing in the data set
☑️Item Locator, Searched Item, and Shopping Lists are all stored in State.
☑️Shopping List is saved for future use in Local Storage, retrieved in ComponentDidMount lifecycle method
Use cases:
☑️Retailers looking to make shopping easier using branded applications
☑️Events looking to showcase vendor locations
☑️Locate a vehicle in a large parking lot (using numbers on light posts to search)
WeatherONE is a React-based local weather app that uses visual cues to tell you about current, hourly, or seven-day weather forecasts before you actually read temperature values.
Temperature values in this app are presented in Celcius and are matched up to a colour; the warmer it gets, the warmer the colour. This allows for easy and visually appealing scrolling, allowing the user to quickly find the warmest or coolest part of the day, or warmest or coolest day of the coming week. WeatherONE also uses colour to inform users of the severity of the day’s UV index, and to easily say if current conditions are cloudy or sunny – indicated by a grey or blue background during daylight hours.
In plain text, WeatherONE will also tell you if you need an umbrella that day, if you should wear a jacket, or if it’s a perfect day to wear sandals, right from the home screen. Changing colour contrasts with text was considered in the design and changes to text colour happen when necesssary to maintain readability.
WeatherONE lets you save your current location in your device’s local storage. By default, WeatherONE loads information from its current location, but allows you to save locations you’ve visited in the past.
How it works:
☑️Location coordinates come from device GPS or IP address
☑️Allows you to remember your current location for later browsing
☑️Javascript chained promises used to get weather data and location name
☑️Unique colours matched up temperature values from +30C to -30C in CSS
☑️Component classnames matched up to colour names given to temperature values
☑️Hourly Data for 48 hours and Daily Data for 7 days available.
☑️For Long-Range Forecast, click “down” arrow for more detailed information about that day’s forecast
☑️Conditionals used to create plain-text versions of upcoming weather details, such as needing to bring an umbrella or coat
☑️Built using a combination of Class and Functional components, including UseState hook
