relativelyfine / compsa-frontend Goto Github PK

Ideally, https://compsa.ca/contact should be the only contact page. https://compsa.ca/mobilePortfolios and https://compsa.ca/mobileContacts should be switched to and handled by the contacts page.

Each page component should be kept as individual files, and rendered conditionally.

The current signup page is off-center for the mobile view. Your job is to center this.

The mobile view can be emulated through the browser as follows:
Open DevTools by pressing F12.
Click on the “Device Toggle Toolbar”
Choose a device you want to simulate from the list of iOS and Android devices.
Once the desired device is chosen, it displays the mobile view of the website.

This ticket is for the creation of the marketing page in desktop view.

The page design can be found here: https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2

As for the Instagram and TikTok APIs which allow accessing posts, if you have any questions regarding the login/account details for this, contact either Liv#8332 or han#0288 on discord and specify what you require.

As for the merch elements:
This will be taken from either our backend API or a third-party API when it is implemented by the backend team.
Design the component with this in mind.
Create a basic wireframe for these designs for now.

The current resources page is blank. This ticket is for the creation of the resources page in both desktop and mobile view.

The page design can be found here: https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2

The respective buttons should be renamed as relevant.
Currently, resource links are held in this carrd: https://compsa.carrd.co/

The mobile view should be similar in design to the desktop view.

Notes:
The width of these resources presented on the site must be of similar ratio/size to the one on the carrd. Too wide and the scrolling experience will suffer.
The division of resource links will be up to you. A suggestion is to group hiring applications, other applications/surveys, information resources, and other resources into respective categories.

In the about component, each photo is outdated (filled with last year's). We have just completed the 2022 compsa photoshoot and now we must update these images with their respective photo.

The drive for these new photos are here: https://drive.google.com/drive/folders/1Zg5VRh8RCq6YM8GnwVgiPH-BZAKHE9XW

All titles will have their respective photo in the drive, you can pick the most suitable photo.

An additional section must also be appended to the page for the Tech Team. This consists of:

Backend Intern Nathan Cai
Frontend Intern Adwait Srivastava
Frontend Developer David Courtis, Kunalan Kevin Subagaran
Design Intern Shabicha Sureshkumar
UI/UX Intern Anna Lou
UI/UX Designer Amy Cui
Backend Developer Logan Cantin

This is to be styled the same way as the other sub-sections of meet the team.

The existing contacts page is blank.
This ticket is dedicated to the creation of the contacts page, in both mobile and desktop view.

The design for such page can be found here: https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2
Use the design will the fullscreen map. Changes may be made in the future.

The mobile view has 3 pages, the first page's two buttons will take the user to the other two pages. (Can be seen in the figma)

Notes:
The concerns or Feedback button should redirect the user to their email application. This can be done by setting the href to "mailto:[email protected]"

Disregard the updated navbar design in the page.

Specific portfolios should currently have an empty href - this will be implemented once the respective pages are complete.

The design and management team have deemed it necessary to create an academic section on the site.
The specifics of the design for this will likely be reiterated as relevant (text descriptions, photos, api)
Currently, no backend integration is necessary.

You are responsible for creating the page for desktop view.

The desktop design for this site can be found here https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2

You may skip the Exam Tutorials and Tutor network subsections of the site, as the backend has not implemented such data yet. The P2P mentorship program photos may be placeholders for now.

Notes:
This page will not be ready for production at the end of this ticket, so dont stress about the specific information (href links, names, images, etc.). Only the structure needs to be implemented.
Don't update the navbar. Don't allow this page to be accessible.

The design and management team have deemed it necessary to create an PD section on the site.
The specifics of the design for this will likely be reiterated as relevant (text descriptions, photos, api)
Currently, no backend integration is necessary.

You are responsible for creating the page for desktop view.

The desktop design for this site can be found here https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2

Notes:
This page will not be ready for production at the end of this ticket, so don't stress about the specific information (href links, names, images, etc.). Only the structure needs to be implemented. Do so as shown in the figma.
Don't update the navbar. Don't allow this page to be accessible.

The Events page has one date per event currently.

Ideally, there is a start date and end date. Here is a shoddy drawing of what I mean:

It's pretty basic so no Figma was requested.

The endpoint that the "start_date" request should hit is the same as "date"
The actual attribute for start_date is not yet implemented so make it a copy of the date attribute for now.

The reason we need this is that events can span multiple days, and a past event will be hidden.
This means we must have a start and end date in order to both inform the user of when the event starts and ends, and to keep it on the website until the event ends.

The current portfolio section's heights are independent of the contents, rather dependant on

This means it could break under some views.

The line where these elements are defined can be seen here.

Change the element so that it will fit tightly to the text inside while maintaining suitable padding around it, thereby scaling with the contents inside.

Create the Events Portfolio Page for desktop view.

The design can be found here: https://www.figma.com/file/qZRhKjPCQzlEaLf5UR6Q1d/COMPSA-website?node-id=2%3A2

The main challenge for this ticket is to create a js calandar. There are tutorials regarding this here:
https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d
https://www.youtube.com/watch?v=o1yMqPyYeAo&ab_channel=CodeAndCreate

The API endpoint for accessing event data is here:
https://compsa.ca/api/events (at the time of writing, offline)
The data will be in the form of pages of json data with the date, title, location, awards, and description.
You do not need to integrate this API. This will be a task for a future ticket, but design the calendar with this in mind.

The events photos carousel can be implemented in the same way that the compsa circuit homepage carousel is implemented. This component will be subject to change in the future.

Most sites have a 404 page, and we can have one too.
This page occurs when a user attempts to visit a route that does not exist.

Find a cool design and implement it:

https://www.creativebloq.com/web-design/best-404-pages-812505
https://www.creativebloq.com/web-design/best-404-pages-812505

Put the page into pages/404.jsx

That's it!
Anyone may take this ticket.

Mobile view has incorrectly implemented scaling. Fix asap!

File: components\Contact\Mobile_Form.jsx

Steps to Reproduce: Scale to a max of 480px mobile view. Scaling within this range breaks components.

The current leaderboard rankings indicate that if m people are tied for rank n, their displayed rank would be n
The proper way to show this is to indicate that if m people are tied for rank n, their displayed rank would be n + m - 1

This will encourage users to snatch a higher rank.

ie.
4 people are tied for rank 3.

m = 3, n = 4

Displayed rank = 3 + 4 - 1 = 6
All people are tied in the displayed rank 6, and there is no displayed rank 3,4, or 5.

If anyone can figure out this error and resolve it I'll give them 20 dollars for real.
Happens randomly between 2-10 hour intervals. Not sure if related to traffic.

Node: 18.13.0
NextJS: v13.0.2

Entire Error message:

ImageError: Unable to optimize image and unable to fallback to upstream image at imageOptimizer
(/home/compsaadmin/frontend/node_modules/next/dist/server/image-optimizer.js:542:19) at
process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async
/home/compsaadmin/frontend/node_modules/next/dist/server/next-server.js:228:72 at async
/home/compsaadmin/frontend/node_modules/next/dist/server/response-cache/index.js:80:36 { statusCode: 400 }