The portal from tamu-datathon-org

Create a Nav component

This is the navbar thing in the Figma document.

For now:

Add the "Home" "About" "Sponsors" links from Giga bowser (they all point to /#about etc)
Up for discussion!
Profile Dropdown: Add a right-justified thing that shows the logged in user email (and allow them to log out) (THIS IS ONLY UI PART)
- If #6 is done bonus points for wiring it up using the hook

Resources and "Rules"

Resources:

Rules:

Use Functional Components and Hooks
Typescript all the way

The schedule page will be served by portal instead of gigabowser. It should show events, deadlines, etc. This issue can be tackled by multiple people if it needs to, but communication should be strong.

Show the events from the event page in date order.
Add a yaml spec that lets us define "non-event" events (like devpost due) so it shows up on this page as well. It should let us specify links as well
Add a filter option to let people select/deselect "My Schedule" vs "Competition Deadlines" vs "Events"

API endpoint that returns available tabs

It should be in pages/api/tabs. Checkout Next JS docs for more info
It should read in the appropriate YAML file and return it as JSON (basically just an array of the tabs, the tabs names, and the link)

Resources:

Create Page, Set, and Activity APIs

Create APIs that give a list of pages, a list of Sets for a given page, and a detail endpoint that returns all needed data for the Activity Detail Page

The detail endpoint should have all properties for both zoom and youtube live scenarios.

Create Card Component (basic UI) and Collapsable Set component.

Card component based on Figma document
Card component should have support for the "Starts in 15min" indicator
Collapsable Set
- On mobile, it should let them scroll through cards horizontally (look at the sponsor's section on mobile to see what I mean)
  Example Mobile Viewport:

See if you can use CSS grid to use the gutter spacing thing (optional you can stick with flexbox if you want)
Card and Collapsable Should be mostly stateless (at least changes when props change)

Create a UserContextProvider component that provides access to user state to all child components

the main App component will probably be a child of this
We should allow any child component should be able to useAuthState to have access to the logged-in user

Add google analytics tags

Use the same tags as where used in gigabowser

API that creates AttendedEvents and then redirects to mediaUrl for an Activity

Basically this is the endpoint that does the tracking for joining a session /events/api/join/[activityId].

The flow:

User clicks Join button, it goes to /events/api/join/[activityId]
In the API it sends request to gatekeeper to add an AttendedEvent for that user and some EventId
If the user is not logged in (no cookie, or invalid cookie) then redirect to login page with an ?r=/events/api/join/[activityId]
- The auth check should be a middleware
Afterwards sends redirect to whatever the activities mediaUrl is.

Tasks:

Make auth check middleware
Make API
Add event ID as a field to activity markdown files

Make UI for Activity Page

If activities mediaType is the livestream one it should look like the left, if it is a meeting it should look like the right.

Josiah wanted a card that shows info on the speaker in the right column (it should look roughly like this except it needs the persons name and profile picture as well and should be pretty!):

Tasks:

Figure out how to render the markdown to HTML and place it in the react tree (bonus points if you use mdx). The markdown should be rendered in the content container part (Where it says
"TAMU Datathon": Opening Ceremony and below)
- The markdown should allow us to write html as well

Add new events for TD 2020

Make this project more normal pt. 2

Generate the view based on getStaticProps rather than the api stuff (this is a bitch)

Figure out structure for Activities YAML

Activities will be stored in markdown files with a YAML front-matter
The YAML will have all necessary metadata to describe the activity.
The markdown body would describe the description content (that shows up in the Activity Detail Page)

API endpoint for Activity Detail View

It should be in pages/api/activities/[activityId].js. Checkout Next JS docs for more info
It should read in the appropriate YAML file and return the activity details as JSON (basically all the info that appears in the activity detail page).

Resources:

Integrate the SASS

Currently the whole bootstrap SCSS is imported in _app.tsx:

import "bootstrap/scss/bootstrap.scss";

It should ideally be a custom SCSS with our colors and fonts etc.

import "../styles/custom.scss";

Also change the theme in _app.tsx to let us reference colors in styled-components:

// TODO: add our colors and such
const theme = {
  colors: {
    primary: "#0070f3",
  },
};

Figure out a folder structure

Look at Typeform for July 25th lectures and make activity markdown files

Typeform account: [email protected]

UI for adding events to the schedule.

UI for adding events to the schedule. It's a popover that says the action done and also includes other actions to add to calendars. Please use normal bootstrap dialogs and font awesome icons, don't take the screenshot design too seriously

Backend Implementation: #66

UI for action
Wire up with backend API to add the event to users schedule
Make sure button say the right thing if they already added this event to the schedule

Hide "Ended" badge if its been more than 24hrs since endTime

Hide "Ended" badge if it been more than 24hrs since endTime

Add to "Schedule" Button

Instead of mark me interested, make a button drop down that lets people add the event to their calendar
The dropdown should have these calendar services for options:

Google Calendar
Other calendar (downloads .ics file for event)

The calendar event should have a link to the event as well

Figure out a structure for Page and Set config YAML files

Create a schema (some example YAML files) that has everything we need to describe the pages and "Sets"
Look into adding options to affect ordering (without having us manually order things)
- Example: allow us to say that this set should show the Activities sorted by "up next in time"?
- How do we handle past activities?

Make APIs and infrastructure for "adding Events to people's schedules"

Figure out a free/cheap database to host on (Firebase, mongo, etc)
Create a service class that holds methods that will do the database calls
Create a method that adds a document to a collection that says that a specific user has added this event to their schedule
Create a method that queries for scheduled events for a specific userAuthId
Create a method that removes an event from a users schedule

The database structure should be similar to AttendedEvents.

Remove prop-types from project

Since we're already using Typescript Interfaces, using prop-types seems redundant and is causing a lot of linting errors. I'll start this once #51 is merged

Change the Nav to be consistent (part 2)

The final Nav will have 5 links:

Home (/) Home Page
Events (/events) View events during the event
Schedule (/schedule) The generic schedule of key events (basically the opening ceremony and when devpost opens)
Challenges (/challenges) A list of company challenges
Apply (/apply) A link to Obos

Change the nav in portal to have the same items as the list above.

There will be a ticket in Gigabowser to make pages that handle /schedule and /challenges

Next.js starter code

run the tutorial & generate the starter code from:

https://nextjs.org/

Update Card UI to match current design match

https://www.figma.com/file/57YjrQC68v5QNqVfctd1mY/TD21?node-id=0%3A1

Update Style File (ask jack)
Update Card UI to match thing
Bonus: Fix the timing logic (if you want)

Title tag missing on activities pages

Currently, the title tag doesn't show on specific event pages:

Ex:
https://tamudatathon.com/events/activities/ml_start_here

Remove "end time" field from cards

Add duration to start time to compute the end time

Fix card arrow (chrome + safari) and make card clickable

Integrate Set functions to tab pages.

For every tab, it should show the tabs that belong to that page (according to the YAML files).
Make some more dummy yaml files for sets and activities to make things look good

Also link the cards to /events/activities/<activity_id> using next/link and a tags

Make this project more like a normal next js app

Make the api "pages" be in the pages folder
Integrate with pivot instead of using join.ts handler (for the join button AttendedEvents tracking)

API endpoint that returns Activity Sets for the specific "page"

It should be in pages/api/[tabId].js. Checkout Next JS docs for more info
It should read in the appropriate YAML file and return it as JSON

Resources:

Create Layout components and setup a basic page

Create a Layout that can be reused
Setup a basic page with a Container and some text (the container is provided by this Layout component)

Create the "tab" page UI

It does not need to be dynamic, it just should have dummy data. Remember to set the with meta tags and such

Also dont have too many constants (for colors) in your styled-components and use em for spacing whenever you can

Call to Action to join slack on the activity pages

Add a card below the presenter card that tells the person that they should join the slack. Also, we are adding a field to the activity YAML that says what slack channel this event has discussions in. If that is specified, show the "Check out this channel for discussions on this event: #data-science-start-here" text.

The wording is open for discussion.

Extra points if you can make the channel a link

tamu-datathon-org / portal Goto Github PK

portal's People

Contributors

Stargazers

Watchers

Forkers

portal's Issues

Recommend Projects

Recommend Topics

Recommend Org