As a visitor, I want to see the LIVE schedule pulled directly from the API instead of a hardcoded version so that I'm up to date.

Important Information

The goal is converting data from one form to another.

The API endpoint: https://github.com/HackRU/lcs/wiki/LCS-API-Endpoints#dayof-events

THE GOAL

Create a function that converts the following content:

{
  "kind": "calendar#event",
  "etag": etag,
  "id": string,
  "status": string,
  "htmlLink": string,
  "created": datetime,
  "updated": datetime,
  "summary": string,
  "description": string,
  "location": string,
  "colorId": string,
  "creator": {
    "id": string,
    "email": string,
    "displayName": string,
    "self": boolean
  },
  "organizer": {
    "id": string,
    "email": string,
    "displayName": string,
    "self": boolean
  },
  "start": {
    "date": date,
    "dateTime": datetime,
    "timeZone": string
  },
  "end": {
    "date": date,
    "dateTime": datetime,
    "timeZone": string
  },
  "endTimeUnspecified": boolean,
  "recurrence": [
    string
  ],
  "recurringEventId": string,
  "originalStartTime": {
    "date": date,
    "dateTime": datetime,
    "timeZone": string
  },
..., etc

to this:

The Events content looks like this: https://developers.google.com/calendar/api/v3/reference/events#resource

Note: only use what is relevant from the payload to create the schedule info

You can call this function convertGoogleCalToSchedule or whatever you want. This will take place in data.ts. Implement however you like. Please pull from the main branch.

Perhaps like

function SectionTitle(title: string) {
   return <>..... {title} .....</>
}

You can code this in codepen if that's easier and then implement later

The exists a card in the page.tsx file in the dashboard folder, in the top right of the page, where there is a file upload input for the waiver

in order to get to the /dashboard page, it will redirect you to /login the email is [email protected] and the password is test, it won't redirect you but it will then allow you to go to /dashboard

this input, along with the register button should be wrapped in a form, similar to how the card below is wrapped in a form
this form should have some form of validation, which prevents the register button from being submitted unless a waiver is uploaded

once there is a waiver, you should be able to click the register button and it will trigger some function in data.ts, which is in the lib folder this function should then call two function, GetWaiverInfo and UploadWaiver, and handle the response from them

these function are already implement in js in the old frontend repository, which you can find under the HACKRU github. And should be created in the frontendv2 repo in the action.ts file, similar to how the other endpoint functions were implemented in action.ts

In summary, what you are creating is a form that takes a waiver file as a required input, and then on submitting of the form uploads the waiver If you have any question just message Andrew on discord and I'll be happy to help you out!

make them floating....

The current login page looks like this

this isn't great and should be updated to be more inline with the theming across the website, currently the login page is only implemented on the branch 7-create-a-hacker-dashboard

Let there be a dev branch with features be merged into it and pushed to preview builds.

Then a main branch that the dev branch merges into, which pushes to prod

fancy fonts.. what could they be?

add in the correct colors as well

"Welcome to our [...]"

The text font is "Bigelow Rules"
Gradient:

#51F4FF to #FFB464

"Log In" and Menu font is BIZ UDGothnic using the same 51F4FF or FFB464 color

look into React hooks that exist.. somewhere, where if the window intersects an element, it triggers an event. i think Next.js has something already implemented... but just look into that.

maybe like this?

https://usehooks-ts.com/react-hook/use-intersection-observer

We could use the previous implementation.. .it's just that we might need some flag to disable it because it becomes kinda difficult to inspect element because there are so many divs floating around and it gets a bit laggy.

Perhaps, use a transaprent canvas? is that even a thing? probably not

What does vercel mean by this? What can we change in the automated workflow to make this make more sense.

As a visitor, I want to see the LIVE version of Sponsors pulled directly from the API instead of a hardcoded version so that I'm up to date.

Important Information

What information do you need? Check out the backend API routes: https://github.com/HackRU/lcs/wiki/LCS-API-Endpoints

Is this enough? Look into pulling images from an API for Next.js projects. What optimizations are used? Streaming? Lazy loading? Your implementation and research will be used for all the other images on the website.

You should consider using /app/lib/data.ts.

Goal

Copy and paste implementation of the sponsors to the landing page. No need for styling or making it pretty. Just getting images on there is the most important bit.

Discuss here what you think we should do.

Can just copy over the code from last semester.

There's a bug! It resizes weirdly.

Copy/paste/modify Hero components to HackRU so that localhost:3000/ will display Fall 2023's landing page.

https://hackru.org/

Login Button/Sign In button don't really need to do anything for now

Looks like there's some pattern that can be standardized for these simpler components (in contrast to About and Hero)

Copy CSS from last hackru.... however i tried that and it doesn't work.

The component Next.js provides is a little weird. Not a priority

this task..... lokey might be hard. i wonder how this would even work?

i think we would have to have a set of fixed dimensions for the cup for each breakpoint so that button placement is predictacble

Internally, the React code About section can be made better.

Just simple flex-column.

NO ANIMALS YET. NO STYLING. Just basic basic basic components.

The frontend components, dashboard and landing page, need to consume data via React Server Components. There exists a data.ts file that lays it out.

What information from Profile.js should be included? What are the most important bits of it? We can also have Ashirth join in this discussion as well.

Consider the following diagram.

a way to fix without annoyingly shifting the stars?

A super super super basic version. That correctly re-aligns with smaller window widths (mobile, desktop, laptop, nintendo 3DS)

Maybe add some random images in there to get the ball rolling

Use that Next.js provides.

https://nextjs.org/docs/pages/building-your-application/optimizing/images

it is secretly hard!!! or maybe not? what is that mysterious triangle thing

As a hacker/admin/organizer, I want to see a dashboard that's meant for me when I go to <base URL>/dashboard.

What does this mean to you? What's the best way of implementing this? Perhaps there's some sort of state that determines whats on the screen based on user role?

We can discuss in the comments of this Issue if you want. Most important thing is to make this very very minimal for now

As a hacker/participant, I want to see the information I inputted when signing up (see the user object), modify that information, and see my registration status.

Dashboards Type Roadmap

Hacker: <--- what we are working on
Modify OWN user object form
Check registration status (from user object form)
QR Code (later thing, but will be pretty easy... generating QR based on email I think)

Organizer:
See a list of user information from DB
Scan QR Code

Director:
See a list of users AND be able to write to DB
Scan QR code

Specifications:

This is how the user is stored in the MongoDB instance.

    doc = { #event is the JSON passed in with all the parameters.
        "email": u_email, # this field must be here.
        "role": { #we enforce that the user is a hacker.
            "hacker": True,
            "volunteer": False,
            "judge": False,
            "sponsor": False,
            "mentor": False,
            "organizer": False,
            "director": False
        },
        "votes": 0,
        "password": password, #this is mandatory and will always be hashed.
        "github": event.get("github", ''),
        "major": event.get("major", ''),
        "short_answer": event.get("short_answer", ''),
        "shirt_size": event.get("shirt_size", ''),
        "first_name": event.get("first_name", ''),
        "last_name": event.get("last_name", ''),
        "dietary_restrictions": event.get("dietary_restrictions", ''),
        "special_needs": event.get("special_needs", ''),
        "date_of_birth": event.get("date_of_birth", ''),
        "school": event.get("school", "Rutgers University"),
        "grad_year": event.get("grad_year", ''),
        "gender": event.get("gender", ''),
        "registration_status": event.get("registration_status", "waitlist" if not is_not_day_of else "unregistered"),
        "level_of_study": event.get("level_of_study", ""),
        "mlh": mlh, #we know this, depending on how the function is called.
        "day_of":{
            "checkIn": False
        }
    }

Ideally, the dashboard will consume this data by referencing code from data.ts. To begin, the first iteration should just be mock data. That is, when fetching information regarding the user when accessing the database, a hard-coded in-memory instance of the user object is returned.

The dashboard will reflect different states based on the role of the user. Note: No need to style or make things pretty. The dashboard themselves can just be text, such as:

Personal Info of {{user's role}}:
Email: {{user email}}
GitHub: {{github email}}

You can then designate dashboard designs and form components, to yourselves or to other people if you need help.
Dashboard should be accessed from localhost:3000/dashboard.

Steps

1. Create a dashboard that displays information (this information is a hard-coded in-memory object)
2. Create a form that allows you to write to this information (please look into actions.ts and use form validation using zod. Examples of form validation via zod are seen in actions.ts.)
   2a. Please read https://github.com/HackRU/lcs/wiki/Using-LCS#the-user-object

Points of Interest

https://github.com/HackRU/lcs/wiki/Using-LCS

Diagrams

Can just copy-paste parts of last semester's header into here