Skip to content

Latest commit

 

History

History
429 lines (295 loc) · 19.9 KB

FullDocumentation.md

File metadata and controls

429 lines (295 loc) · 19.9 KB
Raw

Who's Fake News Capstone Project - Full Documentation

Table of Contents

  1. In-progress Updates
  2. Research for the Project
  3. Tools Used Throughout the Process
  4. Tutorials Found
  5. Website Creation
    4.1. Website Dependencies Added
    4.2. Website Accessibility Measures Taken
    4.3. Website Design Techniques Used to Get People to Interact
    4.4. How React Components and Naming Conventions were used
  6. Extension Creation
  7. Backend Creation
  8. Future Work
  9. Issues during Process with Solutions if available
    9.1. Machine Learning Issues
    9.2. Website Issues
    9.3. Extension Issues
    9.4. Backend Issues

In-progress Updates

Last Updated 5/5/2020

Here's my current project progress in video form: https://youtu.be/7LlGvHPOp20.

Next goal is to hard code data to populate the website by using server calls and create an extension.

Research for the Project

At this time, the research for this project can be seen in my final paper here.
You can also view my poster created for this project here.

Tools Used Throughout the Process

postgreSQL for Windows

Ways to check the accessibility of the website

Tools to test the readability of the conent

Tools to help translate react apps into different languages

Tools to check color constrast

Tools to create color palettes

Tools for place holder images

Tutorials Found

Tutorials about connecting react app with a backend:

Tutorials on how to translate react websites

Tutorials on Sci-kit learn for the future machine learning aspect

Website Creation

I started with a react template instead of starting from scratch so that I could quickly get my bearings since I only had 1 month to get this part up and running. I've put information about the template I used below.

React, React Router, Redux, and Redux Thunk boilerplate

Website Dependencies Added

Here's a list of dependencies I added throughout this project.

  • npm install and yarn install

    • adds all the node packages needed
    • needs to be run in all three folders if you want to use them.
      • if you just want the client folder, you don't need to run it in the server or parent folder
      • you just have to be sure that you run the start command in the right place
      • you can see what commands you can run with npm or yarn by looking at the package.json file and looking at the area that says "scripts"
        • underneath there are commands in "" and are usually blue followed by a colon with what it does in "" and usually orange

  • Bit

    • npm install bit-bin --global
    • "Bit is an open-source cli tool for collaborating on isolated components across projects and repositories."
    • "Use Bit to distribute discrete components from a design library or a project into a standalone reusable package and utilize it across applications."
    • Info about Bit from npmjs
    • Bit Documentation
    • I will use this more in the future to make sure my code is resuable.

  • React-Bootstrap

    • npm install react-bootstrap bootstrap
    • UI component library
    • "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
    • Info on React-Bootstrap

  • React Icons

    • npm install react-icons --save
    • "Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using."
    • Info on React Icons

  • Semenatic UI React

    • yarn add semantic-ui-react
    • add this link to the of your index.html file. 
      • <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
    • "Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets. Install the React components and choose a theme that suits your needs."
    • More information on Semenatic UI

  • Filepond for React

    • npm install filepond react-filepond --save
    • npm i filepond-plugin-file-validate-type --save
    • More info in the Uploading files section under Info about React Components or Libraries
    • There are some issues with filepond accepting certain file types

Website Accessibility Measures Taken

  • Made sure all of my content was at 5th grade reading level

  • Made sure all the colors on my website have the proper contrast ratio in accordance with the Web Content Accessibility Guidelines

  • Made sure every page is responsive and will scale well for mobile and tablet devices as well as laptops

  • Made sure important info was put at the top of the page and that I follow common design practices

    • This ensures that people will know exactly what they need to do without scrolling and that people who may have some impairment can reasonably find key things like the Nav bar and the Home link without much searching.

  • Made sure that the relative paths to the pages are simple and make sense so that users can find pages more simply if they can't use the links.

  • Made sure the color palette would be okay for people with color blindness

  • Created FAQ, Tutorial, Similar Services, and Feedback pages for the website

  • Made sure every image has alt texts that matches the image

  • Creating documentation about every step of the process

Website Design Techniques Used to Get People to Interact

References for how to design homepages:

Info about React Components or Libraries

Info about what Hooks are for React

Info on Scrolling

Info on Forms:

Possible react component for footers

Info on Uploading files in React

Info on Filtering

Small delete buttons for things like filters

Using from Material UI

  • npm install @material-ui/core
  • add this link to the <head> component of the index.html file <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  • npm install @material-ui/icons --save or yarn add @material-ui/icons

React Component Libraries

I found a lot of these libraries from https://blog.logrocket.com/top-10-react-component-libraries-for-2020/

Info on CSS things:

Extension Creation

Info on Extensions:

More coming soon.

Backend Creation

Coming soon.

Future Work

Issues during Process with Solutions if available

Machine Learning Issues

Coming soon.

Website Issues

Issues with the boilerplate

  • Need to fix router situation by adding a tag around the tags and by importing BrowserRouter as Router from react-router-dom
  • Where I found the solution to the issue
  • More details of what exactly I’ve done can be seen through my github commits

Parsing error: Cannot find module '@babel/helper-validator-identifier'

This was the error I got:

./src/index.js
Line 0: Parsing error: Cannot find module '@babel/helper-validator-identifier'

I fixed it by installing this: npm install --save-dev @babel/helper-validator-identifier

Issues with Filepond

  1. It is not accepting .doc or .docx even though I have the right format and MIME type
  2. Can’t copy and paste a url into the file pond area
    • So I’m going to need to have a separate form input for urls

Broken Aria Reference

I basically had to remove the labeledby reference point because it wasn't pointing to any other component.

Extension Issues

Coming Soon

Backend Issues

Coming Soon