Web application for nonprofit organization 4 Future Leaders of Tomorrow (4FLOT) aimed to spread awareness of their missions to aid underprivileged communities by providing necessary resources.
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.
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.
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).
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.
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.
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)
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
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)
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.
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.
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:
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.
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.
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.
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)
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.
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
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.
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