OCAT

Purpose and Context

• Web Development

  • The goal of this application is for you to explore and demonstrate understanding of web development using some of our core technologies. You must use React.js on the client-side, a Bootstrap template for the UI, Node.js/Express for the server-side, Bookshelf.js as the ORM, restify for the API back-end, PostgreSQL as the database, and Bcrypt to encrypt passwords in PostgreSQL. You must also create a git repository on github.com and push all of your code there frequently.

• Criminal Justice

  • The Risk Assessment System is a Web-based Application that allows for assessing the risk of offender recidivism. By assessing the likelihood that an offender might commit another offense, the system helps officers determine how best to help the offender moving forward. In ORAS, we do this by automatically generating caseplans, reports, and maintaining the full timeline of an offender's record while they exist in the system. This process was developed based on research performed by the UC Corrections Institute (UCCI) and has been proven to reduce the recidivism of offenders over time.

• The OCAT Internship Project

  • Through OCAT, you will have the opportunity to explore a core piece of ORAS by building an interface for both creating assessments and monitoring assessments previously performed by users. Your ITSC mentors will guide you through this process, but we highly suggest that you make frequent use of your OCAT internship peers. To be clear, we do not want you copying code or handing out answers to other interns. However, this is a collaborative process, and asking questions when you're confused is an important part of learning! On the flipside of that, teaching someone else or helping them through a problem is the best way to further cement that knowledge in your own mind. So ask questions when you're stuck and help point your fellow teammates in the right direction! Good luck!

ITSC Guidelines

• Setup
  • PLEASE ask if you're having trouble setting up your project repository, project board, first branch, or development environment. The mentors are here to help you! We want to make sure you get off to a great start and this part is often the most challenging, so please don't hesitate to come to us immediately with any setup concerns!
• Hour/Day Policy
  • If you've been stuck on something for two hours, ask a fellow intern!
  • If you've been stuck on something for a full day, ask a mentor!
• Process for Getting Unstuck
  1. Search through the available resources in this document (located at the bottom of the page and throughout)
  2. Google! This is your most valuable resource and learning how to search the internet for your answer is going to be your most valuable skill moving forward! Forum resources like StackOverflow can be extremely helpful. In web development, there's almost always someone who has encountered your problem before. The trick lies in finding that answer!
  3. Ask an OCAT internship peer
  4. Ask an OCAT mentor

Code Review Guidelines (reference this later when doing peer review)

• Every Issue should be code reviewed by another OCAT internship-peer
  • Code Review Process
    1. Making a Pull Request
       1. Create a Pull Request (PR) from your development branch (your current branch) into master (the main branch)
          • Creating a Pull Request
       2. Reach out to one of your fellow OCAT interns and ask them nicely to review your code. Include a link to the Pull Request you'd like them to review
       3. Take any suggestions with a grain of salt. Remember, this is YOUR application. Make any changes you agree with and then merge the Pull Request
    2. Reviewing a Pull Request (PR)
       • Reviewing a Pull Request
         1. Go the link supplied by whichever OCAT intern has requested a review from you
         2. Look through their code, offering suggestions and critiques
            • You should try to:
              1. Understand each part of the code and look for ways to improve it
              2. Be kind. Remember that this is someone else's work that they've spent a lot of time on
              3. Balance criticism with praise. It is tempting to only point out the negatives. If you see something you like, tell them!
              4. Feel free to ask questions. In the end, this is a learning process. Feel free to ask questions if you don't understand something in the code.
    3. After a Pull Request (PR) has been approved, merge it and move on
       • Merging a Pull Request
       • Once merged, create a new branch from master and start on your next issue

Technologies

• Version Control
  • git and Github
• Front-End Framework
  • React.js
  • Style Toolkit -> Bootstrap
• Back-End Framework
  • Express
  • Node.js
  • Restify
  • Database ORM -> Bookshelf.js and knex.js
  • Password Encryption -> Bcrypt
• Database
  • PostgreSQL
• Package Manager (for Node.js)
  • npm
• Task Runners
  • webpack and/or gulp

Architecture

The application must be architected with two "layers" using an API model and pseudo-Microservices (the "skeleton" for this has already been provided within the template repository you'll start with). Once the HTML page is rendered, all future communication between the client/server should be done using HTTP requests sending/receiving JSON.

• API: thin layer allowing for directing of requests from the front-end to the microservices. Allows for outside integration.

  • Basic API explanation

• Microservices: complex layer of services that accept requests from the API and communicate with the database.

  • Basic Microservice explanation
  • CRUD Basics

• The below diagram resembles what you should attempt to reproduce:

Roles

• User
• Supervisor

Tasks

A. Setup

1. Copy the Template Repository NOTE: You can name this whatever you want, just make certain that you leave it "Public" so that others can view your code
   • Template:
     • OCAT_Intern_Template
   • Resources:
     • Creating a Respository from a Template
2. Copy the Template Project Board
   • NOTE: This is something you should keep constantly up-to-date. It is how we will track your progress, and it will facilitate code review and collaboration with your OCAT internship peers.
     • Template:
       • OCAT Project Board
     • Resources:
       • Copying a Project Board
3. Add the Provided Issues to your Project Board
   • Issues:
     • OCAT Issues
   • Resources:
     • Creating an Issue
     • Adding Issues to a Project Board

B. Get the Application Running

1. Clone your new repository
   • Cloning a Repository
2. OCAT
   • Navigate into the directory
   • npm install
     • npm install
   • npm run build
   • Open a second terminal
     1. Terminal 1
        • npm run dev
     2. Terminal 2
        • npm run webpack:dev
3. API
   • Navigate into the directory
   • npm install
     • npm install
   • npm run dev
4. Database
   • PostgreSQL Setup Tutorial
5. Verify that the config.json for both directories is correct
   • Begins as config.example.json and needs to be modified to match your environment

C. Requirements

• NOTE: Please do any login-related pieces near the end. Otherwise, you may spend the entire time developing a login process and you will not have much to show come presentation time.
• NOTE: All work should be done on a separate "branch" so that it can be code reviewed. Below are instructions on how to create a new branch:
  • Creating a branch

4. Allow Users to submit an assessment with the following information
   • NOTE: An "assessment" has a type, five questions, and two responses per question -> Use the example info here: OCAT Assessment Info
     • Instrument (text)
     • Cat Name (text) -> Example: Mr. Fluffykins
     • Cat Date of Birth (date)
     • Score (integer calculated by the sum of all responses)
     • Risk Level (text - low [0-1], medium [2-3], high [4-5] determined by the calculated score)
     • Audit log of when the assessment was created/deleted (datetime with timezone)
   • Recommend using React Hook Form
5. Implement a bootstrap style template to make your site look presentable
   • NOTE: Do not spend too much time on this. We want the application to look good but not at the risk of hindering the overall completion of your project
6. Allow Users and Supervisors to sort/search/filter/review submitted assessments from a list
   • Should only return non-deleted assessments
   • The list should include (at minimum) cat name, cat date of birth, instrument, score, risk level, and creation date
   • Recommend using React Table
7. Allow Supervisors to log into the system
   • This must authenticate against the database using Bcrypt
8. Allow Supervisors to delete assessment submissions
   • This should be a soft delete in the database (a soft delete does not remove the data from the database, it sets a flag on the record so it does not show up on the front-end)
   • Recommend using bookshelf-soft-delete
9. Prepare your presentation!

Navigating the OCAT File Structure

Resources

• React

  • Intro to React
  • Main Concepts
  • Video: React Tutorial for Beginners

• React Routing

  • React Router
  • react-router-dom's npm page
  • Video: React Router Tutorial

• Bootstrap

  • w3c tutorial
  • Bootstrap Templates
  • Video: Make a React Website with Bootstrap - Beginners

• Express

  • Express Application Generator
  • Express API Reference
  • Video: Learn Express & Node.js in 15 Minutes

• Bookshelf.js

  • API Reference
  • Bookshelf.js: A Node.js ORM
  • Helpful Example
  • More Examples
  • bookshelf's npm page
  • Video: Bookshelf.js Tutorial - An Introduction to Bookshelf.js

• React.js HTTP Requests with Axios

  • Using Axios with React
  • Axios' npm page
  • Video: How to use Axios with React

• React Hook Form

  • Main Page
  • Examples
  • react-hook-form's npm page
  • Video: React Hook Form Tutorial

• React Table

  • Main Page
  • How to Use React Table
  • react-table's npm page

• Bcrypt

  • Hashing Passwords with Node.js and Bcrypt
  • User Authentication using Bcrypt
  • bcrypt's npm page

• PostgreSQL

  • Documentation
  • Download
  • PostgreSQL Setup Tutorial
  • Access the Database
    • Windows developers should use -> pgAdmin
    • Mac developers should use -> postico

Advanced Resources

• Microservice Advanced Concepts

  • Orchestration vs Choreography

• Design principles

  • SOLID: The First Five Principles of Object Oriented Design
  • DRY: Dont Repeat Yourself
  • KISS: Keep it Short and Simple

• Create a PostgreSQL Docker Container

  • Steps for Windows:
    • Update to latest feature update: Get the May 2020 Update
    • Download Docker Desktop: Docker
    • Open a terminal and run this command: docker run -p 5432:5432 --name postgres -e POSTGRES_PASSWORD=YOUR_PASSWORD_GOES_HERE -d postgres
  • Steps for Mac:
    • Download Docker Desktop: Docker
    • Open a terminal and run this command: docker run -p 5432:5432 --name postgres -e POSTGRES_PASSWORD=YOUR_PASSWORD_GOES_HERE -d postgres

• Functional Programming in Javascript

  • Playlist from Fun Fun Function
  • Useful MDN Links
    • .map
    • .filter
    • .find