tritonse / sdcta-data-visualization-website Goto Github PK

• Create the frontend for the SDCTA navbar
• The navbar should be able to route between 4 dummy pages (with Data museum being the landing page).
• I recommend using react router to implement navigation between pages.

Create Saga to update login Redux State.

Add signup and subscribe modals

Change type of zipCode in the User model from string to number

Title should be in url and then extracted in component to make backend call.

• Draft the schema for the Mongo backend
• Create a mongodb database and integrate it with repo. This link should help you get started with setup https://www.mongodb.com/basics/create-database

Look into how payment details will be stored, is there a way to remember payment details without having to store them ourself?

Step 1:
Functionality to add a card and then add a reference from the card to the user (will have to probably change user schema) so that card can be retrieved if user is known.
https://stripe.com/docs/stripe-js/react

• Create the Data Museum landing page frontend.
• For right now, you can pull the images for the data visualizations straight from the Figma.

STEP 1: Info From Redux State
Get all user info - ex. First name, email, last name, etc... , from the Redux state using a selector instead of it just being hardcoded.
Example of selector:

STEP 2: Saving to Backend

When the user hits save, the edited info should be saved to the backend. Call this function in consumer.ts https://github.com/TritonSE/SDCTA-Data-Visualization-Website/blob/main/SDCTA/src/api/consumer.ts

However, this function must be called in a Saga because you want to update the User object you have saved in Redux state. Example of Saga https://github.com/TritonSE/SDCTA-Data-Visualization-Website/blob/auth-finalization/SDCTA/src/sagas/authSaga.ts

If a user signs up and them immediately navigates to the user profile page, only their email is present on the page, even if they provided additional informaiton. However, every other time they visit the page, their data will be there.

Call Route to get Viz by title.

Create api folder just like https://github.com/TritonSE/SDCTA-Data-Visualization-Website/pull/19/files#diff-38cd4176fb981e8841ba43bc742455944b30989fb302f0ab30c4580c6dc753c7
Create file called consumer.ts, call route using fetch api, return a promise
https://github.com/TritonSE/LAK-Goods-Transport-Application/blob/main/LAKMobile/src/api/consumer.tsx
Link to call api example from Lak with Promise return type made explicit
https://github.com/TritonSE/LAK-Goods-Transport-Application/blob/main/LAKMobile/src/api/data.ts
Link to creating types that replicate Mongo types from the backend.

Stripe Integration was implemented with PR #47 . This provides routes to add cards, start subscriptions, remove cards etc.

There are two main tasks in this epic:

1. Implement the payment page frontend and make the correct calls to the Stripe routes

2. Adding card change functionality to the user profile, again using the Stripe Routes

When a user clicks on a data subcategory on the previous page, they are taken to a new page that contains an analysis of the data visualization. For the visualization, you can just use the image from the Figma, but eventually we want to embed the visualization from Tableau. This youtube video gives a good idea of how exactly to do that with React video , you can skip most of the video as he starts with explaining React.

Check prop for presence of Viz object, if not present then issue call to backend (no need for sagas)

This task consists of multiple parts and is mostly a backend task:
The first part is to figure out how the best way to store CSV files in Mongo, and then implementing service layer functions to get files.

• Victor and James

The second is the create the routes to upload and download CSV files. The upload route will come in handy in an admin page that allows adding CSVs https://stackoverflow.com/questions/7288814/download-a-file-from-nodejs-server-using-express

• Brenton and Helen

The third is to call the download route from the frontend when the button is clicked - Brenton and Helen

Adding relevant research links here:
https://www.mongodb.com/community/forums/t/what-is-the-best-way-to-store-an-actual-document-file/111714

Start with adding to this existing page component https://github.com/TritonSE/SDCTA-Data-Visualization-Website/blob/main/SDCTA/src/pages/Profile.tsx

Figma Reference: https://www.figma.com/file/iAzk1lK2ODyomjUCn9qcIG/SDTEF-Data-Viz-Website?node-id=1822-4098

Next Step: Changing between view mode and edit mode
Step 2: Getting data from redux state
Step 3: Making call to backend to save data and edit Redux state with a Saga

• Look into different frameworks to implement user authentication.
• Ensure that your choice makes it easy to implement sign up with Google.

Route should just take category name as argument. 3 categories: education ...

Zoom in on small screen causes images to expand in size. Likely has to do with fill css attribute.

Currently there are 3 data categories reachable through the navbar. When a user accesses one of these categories, they should see a page displaying a scrollable list of data visualizations.
Essentially, the page is made up of a title, and then a list of sub-visualizations.
Each sub-visualization looks like the following:

So we essentially need a list of the above to make the full page:

For right now, we can start with the images that are on the Figma, but eventually we want to embed Tableau visualizations.

Tableau Viz should be static image, clicking will route to analysis page.

Address high priority code item.
https://docs.google.com/document/d/1TzFotK3BFVGCeaOmzyQlfUUGDxo9iKZ0iqnPalUKQZ0/edit#

We will be using CakeType for validation:

https://github.com/justinyaodu/caketype

Testing:
Add functions to consumer.ts that call all the routes that use validation. Pass the wrong arguments to the routes and make sure you get back errors. For how to make these functions see https://github.com/TritonSE/SDCTA-Data-Visualization-Website/pull/37/files#diff-c80eed83e1555b783e52b0ca0a3b2066a5c8cb36ca1430d9705cb6c0e09c9901 for example of consumer.ts function.

Use sagas to call API, create Redux slice for state that will store current list of visualizations:

{
Education: []: Viz
Homelessness: []: Viz
Municipal: []: Viz
}

Saga will update the correct state.

Implement the payment checkout page. Stripe routes should be implemented, so they will simply need to be called in the right order.

https://www.figma.com/file/iAzk1lK2ODyomjUCn9qcIG/SDTEF-Data-Viz-Website?type=design&node-id=2828-9196&t=lc0xXTZS2kdIol14-0

Authenticate access to backend routes with JWT tokens. Firebase provides methods to get the jwt token for a user. This article and the words alive tse repo are helpful examples.

• Create the login and sign up pages
• Make sure the sign up button is disabled until they check the box agreeing to the terms of service.