University of Arizona Coding Bootcamp / Spring 2019
Our app is based on two principles:
- A single picture is worth a thousand words
- Todays website users are visually driven making our method of presenting news articles useful and therefore preferred
yarn start
Keith Downey / Derek Maloney / Alex Lialios / Miguel Peralta
https://github.com/Travo100/create-react-express-jwt
This setup allows for a Node/Express/React/JWT app which can be easily deployed to Heroku. The front-end React app will auto-reload as it's updated via webpack dev server, and the backend Express app will auto-reload independently with nodemon. The front end has been setup to use JWT as a way of authenticating users and routes. To understand it's structure better please refer to the following article here
Server-side article and using JWT:
https://hptechblogs.com/using-json-web-token-for-authentication/
Front End article on using the JWT on a react application:
https://hptechblogs.com/using-json-web-token-react/
https://react-table.js.org
A lightweight, fast and extendable datagrid built for React
http://neptunian.github.io/react-photo-gallery
Component used to build and maintain galleries. Decided to use this rather than our first choice (http://materliu.github.io/gallery-by-react/) -- mainly because this repo was really old, depended on an old version of React, and basically looked like a mess under the hood :(
// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
yarn add classnames
// Shown below is a sample link markup used to load the Roboto font from a CDN.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
// Install typface using yarn
yarn add typeface-roboto --save
Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.
https://newsapi.org/docs/get-started#top-headlines
Free API provider for news headlines. Our thought is to call the image prop from for display, and then link to news article
https://developers.thomsonreuters.com/all/api-overviews
I think this is free for students - will need to check
This is the tutorial that we used to get us going and establish some boilerplate code and folder structure
We set up a simple CRUD app, but we have some bugs. It uses mongo deployed on mLab
https://drive.google.com/file/d/1mzbbD3eqpL0oviJjLSQDebJrG2a4Ha3q/view
- React
- Node Server
- Express
- Mongo / Mongoose
- Get & Post
- Heroku
- Two Unused Libraries: Material UI, Standard JS or Prettier for coding standards
- User Auth: using JWT
- Polished front end
- MVC Folder Structure
- Coding Standards (Standard JS or Prettier)
- API security - keys, .env, etc.