tritonse / 4flot-website-revamp Goto Github PK

Frontend

• Create frontend app with NextJS / React
• Linting for frontend

Backend

• Set up Node / Express backend portion
• Configure MongoDB
• Linting for backend

Description: Develop the Our Mission page.

Task Type: Frontend
Figma Here

Frontend

• Value Card component (icon + title + description)
• Story text + images
• Meet Our Team button (reuse existing component)

Description: Develop the full Our Team page under the About Us tab.

Task Type: Frontend, Backend

Frontend

• Create a reusable component for background image + overlaying text
• Create a reusable component for member info (image, name, position)
• Create the page that will use and display the components you made

Backend

• GET request for all team members

Description: Develop the full Upcoming Events page and corresponding event subpages. Should include the Upcoming Events static info + background image and event card components that can redirect to event pages.

Task Type: Frontend, Backend
Figma Here

Frontend:

• Background image + overlaying heading text (should already be made)
• Event Card component (image, title, description, button)
• Learn More button routes to specific event page
• Event page graphic + details text
• Event page Sign Up button (reuse existing component)
• Pop up window with textfields + checkbox + button
• Confirmation sign up window (graphic + text)

Backend

• GET request for all upcoming events info (image, title, description)
• GET request for specific event page details (date/time, location, guidelines)
• POST request for volunteer sign up (first name, last name, email, phone number, checkbox)

Create a responsive navigation bar with the 4FLOT logo and corresponding drop down menus for each of the sections (About Us, Get Involved, Out Impact) and a button for Donate. Make sure to create a component for the purple Donate button.

Task Type: Frontend

Description: Develop the Contact page that takes in input information from the user and sends an email to their email address with the corresponding information.

Task Type: Frontend, Backend
Figma Here

Frontend:

• Contact info card components
• Textfields + button for submitting a message
• Drop down menu for "How Can We Help You?"

Backend:

• sends an email to their email address

Description: Develop the full landing home page for the web application. It will display a section to allow donations, show upcoming events, and community sponsors.

Task Type: Frontend, Backend

Frontend

• Image Carousel with Indicators (arrows and progress dots)
• Help Our Cause info card
• Upcoming Event cards with Learn More buttons (routes to each event specific page)
• See More button (routes to upcoming events page)
• Sponsors

Backend

• GET request for images carousel
• GET request for upcoming events (title, description)

Description: Create a footer that contains links to each page within the web app, as well as a newsletter subscription box. Create a textfield + button component with input validation that will check if the submitted email address follows an email domain. If so, make a POST request to the backend to send the email address. If not, display a message to inform the user to enter a valid email address.

Task Type: Frontend, Backend

Description: Build the Our Impact Page that displays when users select the Our Impact tab.

Task Type: Frontend

Frontend

• Create a reusable component for the background image + overlaying text
• Create a reusable component for the horizontal white info cards
• Create the page that will use the components you made with the corresponding text and graphics