garrettfreshwater-nss / c-p-r

Front-End Capstone for Nashville Software School.

CPR - Copy Paste Refactor

CPR is a React web app with full CRUD functionality that allows users to keep track of code snippets from past projects and view other Users Snippets. Users can comment on other users Code Snippets offering advice or asking for help. Users can edit and delete their code snippets. Also Users can Filter code languages to find a specific snippet. Prism.js was used to display the code documentation formatting.

Installation

In your terminal run git clone SSH KEY HERE

cd into the project directory

From the main directory, run npm install to install dependencies

In Root Directory run...

npm start

---

Database sample

Create a json file named database.json with the provided sample data and run a json server watching database.json on port 8088

{
  "users": [],
  "code": [],
  "notes": [],
  "codeTypes": [
    {
      "id": 1,
      "codeId": 1,
      "type": "csharp"
    },
    {
      "id": 2,
      "codeId": 2,
      "type": "jsx"
    },
    {
      "id": 3,
      "codeId": 3,
      "type": "javascript"
    },
    {
      "id": 4,
      "codeId": 4,
      "type": "dotnet"
    },
    {
      "id": 5,
      "codeId": 5,
      "type": "css"
    },
    {
      "id": 6,
      "codeId": 6,
      "type": "ruby"
    },
    {
      "id": 7,
      "codeId": 7,
      "type": "python"
    },
    {
      "id": 8,
      "codeId": 8,
      "type": "json"
    },
    {
      "id": 9,
      "codeId": 9,
      "type": "django"
    }
  ]
}

---

Usage

1. Click on "Login" button
2. Register a new user
3. Navigate to the "add code" tab on the navbar
4. Click "submit" button on add code form and add new code snippet
5. Navigate to the "your code" tab on the navbar and add view your code
6. Navigate to the "select language" dropdown and click a language to filter code by coding language
7. Navigate to "Dashboard" view on navbar to view all other users code snippets
8. Navigate to the "select language" dropdown and click a language to filter code by coding language

c-p-r's Issues

Dashboard styling

Providers

File structure for project

description

Research Prism.js

Research

Implement

Login

Moment.js

Research

Implement

Page styling

User auth

Test

Header

Entry boii, cool

• Dis Task be like, dis za component preview

• Dis Task

• Dis Task

Providers

Providers

• Users
  Given a user wants add a new room

• Code
  Given a user wants to view all their rooms

• Notes
  Given a user wants to edit a Room name

• CodeType
  Given a user is on the room list and wants to remove a room

Card Styling

Login/Logout styling