hackru / frontendv2 Goto Github PK
View Code? Open in Web Editor NEWRunning it back.
Home Page: https://frontendv2-six.vercel.app
Running it back.
Home Page: https://frontendv2-six.vercel.app
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.
The goal is converting data from one form to another.
The API endpoint: https://github.com/HackRU/lcs/wiki/LCS-API-Endpoints#dayof-events
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.
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....
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
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
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.
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
.
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.
Copy/paste/modify Hero components to HackRU so that localhost:3000/
will display Fall 2023's landing page.
Login Button/Sign In button don't really need to do anything for now
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?
Maybe add some random images in there to get the ball rolling
https://nextjs.org/docs/pages/building-your-application/optimizing/images
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.
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
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
.
actions.ts
and use form validation using zod
. Examples of form validation via zod
are seen in actions.ts
.)https://github.com/HackRU/lcs/wiki/Using-LCS
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.