Render Link

Contents

• About
• Tech Stack
• APIs Drawing Board
• Style Guide
• • Wireframe
• • Data Model
• Installation
• Testing
• Future Development

Why Skilled? - App Overview

This app helps Orange County students match their trade career interest to their local community college. The app provides a link to a YouTube video for a better explanation of the trade program and the list of community colleges that offer that trade.

TechStack

Tools, languages, and others

html	CSS	JavaScript	postgreSQL	Express
React	Node	Bootstrap	Render

APIs

Motivational quote	Auth0

Style Guide

Wireframe

Database Model

.

Installation

1. Clone the repo:

   https://github.com/Angel-Bazan/skilled

2. Install all NPM packages using this in the root directory:

   npm install

3. Database setup:

   1. Copy the root example environment file

   cp .env.example .env

   2. You can choose to edit .env or just use as-is.
   3. Run the following to setup the database with the seed file:

   npm run db:init

Set Up React client for auth0

If you want to try it with Auth0, the frontend needs to be setup with the following:

1. Copy the app's example environment file

   cp app/.env.example app/.env

2. The .env file allows the React app to use Auth0, and requires an Auth0 domain + client-id.

   • These can be obtained by signing up for an Auth0 account and Registering a Single-Page Web Application in order to get these values
   • This graphic from Auth0's guide may be helpful to locating them

Testing

Jest Testing

To run tests on the terminal:

• On client side run the following command:

   npm test

Future Development

• Incorporate a search funtionality to search a specific trade in my different cards
• Add a college tab where it has all the information from all the colleges
• Add a contact info where you can contact different counselors for the trade program