citrushack / cutiehack2021 Goto Github PK

• When joining a group, it denies me saying the group does not exist
• It works a second time
• Some times it will send me back to the home page after I join the group

• When a group is full, new members aren't allowed which is expected behavior
• But when one person leaves the group, another cannot join
• In the db, the array does not change
• I might have an isolated case but it also did not record the individual user ids so the array was an array of strings vs an array of objects

Task: Set up a navbar the user can use to navigate to the different sections of the website.

• Dependent on #1 being completed first.
• See CitrusHack's website as an example.

Task: Make a responsive design for mobile devices/smaller screens

• Make the width of the check-in form resize to fit on smaller screens

Task: Change the following into components and import it into the index.js

• Countdown timer
• Navbar

• It seems to be missing the tab title for different pages.
• It should show "Cutie Hack 2021 | Groups" on the group page
• "Cutie Hack 2021 | Sign in" on the sign in page
• etc

Super simple issue to solve. Check out next/head

Task: Set up the scaffolding for pages.

• Set up separate sections with placeholder text (e.g. title of the section) on the same page (can be navigated to by scrolling).
• See CitrusHack's website as an example.

Sections to be made:

• Home/landing section
• About section
• FAQ section
• Help/volunteer section
• Sponsors section
• Team section

https://nextjs.org/docs/advanced-features/custom-error-page

• Style the page that the app brings you after clicking "View Your Group"
• Try to make the invite code a copy to clipboard on click

• When first signing in, LinkedIn does not provide email as seen in the db

Task: Handle making/joining groups or teams.

• Hackers have the option to create or join a group (must be signed in first).
• Creating a group: a group is generated with a unique ID.
  • Other hackers can use this ID to join.
• Joining a group: hackers input a unique ID to join a group.
  • If the group exists, the hacker becomes part of the group.
  • Otherwise, display an error message.
• Frontend needed to make the UI for group making.
• Backend need to handle API-related tasks and writing groups to the DB.

Task: Make a live count of how many people signed up so far

• Involves fetching number of users written to the DB
• Recommended to user SWR

Task: Make it so that only the full navbar (links to about, FAQ, sponsors, etc.) are only visible on the homepage ("/").

• On any page other than the homepage, only a nav link to home and additional buttons (check in, sign in/out) should be visible.

• Change the FAQ layout to have no accordions
• So, just show the answer underneath the question

Because it's much easier to scale text and size

• After clicking sign in on the navbar, it will redirect me to the signin via providers page but does not let me navigate back.
• To reproduce:

1. Click sign in
2. Notice the home link unboldens
3. Non of the nav links work

• Follow the wireframes when UX design finishes them

Task: Disable framer motion on mobile

• Gestures include the effects included in framer motion
• Not necessary on mobile since it's mainly tapping on the screen anyways

Add aria-labels to all actions such as links and buttons
Add alt attributes to all images
Add rel="noopener noreferrer nofollow" to all external links

• Mobile nav dropdown for mobile screens

• Live countdown at the top (would be 12 hours from the start date)
• Following sections are TBD

Task: Create a live countdown for the hackathon start date.

• Place it on the landing page.

• Assets will be added later in the week
• Decorate the sides of the forms and group pages with some assets

Task: Set up open source authentication.

• Set up login via Google
• Set up login via Github
• Set up login via LinkedIn
• Connect to MongoDB

• Form is a class component
• Try to keep all components/pages as functional components for best practices

Task: Move the socials (currently at the side) to the footer for mobile devices/smaller screens.

• Hide socials at the side when the screen is small.
• Show socials in the footer when the screen is small (should not be visible on bigger screens).

Task: Link sections (home, about, FAQ, etc.) to the navbar

• Dependent on #1
• Currently, home and sponsor sections are on the index page so you can work on those first while the scaffolding for the other sections are being worked on
• When a user clicks on a nav link, the page scrolls down to the linked section
• Try using the react-scroll library to get this to work

• Modify the frontend to follow the latest layout in the figma (found in the rightmost area)
• Add placeholders for the sponsors section (3 different sized logos)

https://www.figma.com/file/eWUwNiDA9ViCwbEBngPZ9S/Citrus-Hack

Task

• Specifically email field should have a check to ensure it is an actual email (i.e. It contains an @ and a .domain)

• When checking in, I was able to successfully submit even though the second email did not match the first.

Task: Add fonts and implement in styling.

• Nunito

• Make a grid for profile pictures
  • Use a placeholder image in place of team lead profile pictures
  • Add a caption underneath to add the name and position
  • Use next/image library
• Make lists for committee members
  • Use a placeholder name for now (e.g. "John Doe")