Skip to content

ChandanShukla/MedEasy

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
Backend
Backend
 
 
Frontend
Frontend
 
 
.DS_Store
.DS_Store
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

CSCI5709 Project - Advanced Topics in Web Development

(MedEasy Application - Group 18)#

MedEasy Objective

  • The primary goal of our Web application, Med Easy is to make it easier for the public to order medicines and other medicinal equipment remotely – online, by becoming a one-stop-shop to all thing’s pharmacy. While there are several pharmacies deployed everywhere, there are still places where these medical stores are not always accessible. For example, there might be a medical store nearby, but it might not be open during some hours and not everyone is expected to be able to physically go to the store and pickup their medicines. This is especially true in today’s pandemic plagued world where social distancing and isolating have become the new normal.

  • To tackle these kinds of scenarios and make the pharmacy much more accessible to everyone, we have come up with the idea of Med Easy. For the first phase of our application, we are targeting the most essential features to be readily available for the users and then in the later stages of our application we can improve the scope of our project depending upon the feasibility.

  • Date Created: February 10, 2022

  • Last Modification Date: April 7, 2022

Group 18's - Git Details (this would be group repo links)

Authors

Instructor

Teaching Assistants

  • Hari Arunachalam [(@haria)]
  • Nikunj Goenka [@goenka]
  • Shehzeen Huda [@shehzeen]
  • Yash Jaiswal [@yna]
  • Bala Sundeep Krishna Dasar [@bdasari]
  • Kshitij Paithankar [@paithankar]
  • Neharika Sehgal [@nsehgal]
  • Gurleen Saluja [@gsaluja]
  • Ana Khan [@anan]
  • Mansi Singh [@mansis]

Below is the demo/sample user for testing our application

For testing Search Box functionality it is not needed but for other features, you can use as below:
Normal User
email: testuser@gmail.com
password: Test@123

Admin User
email: testadmin@gmail.com
password: Test@123

Payment Card details:
Card No: 4242 4242 4242 4242
Card Expiry: 12/34
Card Cvv: 123
Name on Card: Any
Pin Code: Any

For the Backend part of our project, it communicates with Frontend using APIs.

  • models - all the application-related common models.
  • controller - controller for all the features.
  • routes - routes/API's.

For the Frontend part of our project it is divided as below:

  • containers - all features are located in the container (for instance my feature SearchResults can be found there) accordingly to everyone else's as well.
  • components - all components for eg. Header, Footer, Layout many more can be found here.

For Frontend of our Application

  • ReactJS - Javascript library for UI
  • react-bootstrap - Used to incorporate bootstrap components to style our parts.
  • axios - Communicaiton of Backend with API and fetching the data.

For Backend of our Application

  • NodeJS - Node JS learning for our application
  • Express - Express learning for our application

For Database

Sources Used to learn and understand some functions related to react

Feature - Checkout and Payment

I have taken the feature of checkout and payment to be developed for the Assignment 3 task. I have designed the payment feature for the MedEasy application which i have integrated with the stripe payment interface. I have created the Checkout Page where the user fills in the shipping details, then user click on place order. On the Payments page there is information for billing address after which the user can select the payment type. Currently there is only one payment type that is credit/debit card. Once we click on the place now button, you gets redirected to the Stripe checkout session where the user need to fill in the card details(test card) that are provided below. Once the user fills in the details the mandate details and click place order then it get validated from the stripe end and then you get redirected to order placed page. On the Success order place page there is option to view order details, once the user click on the order details button then, it get redirected to Order Details page where he will be able to see his orders.

pre condition - user must be logged in card number - 4242 4242 4242 4242 expiry date - 1234 cvv - 123

name - any name you can add Zipcode - 6 digit number

files developed by me for the front end application

Below are the various folder and files that arepresent inside the Frontend folder that is present inside the root directory

Files developed by me for the backend application

  • Folder - [/Backend/controllers] orderController.js stripePaymentController.js

  • Folder - [/Backend/db] connect.js

  • Folder - [/Backend/models] orderModel.js

  • Folder - [/Backend/routes] orderRoute.js stripePayment�Route.js

  • Folder - [/Backend/] App.js Server.js

Code Integration

Checkout and Payment module was directly dependent on the cart management modeule and user management module. As only the registered user must be allowed to place the order by paying for the goods cost. At the same time if there would be no item in the cart then user cannot buy any product. I have actively collaborated with the team members who were working on these modules for a smooth integration experience. Overall worked with the team to develop the common elements that were used throughout the website. Finally we have intergated the code, build our react application and then deployed our final application on the Heroku platform.

Tools and softwares used

Sources Used

NaveElements.jsx

export const Nav = styled.nav`
    background: linear-gradient(to right, #1A374D , #11999E 60%, #E4F9F5);
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem cacl((100vw - 1000px)/2);
    z-index: 15;

    @media screen and (max-width: 1200px){
        transition: 0.8s all ease;
    }
`

export const NavBrand = styled(Link)`
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 1.2rem;
    height: 100%;
    cursor: pointer;
    margin-left: 0.5rem;
    font-size: 25px;
    &.active{
        color: #fff;
    }
`

export const NavLink = styled(Link)`
    color: #1A374D;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem;
    height: 100%;
    cursor: pointer;
    margin-left: 0.5rem;
    &.active{
        color: #11999E;
    }
    &:hover {
        color: #11999E;
        border-bottom: 3px solid #147581;
      }
`

export const SideBarMenuWrap = styled.div`
  color: #11999E;
`;





export const SideBarLink = styled(Link)`
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  text-decoration: none;
  list-style: none;
  transition: 0.2s ease-in-out;
  color: #E4F9F5;
  cursor: pointer;
  
  &:hover{
    color: #11999E;
    background: #E4F9F5;
    transition: 0.2s ease-in-out;
  }

`;



export const SideBarMenu = styled.div`

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 80px);
  text-align: center;
  
  @media screen and (max-width: 480px) {
    grid-template-rows: repeat(6, 60px);
  }
  
  
`;

Utilised these to build the responsive navbar, it was an efficient code and the end result was great. I have modified this code as per our applications requirement

Getting Started with Create React App

This project was bootstrapped with Create React App.

Prerequisites

  • Gitlab as code management repository.
  • Heroku CLI for deployment.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Running application locally

  • Clone the git repository 
    $git clone https://git.cs.dal.ca/ngoswami/csci5709_group18.git
  • Open with Visual Studio or any preferrable ide.

Built With

Citation for all the images used from online

  1. Surgical Mask = https://www.amazon.in/Disposable-Surgical-FABRIC-Earloop-Certified/dp/B096B99BDW
  2. Thermometer = https://www.amazon.in/Dr-Trust-Waterproof-Flexible-Thermometer/dp/B07GSRD84M
  3. Metacin = https://www.apollopharmacy.in/otc/metacin-tablet
  4. Ibuprofen for kids = https://www.heb.com/product-detail/h-e-b-children-s-ibuprofen-100-mg-oral-suspension-bubble-gum-flavor/483094
  5. Iburpofen Advil = https://www.tradeindia.com/products/ibuprofen-tablets-c6749541.html
  6. Azithromycin = https://zeenews.india.com/health/azithromycin-potential-covid-19-drug-may-increase-risk-for-cardiac-events-2310378
  7. Baby Wipes = https://www.amazon.in/Littles-Soft-Cleansing-Baby-Wipes/dp/B004X7545M
  8. Blood Pressume Machine = https://www.tradeindia.com/manufacturers/digital-blood-pressure-monitor.html
  9. Cough Drops = https://www.metromarket.net/p/kroger-honey-lemon-cough-drops/0004126037077
  10. Crocin = https://www.lybrate.com/otc/crocin-cold-flu-max-tablet
  11. Band Aid = https://www.band-aid.com/products/adhesive-bandages/skin-flex-bandages

About

No description, website, or topics provided.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages