portfolio

Hello and Welcome!

I am on a journey to collaborate with designers and engineers to bring well designed user interfaces to life. Creating solutions and manipulating code to bring a vision from dream to reality is a creative process that brings me joy!

My latest project, Fingerpaint, began as a hackathon for Mintbean but quickly turned into full React passion project. Built for mobile, Fingerpaint is a preliterate paint app for kids! Check it out below.

Follow me on LinkedIn for project updates.

Projects

SOAK: What Where When

ReactJs, SCSS, PWA

A Progressive Web App with offline use designed to navigate weekend long event and festival schedules.

View by day with past event filtering. Favorite and filter out non-favorite events. Search by .

Code

Fingerpaint

ReactJs, Material UI, SCSS, PWA

Fingerpaint: making digital design tools accessible and fun for your child.

At last, a mobile app that preliterate kids can enjoy right off the bat. Designed for children ages 2 - 5, Fingerpaint equips your child with basic design tools that are intuitive to navigate.

Fingerpaint is a Progressive Web App built using the React Framework and Material UI for the front-end components. We also utilized React-Canvas-Draw and React Color in order to make the canvas more accessible and appealing to young children.

Code

Tune Match

ReactJs, arcGIS, CSS

Let's play a game!

Tune match tests your knowledge of music based on your selected category.

You have 15 seconds to guess each song title before you move onto the next song. Guess it right to accumulate points.

See a leaderboard at the end of your game to find out how you compare with your peers!

Code

Local Impact

ReactJs, arcGIS, CSS

Local Impact is a web app designed to show you some of the climate change factors in your area using ArcGIS maps from ESRI.

How is your area impacting climate change? What can you do to make an impact?

Whether you wish to make changes to your habits or legislature, we're here to help you figure out where to start.

Code

    function MapView() {
      const { location } = useGeoLocation();
      const { setAddress } = useAddress();
    
      const { update } = useUpdate();
      const { session } = useSession();
    
      const { dbLocation, setDbLocation } = useDbLocation();
      const [changeLocation, setChangeLocation] = useState(true);
      const [searchLoc, setSearchLoc] = useState();
    
      const { value, setValue } = useValue();
      const [Maps] = useState([
        <FireMap />,
        <AirBlotchMap />,
        <AirSensorMap />,
        <PowerPlantsMap />,
        <AltFuelMap />,
      ]);
    
      const handleSubmitGeoLocation = (e) => {
        e.preventDefault();
        setChangeLocation(true);
    
        navigator.geolocation.getCurrentPosition((position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
    
          setDbLocation([longitude, latitude]);
        });
      };
    
      const handleChange = ({ target }) => {
        setSearchLoc(target.value);
      };
    
      const handleAddressChange = (e) => {
        e.preventDefault();
        setAddress(searchLoc);
        setChangeLocation(true);
        setSearchLoc('');
      };
    
      const handlePut = () => {
        update(session.username, dbLocation[0], dbLocation[1]);
      };
    
      useEffect(() => {
        if (location[0] !== undefined) setDbLocation(location);
      }, [location]);
    
      useEffect(() => {
        setChangeLocation(false);
      }, [dbLocation]);
    
      return (
        <>
          <section className={styles.MapViewContainer}>
            <div className={styles.Location}>
              <form onSubmit={handleAddressChange}>
                <input
                  type="text"
                  placeholder="enter address or click get location 🌐"
                  value={searchLoc}
                  onChange={handleChange}
                />
                <button>Find</button>
              </form>
    
              <button onClick={handleSubmitGeoLocation}>Get My Location</button>
              <button onClick={handlePut}>Commit Location to My Account</button>
            </div>
          </section>
    
          {changeLocation ? <FetchingMap /> : Maps[value]}
    
          <section className={styles.mapSelectContainer}>
            <select
              className={styles.mapSelect}
              onChange={(e) => setValue(e.currentTarget.value)}
            >
              {webMaps.map(({ id, name }) => (
                <option key={id} value={id}>
                  {name}
                </option>
              ))}
            </select>
          </section>
        </>
      );
    }
    
      export default MapView;

Market Scrape

Javascript, React Native, Postgres SQL, Discord

A mobile app and discord bot that aggregates posts from multiple 2nd hand marketplace sources and displays them based on your search criteria

Marketplaces include Varage Sale and Craigslist.

Code

Tech stack

Languages

Javascript
HTML
CSS
C#
C++

Frameworks

Node.js
React
Express
Webpack
Parcel

Tools

Github
Heroku
Netlify
Postman
pgAdmin
VS Code
PostgreSQL

API/Libraries

React Native
Twilio
React Testing Library
jest
ArcGIS Hooks

Nick Day

Hello and Welcome!

Projects

SOAK: What Where When

ReactJs, SCSS, PWA

Code

Fingerpaint

ReactJs, Material UI, SCSS, PWA

Code

Tune Match

ReactJs, arcGIS, CSS

Code

Local Impact

ReactJs, arcGIS, CSS

Code

Market Scrape

Javascript, React Native, Postgres SQL, Discord

Code

Tech stack

Languages

Frameworks

Tools

API/Libraries

Testimonials to come

Methodologies to come