Currently the main header title and the Nave are two different components. We need to move "The Sylar Project" into the nave and make the text white so it's readable on the dark background it gets moved to.

See image attachment below to see what I'm referring to. This is a great first issue and happy to help any first time contributors through this PR.

Currently there's no way to share the resources of a specific state. When we bring up a certain states resources the change should be that the region is appended in a query param to the URL. If we have the card list show content based on which state is in the query param then someone can quickly share a link directly to those resources.

Example:

http://localhost:3000?location=alaska

If we hit this url we should automatically get all Alaska resources listed.

The current implementation of the form is a bit repetitive I want to refactor it and create inputs dynamically in the form. We can put any static form data inside of a new js file in the data folder.

Note that this story is only for making the code more DRY. If you see other form issues please check if there is already an issue created with the Form Refactoring label.

Currently when sharing the link on social media sites like Twitter - the social media card is not displaying an image. Please look into the Head component in pages/index.js to implement a fix.

Acceptance criteria: We should be able to see the hero image displayed in the twitter social sharing card when sharing the link to the site on social media.

Configure React Testing Library and inmplement a small test as an example. Include any documentation for how tests should be run in readme.

At the moment the data is served via an API Route that is just serving a JSON object. I would love thoughts on what might be good for the backend of this project. The current implementation is to make it easy for anyone to fork and use this for their local areas. I would like to keep ease of use if forked to be taken into consideration for whatever the backend ends up becoming.

Add cypress to the project:

https://www.cypress.io/

Implement a test with Cypress for clicking the add resource button and confirming that the overlay appears.

Currently for labels in the form we are getting the following listing error:
A form label must be associated with a control.eslint(jsx-a11y/label-has-associated-control)

Need to refactor the code to have the label associated with a control. This may require some changes on styling in addition to structural changes. See the documentation below for an idea on where to start:

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md

Remove the eslint disable in components/NewResourceOverlay/form.js to see the error

In order to test any components with context there are specific methods listed on the React testing library documentation. Take a look below and implement unit test for any component that uses context.

https://testing-library.com/docs/example-react-context/

I've forked this repo, cloned it to my local machine, uncommented the code in pages/api/getResources, and run npm install followed by npm run dev. When I try to view the site using http://localhost:3000, I get the following error.

error - ./components/NewResourceOverlay/form.js:7:0
Module not found: Can't resolve './confirmation'
5 | import { DropdownContext } from '../../contexts/DropdownContext'
6 |
7 | import Confirmation from './confirmation'
8 | import {
9 | NAME,
10 | LINK,

(I've checked, and there is no components/NewResourceOverlay/confirmation.js.)

Because of this problem, I'm unable to test the part of the code I'm working on. Is this a mistake; what should I do about it?

I am one person going through and adding resources. Please feel free to add resources in your local area in order to have more options available. For now this will be done state by state.

You can add mental health resources in data/usData.js

If adding resources for another country - create a new file and name it data/${country name}.js

Please follow the same formatting as uses in usData.js and indiaData.js

New country pages will be created once there are at least five resources listed in the country

Any PR's or work to help improve on the UI and make it look more aesthetically pleasing will be much appreciated. I do still want to keep it to a minimal style however I think the current design is a bit empty. (I am but a humble developer).

If you see improvements or refactors in the way I implemented code that is also completely fine if it helps enhance overall UI or makes it easier to add items as we go along.

Once tests, linting, husky is all set up set up a github action for running builds when pull requests are open to the develop branch as well as the main branch

• Implement of Container to Wrap the project
• Adding Docker file and Docker compose, if there is any dependency.

Trying to figure out best practice for PR's happy to take any suggestions or if anyone has something they can implement then by all means!

Instructions for this should also be added to the ReadMe

Add a husky precommit hook for lining:

https://www.npmjs.com/package/husky

We want to make sure that before committing any code up to a repo we run the hook so that all code is properly linted

Would love some help adding unit/integration test in the code. I think we can start with components that have props as well as the providers. I'd say those are the most important ones to be tested at the moment. If you would like to take on a specific component to test just ping me on this thread. An example of a test is available in ./components/Header/index.spec.js

Going to be using an alert from tailwind UI when submitting a new resource.

I'm taking this one on just made an issue as a placeholder.

Eslint Airbnb rules and prettier configuration would be great to add in.

The current dropdown on the main page doesn't function great on mobile. Let's replace it with the native dropdown similar to the one in add new resource overlay. This will also let us remove a bunch of unnecessary javascript code to make the current dropdown function properly.

I'd like to have a dark mode option. Below is documentation that will help implement Dark Mode using Tailwind:

https://tailwindcss.com/docs/dark-mode

We will need some JavaScript work to create a toggle component that switches between dark and light modes. It would also be a good user experience if we can dynamically enter each mode based on the users default preferences.

Color considerations (I am open to more suggestions)

Background - dark grey/ dark blue

Text - white/light grey

Button - lighter blue Iif we do a dark blue background

Currently teh save button in the add new resource overlay is purple - adjust it to be the same colors as the Add new Resource button on the home page. This should only require a change in class name please compare buttons to see what classes are missing.