Coder Social home page Coder Social logo

enable's Introduction

You can check out the project here

Final Project Boilerplate

The project has 2 main folders:

  • client (React Front-End)
  • backend (Express Back-End)

Run npm install in both folders to install the dependencies.

To start both servers:

npm start in the client folder npm run dev in the backend folder

Final Product

Person with disability dashboard (Family dashboard)

"Person with disability dashboard (Family dashboard)"

Support worker dashboard

"Support worker dashboard"

Admin dashboard

"Admin dashboard"

Project Stack

  • React, React Router, Reactstrap
  • Node.js, PostgreSQL
  • CSS (grid, animation, variables, etc.)

Project Features

  • Enable has 3 different dashboards, Family, worker, and Admin.
  • Based on the type of user, user will be shown a specific dashboard.
  • Family users have the ability to create an assiatnce request (Providing assistance description, hourly rate, type of pay, and the ability to choose the support worker of their choice).
  • On the other hand on the support worker dashboard, workers can receive the request and have the ability to either accept or reject the request. The family will be notified either way.
  • After a session has been done, worker is able to upload any bill images for reimbursement, also worker is able to clock in and clock out the session afterwards.
  • Family is able to write a review and provide ratings after each session
  • On admin dashboard, admin is able to select a time frame and choose a family name, to access the automatically generated invoice, which includes the bill image as well.
  • The invoice is downloadable so, admin can easily download the PDF and sends it to the family to make the payment.

Available Scripts

This project was bootstrapped with Create React App.

Back-End Setup

  • create a postgres database. At the terminal, type the following:

    createdb database_name -O username

    replace database_name with your database name and username with your own user.

  • create a .env file with your database settings. Look at .env.example for usage.

  • Modify the sql scripts under db/schema/ to create the tables and seed the data.

  • run npm run reset that will run the reset scripts in package.json to reset the database. Modify the reset script in package.json accordingly:

"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www",
    "reset": "psql -U labber -d final_project < ./db/schema/create.sql && psql -U labber -d final_project < ./db/schema/seed.sql"
  },
  • replace labber with your own username and final_project with your database name

  • currently, the users route is setup with a get and a post as examples. Modify it according to your needs and/or create additional route files.

Client Setup

  • A custom hook in hooks/useApplicationData.js contains the state.
  • a useEffect with an axios request is adding the users in the state. Modify the initial state and the useEffect according to your needs.

enable's People

Contributors

fatimasajadi avatar reshmaushakumari avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.