Pick Em is a investor application that makes it easier to research stocks and make better investment decisions. Our easy to use app provides both beginner and sophisticated investors with an automated system that analyzes key financial indicators. Pickem will allow the customer to determine whether a buy signal is warranted.
| Stefan Clem | Colin Dismuke | Bruce Cabanayan | William Yturralde | Rob Salzberg | Ryan McLaughlin |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 LinkedIn |
LinkedIn |
LinkedIn |
LinkedIn |
LinkedIn |
LinkedIn |
- Put your environment variables at
/server/.env - Inside
/serverinstall all dependencies and spin up the server:$ yarn && yarn start - Inside
/clientinstall all dependencies and start the front-end:$ yarn && yarn start
Now just open http://localhost:3000 to visit the frontend, or query the server endpoints directly at http://localhost:5000.
yarn test: When run inside the /server directory, runs all backend tests (work in progress)
yarn test: When run inside the /client directory, runs all frontend tests (work in progress)
From the root directory:
cd client && yarn start: Runs the frontend client
cd server && yarn start: Runs the backend server
Note: Make sure you delete
node_modulesdirectories when dependencies change between merges.
These reside in the /server/.env file, which is ignored by git for security reasons.
TODO: Add all required environment variables.
| Variable | Description |
|---|---|
XXXXX |
..... |
Our Heroku backend lives at https://pickemm.herokuapp.com/.
Make sure you define the JWT_SECRET and NODE_ENV variables in the Heroku dashboard.
The app front-end is deployed on Netlify and the back-end is deployed on Heroku.
The front-end is deployed via Netlify. For the build settings the base directory is client, build command is yarn build, publish directory is client/build
TODO: How to set up back-end deployement
TODO: Fill our the req and res columns of the API tables.
| Method | Endpoint | Request | Response |
|---|---|---|---|
| GET | /api/users | ||
| POST | /api/users | ||
| GET | /api/users/:id/:acct | ||
| GET | /api/users/:uid | ||
| PUT | /api/users/:uid | ||
| DELETE | /api/users/:uid |
| Method | Endpoint | Request | Response |
|---|---|---|---|
| GET | /api/favorites | ||
| GET | /api/favorites/:uid | ||
| DELETE | /api/favorites/:uid | ||
| PUT | /api/favorites/:uid | ||
| POST | /api/favorites/:uid |
| Method | Endpoint | Request | Response |
|---|---|---|---|
| GET | /api/billing | ||
| GET | /api/billing/:id | ||
| POST | /api/billing |
| Method | Endpoint | Request | Response |
|---|---|---|---|
| POST | /api/stripe |
Users are required to sign in to use the app.
- Navigate to the Dashboard.
- Click on the gold star on one of the stock cards shown at the top of the page.
- Marvel at it showing in the Favorites section below.
- Navigate to Reports. By default AAPL will load.
- Click in the search box and begin typing the symbol of the company you're looking for.
- Either press enter or click on the stock symbol you were looking for.
- Wait as data is retrieved and the charts load.
- Navigate to Billing.
- Click Pay With Card.
- Fill out payment form.
- Click Pay.
- Update your phone number.
- Click Save.
- Choose to receive notifications via text or email.
An open-source, cross-platform JS run-time environment that executes JS outside of the browser. Node.js is powered by Google's V8 Engine which means it's powerful and can handle a large number of requests without lapsing in dependability.
A prebuilt Node.js framework that makes creating server side applications simple, fast, and flexible.
PostgreSQL is a powerful, open source object-relational database system that uses and extends the SQL language combined with many features that safely store and scale the most complicated data workloads.
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. JsonWebToken is the implementation for node.js.
Used to configure API security. This was used to allow for secure communication between the front-end and back-end servers.
Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.
Generates massive amounts of fake data in the browser and node.js.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
DOM bindings for React Router. Declarative routing for React.
Official React bindings for Redux. Performant and flexible.
A state management tool making it possible to store the entire state of the application in a single store. This means a unidirectional data flow, and as the application scales we have predictable state updates which subsequently make things easier to test and introduce new features. Redux also has solid documentation and an active community, meaning that as new devs become introduced to the project it's likely that any problems they face would have already been encountered by someone else, thus making solutions easy to find.
A middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. This functionality makes it easier to scale and implement features given diverse needs in a growing project.
Provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, and more.
Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect.
A lightweight, promise-based HTTP client with an intuitive API that makes interfacing with a REST API simple.
A powerful, simple, and seamless payment commerce solution.
Highly customizable stock charts built with React and D3.
WAI-ARIA compliant autosuggest component built in React.
React components that implement Google's Material Design.
Has a thriving community and offers the ability to directly style multiple components within a file. The syntax used is familiar to JavaScript and improves code cleanliness and makes it easy to get up and going for those without a lot of css experience. Styled components are also very efficient, improving load time for users.
Currently we're only accepting PRs from members of our team.
If you would like to report an issue, bug, or improvement, please file an issue.
MIT © Pick Em