sandboxnu / happy-eastie

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

happy-eastie's Issues

Make the back button on a resource page properly navigate to the page it came from

If you go to a resource page, say this one and you press the back button, instead of navigating to either the quiz results page or the directory page, it navigates you back to the home page. It should navigate to the proper page that the user navigated from.

Revise the designs for the quiz flow

• Although we have functionality for the quiz, it has not been designed (the devs just made it work.) Revise the designs for the quiz flow so that they include the new properties (you may change the ordering or design as much as you’d like as long as it fits the original theme, although personally I like the cards idea for categories.) Make sure they’re responsive to mobile, tablet, and desktop!

Properties to include:

• Categories
• Household Members
• Household Income
• Documentation
• Languages
• Accessibility

Resource Directory Bugfixes

here's a collection of random bugs for y'all to fix

• for some reason navigation breaks? you can't go back home or click on resources but the URL changes
• card display should become one column at appropriate screen width
• ensure the tag for category shows up for resources that have one
• make the cards less bright like the designs 🥺

Static UI Features

• Make navbar not transparent
• Buttons on resource directory should not cover the mobile dropdown
• "Back to Home" on the quiz results should be a regular grey "Back" text"
• Add a proper loading icon to each page that uses it

Add filters and better search function for search page (desktop + mobile)

On the latest web designs, the resource directory has a filter sidebar that allows you to filter by every property. These designs are a draft, so it may be missing a few filtering options. In any case, allow users to filter by every input they can provide to a quiz using the sidebar.

For data such as age and income ranges, I would suggest differing from the design and providing a minimum and maximum input box. For mobile, I would suggest the sidebar instead be a viewable menu that takes up the whole screen. If you think there's a better way to implement this, let me know.

Add a footer

it is on the newest designs

Data does not load quickly enough on multiple pages

On a bunch of pages, there is just empty content for a while, and then the page is populated with data. This is a little weird. Instead, for the following pages, make sure there is either a loading icon while waiting for data, or make sure the data is fetched on the server side before sending it over (i.e. get static props).

• Quiz Categories
• Quiz Languages/Accessibility
• Quiz Results
• Directory Sidebar
• Directory Results

Scaffold home page

• Add basic homepage structure (css optional)
• Link to Quiz page
• Link to About page

As an admin, I would like to be able to create and remove events from the admin page.

• Show admins a list of stored events
• Allow admins to create events
• Allow admins to edit events
• Allow admins to disable events
• Update these events in Firestore

The UI can be pretty barebones for now. Designs/styling will come later.

Quiz does not filter results

Currently, the quiz simply returns all the resources no matter what you input into the form. Fix the quiz filtering so that it works as before:

• Filter out results that do not fit a user’s income range or documentation
• Suggest resources that a user qualifies for, but did not ask for
• Optional: Sort by language + accessibility options

Translate the identifiers on the QuizFlow

Right now, the quizflow has identifiers for the categories, languages, and accessibility questions (instead of anything that makes sense.) Using the internationalization feature partially worked on last semester, translate these identifiers into meaningful english.

• Categories
• Language
• Accessibility

This ticket will also lay the groundwork for internationalization of the whole website. The other parts of the website will remain untranslated for now.

Update QuizFlow to match new datatypes

Edit the Quiz pages so that the data submitted matches the SurverAnswer data definition we created together. This ticket is focused more on functionality than design; you do not need to worry about CSS alignment and whatnot. CSS will be a later ticket after designers have redone quiz designs. However, you will need to choose appropriate form inputs for each question.

• Decide with the team how to represent the categories on the webpage (I think we mentioned showing them as cards? If we decide on cards then “functionality” means you can properly use these cards in the quiz)
• Edit the QuizCategories page so that it submits categories in the manner defined by SurveyAnswer.
• Ensure that the options to choose categories from is dynamic (we plan to load these from the database later)
• Perform any necessary data validation in QuizCategories.
• Edit the QuizPersonal page so that it submits answers for householdIncome, householdMembers, and documentation in the manner defined.
• Perform any necessary data validation in QuizPersonal.
• Rename the QuizPersonal page to something sensible.
• Edit the QuizFamily page so that it submits answers for languages and accessibility in the manner defined.
• Ensure that the options to choose language and accessibility from is dynamic (we plan to load these from the database later)
• Submit the data to the same endpoint.

Testing would likely be just manually inspecting the resulting json data.

Make buttons without real functionality notify the user that the feature is coming

• Apply Online
• By Phone
• Bookmarks?
• Language menu in the header
• Filter button
• Sort button

Adjust the header / footer according to design critiques

Using the Design Notes page created by the designers at the beginning of the semester, fix the navbar and the footer (for both desktop, tablet, and mobile!) You might want to skim the “Creating/Organizing new code” page before starting.

Desktop

Nav

• Fixed logo size
• More space between logo and menu bar
• More padding between sections (more space below nav bar, more space above trending, more space about resource directory, more space around top and bottom of cards)
• Less space between menu bar items

Footer

• less space around everything

MOBILE

Mobile Nav

• Logo should have more space to the left (in between logo and hamburger)
• Font should be bigger for nav links
• Hamburger icon should be bigger
• more space between text and the edge of the page

Mobile Footer

• sandbox website gets cut off

Style survey flow + results page according to desktop design, and use all survey answers in matching resources

This ticket is a two parter.

First:

• Add a section to the quiz where the user can select categories to filter by (similar to Quiz1 on the web designs.) The categories we have right now are Childcare, Healthcare, Financial Help, Immigration Assistance, and Housing.
• Upgrade the matching service so that all survey answers are used
• Split the results page into a "qualified for" section and "additional resources you qualify for" section. Since this first part does not involve styling, the frontend can be very basic.

Second:

• Second, style the survey flow according to the desktop designs (this corresponds to the pages on the Figma labeled Quiz1, Quiz2, Quiz3, Quiz4, Quiz5)

Some notes:

• You can ignore the mobile designs for now, but make sure the page is easily extendable.
• You can ignore the language button, the search bar, and the filter/sorting list. Just leave space for them, I'm hoping that the other team can create a reusable "search-filter" component bar.
• The "Apply Online" and "By Phone" buttons do not need actual functionality.
• On Quiz4, I think it'd be best to dynamically create categories based on the "category" property on each resource. You can put "Other" or "Misc" for resources that don't have any category.
• On Quiz5, just put very basic cards with the title of the resources as placeholders. The other team will be working on a "resource result" component that can be shared across the search page as well as the quiz results page.

As a user, I would like to be able to view current events.

• Allow users to view events on the home page, similar to the design on Figma
• Allow users to open up a page that gives a full description of the event.
• Allow users to navigate back to the home page.

These events should be taken from firestore!

Adjust home page according to design critiques

Using the Design Notes page created by the designers at the beginning of the semester, fix the homepage (for both desktop, tablet, and mobile!) You might want to skim the “Creating/Organizing new code” page before starting. Make sure to ask Mathena or Trisha about any questions you might have, and make sure one of them looks at it before creating a PR.

Desktop Home Page

• Section headers need more space between letters (check if it’s set to 0, shouldn’t be negative spacing)

Mobile Home Page

• Bold type is all heavier weight than the desktop version
• Table for resource directory might not be best idea (maybe cards or buttons or links instead)
• The tags on mobile version should all be the same height. If there isn’t enough space to fit three tags on one line, move one tag to the next line and expand the height of the card

As an admin, I would like to be able to login to an account that takes me to an admin page.

• Allow users to navigate to the admin log in flow from the homepage.
• Once logged in, take the user to a placeholder admin page.
• If the admin navigates back to the home page, give them an indicator that they're logged, and allow them to log out from the home page.
• Also allow them to log out from the admin page.

Adjust cards on QuizResults and ResourceDirectory to use new data

Currently, the cards use the old data definitions to display things. Just make sure the cards work with the new data.

• Tie the card body to the summary property
• Tie the tags to the category property

I think that’s it honestly

Responsive UI Features

• Search bar on resource directory should be responsive to mobile screen sizes
• The bottom buttons on quiz pages should respond to mobile screen sizes (this is more obvious on the last page, the "Submit" button takes up too much space)
• There's a range of screen sizes where the header will be in desktop mode, but the user cannot view all the options. Either the header should scale or the header should switch to the dropdown at these screen widths.
• While the resource directory now collapses into one column on mobile, the header no longer spans the whole width of the page (this is probably due to the cards having a fixed width that is too big)
• Logo Image should not disappear when shrinking screen width

Design admin page

Create desktop designs for admins that allows them to create, read, update, and delete the properties described below.

This ticket is pretty free reign. There are no existing designs, so just focus on user experience and what makes sense to you and fits with the website. Also, only focus on desktop designs as admins should not be editing data from any other device.

If you have questions on what each data type is, you can ask me or refer to the code for the Resource type here.

List of todos:

• Edit list of available categories each resource can have
• Edit list of available languages each resource can support
• Edit list of available accessibility options each resource can support
• Edit list of available resources as well as their properties
  • name: string
  • description: string
  • summary: string
  • category: string array
    • The options available should be based on the list of categories!
  • keywords: string array
    • this is just random keywords, no list
  • documentationRequired: boolean
  • headerImageUrl: string?
  • website: string
  • phone: string?
  • email: string?
  • income by household members
    • An array of income ranges, where you edit the income range for each number of household members
  • location: lat long coords
  • address: string?
  • availableLanguages: string[]
    • Use the list of available options!
  • accessibilityOptions: string[]?
    • Uses the list of available options!
  • eligibilityInfo: string?

Allow admins to create different translations for resources

One feature that would be nice to have is proper translations for our resources. We can easily translate static parts of the website, and we don’t need a custom editor for those. However, translating resources is less straightforward and we need some way for admins to input those.

• Design some feature on the admin dashboard so that admins can add different translations for:
  • Text Descriptions
    • Eligibility Criteria
    • Summary
    • Description
    • Title (maybe? I’m actually not sure if titles should remain in english or should be translated)
  • Tag Data
    • Accessibility Options
    • Languages
    • Categories
    • Free Checkbox: Ignore keywords as these are language specific

Allow admins to choose which resources show up in the “trending” section

Originally, we were planning to put “community events” in the trending section on the home page. However, events is a whole other feature (and is honestly not that important.) The client suggested allowing admins to instead choose which resources show up in this section (in case a resource was newly updated.)

• Design some feature on the admin dashboard so that admins can select “trending” resources. It is up to your judgement in terms of best UX .

Add endpoints for users to fetch certain datatypes

The frontend should be able to fetch the valid options for:

• categories
• languages
• accessibility options

You can do this in any way you like, as long as the endpoints can be hit.

Bonus:

• Attach the quiz flow to the endpoints

Create search page for desktop and mobile with basic functionality

• Create a search page that displays itself properly for desktop and mobile
• Results link to expanded results page
• Search bar properly searches the titles of each resource and filters them accordingly (filter as in filter by title and description. you can ignore the actual "Filter button for now"
• Create a "search navbar" component that contains the search bar, view all, filter, and sort buttons that can be reused for the survey results
• Create a "result card" component that can be reused for the survey results

Notes:

• The language, filter, sort, and bookmark buttons do not need functionality for now.

Adjust resource pages to use new data

Similar to the cards, the resource pages use the old data definitions to display themselves. Update the page so that it works with the new data definition.

• Main description
• Location
• Category
• Eligibility
• Links n stuff

Create quiz page

Asks for:

• Income
• Language
• Citizenship
• Parent Age
• Child Age
• Family Type
• Employment Status
• Insurance Type
• Accessibility needs

Functionality:

• Validates data
• Submits data to some endpoint

All these fields should be optional.

Make ResourceDisplay stack results as a single column on smaller screen widths

What it looks like right now:

Style survey and results page according to mobile designs

Make text fields on the admin resource page editable

Make the text properties for each resource editable on the admin page. Admins should be able to enter edit mode, edit various text fields, and save/cancel their changes.

• Allow admins to enter edit mode
• Allow admins to save/cancel changes

The following text properties should be editable:

• Name (title) 🙋
• Summary
• Description 💃
• Email 📧
• Phone Number 📞
• Website
• Address (there is some conflict between the designs and the data, just make it a basic text box for now.)
• Eligibility Criteria ☑️

Testing: I would recommend testing by making sure you can edit every field, and inspecting the database to see that the changes you make on the admin page match those in the database.

Create foundations of the admin dashboard

• This ticket creates most of the basic features for the admin home page. You do not need to worry about navigating to the main website or including headers/footers for now.
• Be able to view a list of resources in the database
  • Cards
  • Table
• Create buttons which enable switching between card/table view
• Ask designers about behavior for quick edit title and add new resource (modal? redirect?)
• Add a “Add New” resource button which puts an empty resource in the database
  • Redirect admin to skeleton resource page
• Add a delete resource button
• Add an edit resource button (redirect)
• Be able to click resources and be taken to their respective page
• Add a search bar that does the same thing as the resource directory
• You only need to focus on desktop devices, but make sure it doesn’t look terrible on wider desktops

You can ignore filters for now. I’ve downloaded the resources currently in the database so do not worry about deleting them.

Testing: Just make sure they work with your own manual interactions. Also have Mathena or Trisha take a look at it before creating a PR.

Style the expanded results pages according to mobile + desktop designs

• Update the dynamically routed resource page so that it provides a template matching the designs (works for desktop and mobile)
• Possibly add custom pages for a few selected resources, we will decide this at GM

Convert primary original mobile designs to desktop

• Home page
• About page
• Quiz selection + form
• Results page
• Resource landing page template

Fix resource page on mobile

What they look like right now:

The openmap component does not seem to scale properly and causes the whole page to render bigger than it should.

Originally posted by @Octillerysnacker in #36 (review)

Create placeholder quiz

• Allow user to return to home page
• Ask user for income level
• Link to a results page containing services they qualify for
• Allow users to click on a result to see more information

Text Decorations

On the web design, there are small stars or question mark icons next to many headers or survey questions. This ticket asks for the following:

Add question mark icons (with customizable tooltip) to:

• First page, "Select what you need help with"
• Citizenship Status
• Your Matches, "In order of best fit for you"
• Additional Resources, "Services you also qualify for"

Add star icons to:

• Results page, "Your Matches"
• Directory, "Resource Directory"

Make sure they don't screw up the responsive layout!

Create SurveyAnswers-to-Service matcher

• Create a function which takes in a survey answer and returns an array of services that match the given answers

Directory Sidebar does not persist options in mobile

If you open the sidebar on mobile, make some options, close it, and reopen them again, the filtered options do not persist.

• Ensure that mobile filtering options persist between opening/closing sidebar
• Also ensure that the filtering options remain when switching between mobile and desktop views

Have data fetched with useSWR, allow caching

Style the home page according to the designs for desktop + mobile

• Home page for desktop styled according to design
• Home page for mobile styled according to design
• Scrollable events tab for desktop and mobile (you can put placeholder/dummy events for now. As long as it's easy to modify and connect to firebase in the future!)
• Resource Directory tab for desktop and mobile (same deal. The buttons and search bar don't need to do anything.)
• Responsive design that adapts to desktop/mobile screen sizes
• Allow the home header component to be reused across pages

You can ignore the "About" pop up for now.

Implement endpoint(s) for creating, updating, and deleting resources

We already have GET endpoint for our resources (otherwise the website wouldn’t work,) but now we need the other operations so that the admin page has functionality and can interact with the database.

• Implement create/POST functionality/endpoint
• Implement update/PUT functionality/endpoint
• Implement delete/DELETE functionality/endpoint
• Endpoints should enable every property in types2.ts/Resource to be editable
• Validate request data (i.e. make sure that a resource has all the required properties and that values make sense)

You don’t need to validate accessibility/category/language identifies for now, we’ll discuss later if we want to store them as a separate collection or if we want to leave it as is.

Allow users to press anywhere on a card

Everywhere we use cards - the directory, quiz results, and trending section - presses only work when you click some part of the text. Clicking the empty body of the card does nothing.

• Allow users to press anywhere on the card body for
  • Trending Cards
  • Resource Cards

As a user, I would like to be able to change the language of the website.

Text for the following pages should be changeable:

• Home
• Survey
• Results
• Expanded results page

Danish suggested an internationalization library in the project channel if you want a starting point.

Convert secondary original mobile designs to desktop

• Homepage with resource directory and trending events
• Expanded event landing page template
• Resource directory page
• Expanded resource landing page template (might just be the same as the quiz ones)

Design the admin login flow + navigation

Design the pages for admins to login/create their accounts. Like the dashboard, we only need desktop designs because admins should not be creating accounts on their phones.

• Login Page
• Forgot/Reset Password
• Signup Page
• Figure out how to get admins between the main website, the login/flow pages, and the dashboard
• Bonus: Design an admin preferences page where they can change their password in the dashboard

Migrate to MongoDb

Straightforward, just change all the firebase code we have so that it uses MongoDb instead. You do not need to refactor anything right now.

• Change all firebase calls to MongoDb calls
• Ensure the app works as before
• DO NOT PUBLISH USERNAME AND PASSWORD TO REPOSITORY!!!

I have an Atlas cluster set up right now so just ask me for the details.

Revise designs for the resource page

• The resource page currently is not designed to fit our new data. Revise the designs for the resource page so that they include the new properties (you can change it up as much as you’d like as long as it fits the original theme.) Make sure they’re responsive to mobile, tablet, and desktop!

Sections to include:

• Description
• Website/Website button
• Email/Email button
• Phone/Phone button
• Address
• Map location
• Categories tags
• Eligibility Criteria (which is just a text section)

Things to discuss:

• Should we include:
  • accessibility options?
  • available languages?
  • income ranges?
  • documentation?

Update the `api/resources/index` endpoint to process new SurveyAnswer datatype

Edit the api/resources/index endpoint so that it searches through the database and returns the list of resources, properly ordered and filtered as described in types2.ts.

• Filter/sort by each property:
  • categories
  • householdMembers / householdIncome
  • documentation
  • languages
  • accessibility
• Bonus: Update the resource directory so that it doesn’t completely break with the new resources (i.e. at least shows you the results, don’t worry about tags/descriptions/etc for now)

For testing, I would suggest using postman manually (heh we don’t have a testing flow.) If we need to spin up another development database, just let me know.

Adjust directory page according to design critiques

• Using the Design Notes page created by the designers at the beginning of the semester, fix the directory page (for both desktop, tablet, and mobile!) You might want to skim the “Creating/Organizing new code” page before starting. Make sure to ask Mathena or Trisha about any questions you might have, and make sure one of them looks at it before creating a PR.
• Desktop
  • No letter spacing (Letter spacing is 0. One example is the Categories section header). Letter spacing is inconsistent: it shouldn’t have negative or positive values. p and ul styles should have same letter spacing.
  • Get rid of back button on resource directory page
  • Cards need more contrast with the background. There should be a stroke around the cards or a drop shadow around the cards that makes them at least AA compliant with the background
  • There should be a consistent card drop shadow throughout the entire site
  • More padding at the top of cards
  • Icons should be centered in relation to their labels on the cards
  • Search bar box needs more contrast with the background. Search bar text needs more contrast with the box.
  • Checkbox color needs more contrast with background

MOBILE

• Filter check box touch/target area needs to be at least 44 x 44 pixels. There currently isn’t enough height

Adjust the resource page to match the new designs

Re-layout the resource page so that it matches the new designs. All fields in a resource should be properly connected to the page.

• Header Image
• Title
• Categories
• Contact Buttons
• Description
• Eligibility Criteria
• Address
• Map
• Responsive to desktop/tablet/mobile

Testing: Look at it??? Also resize your window and open different resources on your phone