This project is meant to create a dynamic search functionality for kit ids. Users are able to obtain their shipping information. Backend - Built with Nodejs and Express. Frontend - Built with Reactjs
npm run postinstall
Note: This script will do a npm install for both the backend project and front end project. It can only be run from the main directory(i.e outside /backend and /frontend).
Front End and Backend need to be run in two seperate terminals.
In one termainal navigate into /frontend and run npm start
In another terminal, navigate into /backend and run node api.js
- User can view a search bar
- User can type id into search bar
- ID are made of numbers and _
- ID are x num of char long
- When user begins typing autocomplete is triggered
- ID that currently match are suggested
- User clicks on id or finishes their id
- User see’s shipping information
- User clicks on fedEx tracking number
- Goes to fedex
- User can go back to search
It was important to me to understand visually what the user pathway was. This helped to understand where hiccups may be, or things that prevented the user from continuing or frustrated them.
- Colors that matched the BioBot Theme: I made sure to keep the main colors that were used on BioBot Website.
- Accessiblity was a concern for me. Being able to use a screen reader, having alt text, or being able to navigate without a mouse. These concerns are discussed in desired improvements.
- The color scheme was contrasted enough to fulfill accessiblity concerns with sight. Although the selection box, I am not sure I would want to keep as dark blue.
- Logos: I included the logo icon in the tab for more consistent branding.
- Fill in - where needed so user does not have to: This is an important improvement in my opinion. Users don't like adding in unnecessary characters, by adding in the dashes for them(with the option of them entering still there), it would deter frustration.
- Add accessibility improvements: Using live region for screen readers, allowing for up down navigation, using role, aria live. And creating a more semantic environment.
- FEDEX tracking: I would like to add FedEx tracking to allow user to see their updates without having to leave the page.
- Better API Organization: Early on in the project I realized that seperating routes, controls and midware would be too much. I left routes as I had already complete it, and as the project expands this would be a good start.