tritonse / 4flot-website-revamp Goto Github PK

Description: Create the table for the Mailing List, as well as the Search By Name functionality and UI. All information should be filled in by GET from the mongo database. Some documents will not have Last Name / First Name, so the text can be kept blank. We will also have to add a field for the date that a member subscribes to the mailing list.

Figma: Mailing List

Frontend

• Would recommend using the Material UI component for the table
  • https://mui.com/material-ui/react-table/
  • https://mui.com/x/react-data-grid/
• Search by Name functionality should search and filter for both Last Name and First Name
• Sorting dropdown menus for Last Name, First Name, Member Since
• Email Copy button
  • on hover will highlight all emails
  • on click will copy all of the emails to the clipboard (so that they can be pasted and sent easily)
• Row on hover and on click functionalities
  • copy email from that row
  • delete entire row

Backend

• Populate the Mailing List table using an api route to GET all subscribers
• Add a field in the subscriber schema and documents for the date that the member subscribes (Member Since col)
• DELETE a document from the database when user removes a row

Description: Develop the Our Mission page.

Task Type: Frontend
Figma Here

Frontend

• Background image
• Value Card component (icon + title + description)
• Story text + images
• Meet Our Team button (reuse existing component) --> goes to Our Team page

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
  • input validation for textfields here
• 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)

Description: Develop the full Newsletter flow and corresponding newsletter subpages (design is in progress). Should include the Quarterly Updates and archive section on the Newsletter landing page, flow for subscribing to their newsletter, and additional page(s) for viewing the actual newsletter (figma in progress).

Task Type: Frontend, Backend
Figma Here

Frontend

• Quarterly Updates section with Newsletter Card components
• Button that generates Join Our Newsletter Form Pop Up - reuse from Upcoming Events branch (arnav / jack)
  • Pop up window form with textfield inputs (first name, last name, email, 2 checkboxes)
  • Confirmation graphic window when successfully submitted
• Archive section for each year with arrow toggle buttons to either view or hide the newsletters in each year
• Page for the actual newsletter display (design in progress)

Backend

• GET request for all newsletters
• POST request for new subscribers (subscribers collection created by arnav / jack from page footer task) so keep in mind that the POST request they created only sends an email address, whereas the POST request for this task requires first name, last name, email, and status of 2 checkboxes

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: 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: Create the Page Editor interface for the website Get Involved page and Upcoming Events page. All future page editors will be using the components you make, so please try to make any components made reusable. For now, don't worry about the image file upload functionality, as we will need to set up Firebase first.

Frontend

• Page tab toggle component to change between Get Involved and Upcoming Events
• Collapsable sections for each pages’ sections (collapsed design)
  • Get Involved: Page Header, Section 1 - Upcoming Events, Section 2 - Donate
  • Upcoming Events: Page Header, Section 1
• Cancel and Save buttons that are only clickable if a user makes an edit (button states design)
• When user clicks save, display message to inform them that their changes are saved (confirmation message design)
• Don't worry about creating the image upload functionality (this will require some Firebase set up first)

Backend

• GET API route to get the current information presented on the page
• PATCH / PUT API route to change and update existing info on page
• Edit the existing /frontend/involved/page.tsx and /frontend/events/page.tsx files so that the page info isn't hard coded, but rather populated from the mongo collection

Figma: Get Involved + Upcoming Events

Description: Create the frontend UI that will be consistent on every page in the V2 Admin Dashboard. This includes the purple left nav bar with the Dashboard, Event Creator, Page Editor, Newsletter Creator, and Mailing List, Setting tabs. The white title bar will also appear on every page. Make the components reusable so all the pages can import them. Create the dashboard tab cards and the page editor tab cards, as well as the respective pages that they are on.

Frontend

• Use /frontend/src/app/admin/layout.tsx to have a component persist on all pages within the /frontend/src/app/admin directory. NextJS documentation on Pages and Layouts
  and Route Groups.
  • Left Nav Bar component
  • Top Title Header component
• Dashboard page with cards for Event Creator, Page Editor, Newsletter, Mailing List: /frontend/src/app/admin/dashboard/page.tsx and /frontend/src/app/admin/dashboard/page.module.css
  • for the cards, we can probably refactor/reuse or reference EventsCard and EventsList components
• Page Editor page with cards for Home, About Us, Get Involved, Our Impact, Donate: /frontend/src/app/admin/pageeditor/page.tsx and /frontend/src/app/admin/pageeditor/page.module.css
• Don’t worry about doing the top right user profile feature (that will be done by auth task)

Figma: Admin Dashboard + Page Editor

Description: Create the About Us Page.
Note: we won't need to develop the small image carousel, it's going to be changed to an illustration graphic instead.

Figma Here

Frontend

• About Us carousel
• Why We Do It Section
  • Learn More -> Our Mission
• Meet our Team
  • Read More -> Our Team
• Small Photo Carousel will be changed to an illustration instead
• Stay Connected
  • Contact Us -> Contact Us Page

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
Figma Here

Frontend

• Section WhiteCard component (should already be made)
• Upcoming Event cards with Learn More buttons (routes to each event specific page) -> reference upcoming events code
• See More button (routes to upcoming events page)
• Sponsors

Backend

• GET request for upcoming events (title, description) -> reference upcoming events code

Description: Develop the flow for the Donations section. Users can either donate physical items or money through PayPal or Credit/Debit.

Figma Here

In order to handle online payments, we most likely want to use the react-paypal-js npm package. For the monetary tab, the design may need to change depending on what we are capable of presenting on the UI in our react app. Here are some resources of other uses:

• https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--donate
• https://github.com/paypaldev/PayPal-React-Donation-Sample?tab=readme-ov-file#add-environment-variables
• https://dev.to/paypaldeveloper/how-to-add-paypal-checkout-payments-to-your-react-app-53aa

Frontend

• Background Image
• Donate module with Monetary & Physical tabs
• Physical: input fields for first name, last name, email, phone, leave a comment
• Monetary: will be based off of what we are capable of displaying using react-paypal-js

Backend

• Physical Donations form sent to their email (there's an existing sendEmail function in frontend/src/api/email.ts that you can use)
• Monetary Donations using react paypal package

Frontend

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

Backend

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

Description: Set up Firebase Storage with the existing 4flot-dev Firebase account in storage buckets that can be accessed and displayed. The client should be able to upload one or more images through the admin portal and it should get stored in our Firebase. This issue will cover all image uploading features on the admin portal (all page editors + newsletter creator + event creator) and ensuring the main website displays the corresponding images correctly.

Figma: Home Page Editor with Image Upload example

Todos

• When user initially opens page editor, a series of thumbnails are displayed
• Minus button generates up warning pop up to remove the photo
• Add a Photo button opens up file window to select one or multiple images to add
• Research and follow documentation to set up a default bucket and create image upload functionality
• Figure out a way to organize the folder hierarchy in a way that makes sense to access images for different pages / purposes
• Handle the case for when multiple images of the same filename are being uploaded
• Note: USHS has something sort of similar on their PR here (might be useful to look at but if not needed don't worry about it)

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 Our Testimonials Page.

Task Type: Frontend, Backend
Figma Here

Frontend

• Background Image
• Testimonials Card component (image, quote, description)
• Past Events component (image, title, description)

Backend

• GET request for all testimonials
• GET request for past events (hold off on this until upcoming events is set up)

Description: Use the Firebase API for authentication with email + password (don't worry about sign in with Google for now). Access the 4flot-dev Firebase here. No need to do any account creation - I created an account with credentials in the slack channel. Also, develop the frontend login page UI.

Figma: Login, Logout

Frontend

• Create the frontend styling and page content for /admin according to the figma
• Create the profile icon + dropdown for logout according to the figma. The admin portal nav bar + top bar feature is created and will be merged in main soon so you can use that. Ignore the "View Profile" option as we'll be cutting that feature.
• Some starter code to initialize firebase in /frontend/src/app/admin/firebase - feel free to edit, change, or not use but might be helpful
• When the user inputs the email and password, sign in using Firebase Auth and get JSON Web Token (JWT)
  • sign in with email and password + sign out
  • retrieving and verifying tokens
• Send token to backend for authentication: frontend should send the auth token on future requests to our backend as a header, so our backend knows who they are

Backend

• Initialize Firebase Admin with the SERVICE_ACCOUNT_KEY environment variable
• Decode the auth token sent from the frontend - if it's valid let the user sign in, if not throw an error
• No need to create a MongoDB collection for users since we only have 1 user and we just need to verify that it is that user

Description: Create the event creator table with functionality to create new events and edit previous ones. Don't worry about the images (image upload / getting current images in the newsletter) for now, another issue will do all of that later.

Figma: Event Creator Table

Frontend

• Use existing table from Mailing List / Newsletter Creator
• Tabs for Current Events + Past Events (filter by date field in the schema doc)
• New Event button generates empty event side window
  • Past Events should have New Event button disabled (they should not be able to add a past event)
• Similar features as Newsletter Creator shown in figma

Backend

• Populate table with existing eventdetails collection from MongoDB using GET request
• Edit and update existing documents using PUT or PATCH request
• Write route to DELETE a document in the collection by id

Description: Create the photo carousel component that will appear on most pages of the web app. Each page that currently has a background image + overlaying text component will be converted into using a photo carousel. The client wants to be able to switch out the photos for each page carousel, which will be done later in the admin dashboard in V2.

Task Type: Frontend, Backend
Figma Here (this figma link leads to the Home page, but the photo carousel will end up being on every page with the background image component)

Frontend

• Background Image + overlaying text (already completed)
• Learn More Button (should be removable so other pages can use this without the button)
• Indicators: left + right arrow buttons, progress dots
• Images should automatically change after every some amount of time

Backend

• Images should be stored in the MongoDB backend
• GET request for all images for a specific page

Description: Create the newsletter creator table with functionality to create new newsletters and edit previous ones. Don't worry about the images (image upload / getting current images in the newsletter) for now, another issue will do all of that later.

Figma: Newsletter Creator Table

Frontend

• Reuse table from Mailing List feature
• Tabs for Current Newsletter + Archive (toggle component is already made on page-editor branch)
• Columns for Title, Subtitle, Date
• New Newsletter button that generates right side window component. This will show the current information for that newsletter. Pop up can be closed by Close Window button.
• Edit button will change UI from text to textfield / textarea where users can edit
• Cancel + Save buttons + confirmation pop up
• If user tries to click cancel or close window when there are changes made, a warning pop up will ask to save changes
• Delete button will generate warning pop up with options to cancel or delete newsletter

Backend

• Populate table with existing newsletters collection from MongoDB using GET request
• Edit and update existing documents using PUT or PATCH request
• Write route to DELETE a document in the collection by id

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: 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