Skip to content

BloomTech-Labs/nusite-fe

Repository files navigation

PartNerd

React Typescript code style: prettier

License: MIT You can find the official version of this deployed project at PartNerd.


PartNerd is an application that allows project owners and people with great ideas to add new projects to a database, an algorithmic controlled marketplace in order to match them with registered web developers who've built their matching profiles.

Deployed Front End (Staging)


Code Climate Score

Maintainability Test Coverage

Contributors

|Bradley Pitts| Stephen Tanksley | Joe Medrano | Andrew Speer | Tara Sherman| Danielle Baxter| Raymond Thurman|

Project Overview

Trello Board

Product Canvas

Key Features

Tech/frameworks used:

Built with:

Why did you choose this framework?

  • Scalability
  • TS Forces clean DRY code
  • Agile scalable components with MUI
  • Agile dev environment works well with React

Front end deployed to AWS (https://partnerd.dev)

Client Installation

git clone [repo]
cd [repo]
npm install
npm start

Back end built using:

GraphQL framework and API

Staging Backend delpoyed at Heroku

Master Backend delpoyed at Heroku

Getting started

To get the server running locally:

  • Clone this repo

  • npm install to install all required dependencies

  • **npm run build to build only if you would like to run the start script, otherwise:

  • npm run server to start the local server

  • npm test to start server using testing environment

  • npm run coverage to see test coverage

Backend frameworks

Node, Express, TypeScript, GraphQL, Apollo-Server

  • TypeScript to make a theoretically less error prone backend
  • GraphQL for it's performance
  • Apollo-Server is used to help communicate with the frontend of the application

Endpoints

With the nature of GraphQL, you will only have one endpoint, with the exception of the welcome route

Method Endpoint Description
GET / all users
POST /graphql graphql endpoint to test your queries

Data Model

USERS


{
  id: INT
  username: STRING (unique)
  first_name: STRING
  last_name: STRING
  company: STRING (optional)
  password: STRING
  email: STRING (unique)
  dev_experience: INT (optional)
  dev_education: INT (optional)
}

PROJECTS


{
  id: INT
  project_name: STRING
  project_avatar: STRING
  project_description: STRING
  project_owner: INT (optional)
  project_developer: INT (optional)
  completed: BOOLEAN
  marketplace: BOOLEAN
  showcase: BOOLEAN
}

Queries


query {
  users {
    first_name
    last_name
    username
    email
  }
}

query {
  projects {
    project_name
    project_avatar
    project_description
  }
}

query {
  user(id: 1) {
    first_name
    last_name
    username
    email
  }
}

query {
  project(id: 1) {
    project_name
    project_avatar
    project_description
  }
}

query {
  users {
    username
    projects {
      project_name
    }
  }
}

query {
  projects {
    project_name
    project_owner {
      username
    }
  }
}

query {
  projects {
    project_name
    project_developer {
      username
    }
  }
}

Mutations


mutation {
  signup(
    username: "test"
    first_name: "test"
    last_name: "test"
    email: "test@partnerd.com"
    password: "test"
  ) {
    token
    user {
      username
      first_name
      last_name
      email
    }
  }
}

mutation {
  login(
    email: "test@partnerd.com"
    password: "test"
  ) {
    token
    user {
      username
      first_name
      last_name
      email
    }
  }
}

Payment API

Stripe API

Environment Variables

_ DB_HOST - typically set to localhost for your localdb _ DB_NAME - name specified when creating your

  • DB_USER - set to postgres unless otherwise specified
  • DB_PASS - set to your local db password
  • JWT_SECRET - secret key for JWT hashing

Content Licenses

For all content - images, icons, etc, use this table to document permission of use. Remove the two placeholders and add you content to this table

Image Filename Source / Creator License
doodles.png Nicole Bennett Creative Commons
rings.svg Sam Herbert MIT

Testing

Package NPM name Why
React Testing Library @testing-library/react Main library for testing React Components in Jest
Apollo React Testing @apollo/react-testing Used to mock the Apollo Provider
Jest Dom @testing-library/jest-dom A companion to React Testing library that provides DOM element matchers for Jest
User-Event @testing-library/user-event A library that tries to simulate user events more accurately than fireEvent from React Testing Library

Other Scripts

* build - creates a build of the application
* start - starts the production server after a build is created
* test - runs all of the tests in __tests__ directory and prints out a test coverage report
* testDev - runs tests with `--watch`, so devs can get immediate feedback on changes

Pull Request Guidelines

  • Ensure any install or build dependencies are removed before the end of the layer when doing a build.
  • Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
  • Ensure that your code conforms to our existing code conventions and test coverage.
  • Include the relevant issue number, if applicable.
  • You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.

Documentation

See nusite-be repository README for additional details on the backend of our project.