Rxcellent

Team 4 set out to build a pharmacy e-commerce application where a user could receive and refill their prescriptions without the need to log in and have the option to shop for other items commonly found in a pharmacy.

Technology Stack

Rxcellent is a full-stack JavaScript project.

• Frontend:
  • HTML, CSS, JavaScript
  • React as the main UI framework
  • Vite as build engine and front-end server
  • TypeScript for type safety upon JS
  • MUI for UI components
  • React-Redux, React-Query, React-Router, Axios
  • ESLint and Prettier for code formatting
  • Husky as Git hooks tool
  • Vitest as test automation tool with React Testing Library

• Backend:
  • Node.js as JavaScript runtime
  • A template build upon Express.js as Node.js framework
  • Mongoose.js as MongoDB client
  • Bcrypt, JsonWebToken, NodeMailer
  • ESLint and Prettier for code formatting
  • Husky as Git hooks tool
  • Vitest as test automation tool with supertest and mongodb-memory-server

A list of Completed Features

• Main Page
  • The main page works as a hub for the rest of the software. It offers a variety of options for the user to follow.
• Medicines Page
  • This page allows users to visualize all the medicines offered at our website. It also allows users to visualize price and be able to sort them by categories.
• Search Bar
  • This Search Bar feature allows users to search a specific medicine. It will display on the Medicines Page, and allows for searching base on the name of the medicine.
• Doctor Log In and Prescription Creation
  • One of the main features of our website includes automatic prescription creation and verification. With this functionality, all the doctors we have registered on our system will be able to log in and generate prescriptions for their clients.
• Prescription Email
  • Once the doctor generates a prescription, it will automatically send an email to the patient email provided in the prescription creation. This email will contain the prescription number that the patients must save so they can use the site.
• Prescription-Based Log In
  • Users only need their Prescription Number and their Date of Birth. They will input those into the appropriate field, and the system will recognize the patients, and automatically add their prescription medicines to the Shopping Cart
• Shopping Cart
  • Users are able to add medicines that they are interested in buying to the Shopping Cart. This feature will keep track of all the medicines added, including the ones in their prescriptions.
• Separate Prices
  • In the checkout page in the Shopping Cart, users can see what will be their total cost, and be able to see the cost for all their Prescription and Non-Prescription based medicines.

Requirements Management Tool using Pivotal Tracker

Development Configuration Instructions

Start the project

• (If you haven't already cloned the repo) git clone https://github.com/BUMETCS673/group-project-team4-js.git

• To install all dependencies, run $ sh build.sh in project root directory, or

  • (In project root directory) npm install
  • (In project "be" directory) npm install
  • (In project "fe" directory) npm install

• (In project "be" directory) npm run start to run backend server
• (In project "fe" directory) npm run dev to run frontend server
• Go to url -> localhost:5673

Team members

Team member names and each member's contribution

Ryan Burns - Team Leader

• My main focus was on the front-end I implemented the category section on the landing page and worked on (but Christol and Zahit completed) the searchbar and the shopping cart. I added over 100 documents to our Databasse that would allow our team to populate the shopping page with products.

Zahit Odabas - QA Leader

• General design of the system, possible use cases and features
• Mongo Cloud Database and backend integration
• Backend => Backend template (node + express) configuration with Tsing, Backend project structure, Item(medicine) model, controller, API and tests
• Frontend => Frontend template (vite) configuration with Christol
• UI => Navbar, Searchbar, Banner, Prescription Drawer, Shopping page Category Filter, Shopping Cart
• Checkout Page with all UI, functionalities and backend integration. Frontend test cases
• Code reviewing, bug-fixing, refactoring
• Contribution to project documentation. Wrote the STD document

Chenfei Yu - Configuration Leader

• UI design of the app
• Configuration of ESLint and Prettier for code format check.
• Configuration of git hooks for commit messages formatting and pre-commit code check and fixes.
• Designed and initialized frontend code structure.
• Implemented home page, shopping page, and create prescription page. Functionalities included: Search for non-prescribed medcines, filter items by category, dynamically search for prescribed medicines in doctor's page and add them to prescription, retreive prescription.
• Integration of frontend and backend.
• Contributed to SPPP document.

Youqing Shao - Security Leader

• Sign in / up, change password (full stack)
• Designed jwt, developed permission authentication
• Backend template (node + express) configuration with Zahit
• Project security docs and actions
• Node.js middleware and error interceptpor
• whole project API request interaction
• Email system for signup and order
• Deployment herotu & aws clound
• new technology exploring

Nivan Hanjura - Design and Implementation Leader

• Learn the typescript and figma design.
• Designing of context api for the state management.
• Added the logic for cart implementation.
• Added frontend test cases.
• Added the logic and implementation for Doctor UI.

Ignacio Joaquin Moral - Requirements Leader

• Requirements:
  • Generated User Stories in Pivotal Tracker
  • Kept track of User Stories completion
• Backend:
  • Generated Prescription Model, Controller, and Route
  • Generated some tests for Prescription Model and API
• Documentation:
  • Updated Management Plan in SPPP for Iteration 3
  • Created and Updated Requirements in SPPP
  • Created Class Diagrams for SDD
  • Updated Database Design in SDD for Iteration 3
  • Created Business Logic Diagrams in SDD