Skip to content

Alira-Coffman/BioBot-Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BioBot Coding Project

📂 Description

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

⬇️ Installation

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).

⚙️ Run

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

🧠 Use Cases/Brainstorming

  • 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

🎨 Design

Wireframe

Wireframe

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.

Design Calls

  • Colors that matched the BioBot Theme: I made sure to keep the main colors that were used on BioBot Website.
    • Dark Blue DarkBlue
    • Light Blue LightBlue
    • Yellow Yellow
    • Off White Off White
  • 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.

🔨 Desired Improvements

  • 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.

📹 Video Demonstration

Video Demonstration

About

Created for Biobot

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published