assayplate's Introduction

AssayPlate

Plan experiments with this Assay Plate web app!

This is primarily a MERN stack demo that showcases many common features of a full-stack app (responsive frontend, stateless authentication, public API, etc.). I summarized my learnings from building this demo on my website.

Notable Features:

Frontend:

user authentication -- each user can save multiple plates to the cloud.
common editing features including input validation, unsaved changes warning and restoration to previous save.
intuitive, reactive GUI
- draggable assay plate (allows editing big plates on smaller screens)
- invalid input is allowed when editing for planning purposes
- mobile friendly in landscape (soon in portrait, too)

Backend:

more input validation! Comprehensive input validation... hopefully.

API

Users can edit and save multiple plates at once through interfacing with our API. Postman works great!

API documentation is available here

assayplate's People

Contributors

Watchers

assayplate's Issues

Backend optimizations

finer-grained update of individual wells (to save bandwidth)
update multiple MongoDB documents in batch (rather than doing it one at a time in the backend logic). This includes batch-deleting dead references as in GetPlatesAndUsername().
do not send redundant info like each well's _id
Document API with Postman

Low return-on-investment features

Frontend optimizations

a more efficient way to present the dropdown menu? Maybe don't use the entire cache as the options?
a more modular way to add a confirmation dialog to multiple different buttons that either proceed or cancel the action?
put constant styles into CSS files
update state only when necessary. More examples of "instead of onDrag, onStop"? (maybe don't control input fields entirely; only update state on submit?)
modularize TopBar.jsx