denver-devs / denverdevs.org

The denverdevs.org core.

Denver Devs Website - denverdevs.org

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on deploying the project.

Prerequisites

You'll need some familiarity with HTML/CSS/JavaScript to get to work within this repo. But, of course, knowing a bit of React helps too.

Outside of knowledge, you'll need Node & Yarn to run this - so if you don't have those set up on your machine, we recommend following the instructions found on this page: https://yarnpkg.com/getting-started/install. FYI, we're using Node 16.

Installing

Clone this directory into the area you want:

git clone https://github.com/Denver-Devs/denverdevs.org

Hop into the directory it's at:

cd denverdevs.org

Get the dependencies / node_modules installed:

yarn

Once that's done, and it could take just a bit, you'll want to copy the env example to your own .env file via:

Note! Do not modify the values in .env.example, these are all you need to get going, and the Supabase values are public. Never commit your actual .env file, which should be in the gitignore.

cp .env.example .env

Now let's get the Next.js server going with:

yarn dev

Next.js will spin up a server for you, watch the repo, and let you update code without refreshing. You should be able to see this at localhost:3000.

You shouldn't need access to Netlify or Supabase unless you have specific requirements for helping with either of those, and we'll give it out on a case-by-case basis.

Deployment

We deploy through Netlify. After you've worked up your changes/feature branch, submit a PR. From there, Netlify can create a deploy preview for us to check things out. Once it's approved, we'll merge it into main.

Built With

• Next.js
• Chakra UI
• Supabase
• Netlify - Hosting and CI.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests to us.

Authors

• Dan Hannigan - Initial work - danhannigan

See the list of contributors who participated in this project.

License

This project is under the MIT License - see the LICENSE.md file for details. You're welcome to use our code here, and feel free to reach out with any questions. Please don't take or use our logo/identity without asking us.

Acknowledgments

• Appreciate the free tiers open on so many great tools out there - they're a lifesaver when it comes to non-profit community projects.
• The admins & community of denverdevs.org, thanks for being here.
• Also, thanks to PurpleDoor for the rad readme template.

denverdevs.org's Issues

Typo in "Enter Job Description" field

"Enter" is spelled wrong.

Reported by a user, capturing here instead of fixing because I can't quite pull up the code yet.

Add ability for logged in users to manage (edit, delete) their own posts (profile page)

Is your feature request related to a problem? Please describe.
Currently, users can only create posts (via the post a job page) and cannot edit or delete them after they've been created.

Describe the solution you'd like
I've done the work to create a Dashboard page for any logged-in user to view all of their pending and accepted jobs, now we just need to wire up the delete functionality. I'd like for this to have a confirmation dialogue as well, so we'll need to look at modals as provided by Chakra UI.

Additional context
I think for now we can skip the "update" portion of editing job posts because this would, in theory, place the job post back into a "review" state, which is a workflow that needs a bit more thought.

Building a page for each job so it has it's own unique URL + SEO

Features being implemented
Build a page for each job so it has its own unique URL + SEO
Allow for a brief description of the job (if we build individual job pages)
Allow for a brief company or job summary

Describing the solution
Each job would have its own page under https://denverdevs.org/jobs/[id]. The job page would showcase information already found in the preview card plus a company summary and job description fields. The jobs page is meant to give the user more details about the job and even possibly the company who posted the job. Each page will have a unique title and description in the header for SEO purposes.

Describe alternatives you've considered
I am open to suggestions about any alternatives to my implementation :)

Additional context
Style-wise, I am going off of features already present on the site. I am open to any design suggestions as well.

Make a shareable link on the Job Posts

Add a "Share" button to the job posts that copies a URL for others to share the link to the job on our job board.

Could probably generate an anchor tag on a hidden element inside the card, and use that as the "Share" link — note, this link shouldn't apply to the whole card, just specifically the Share button itself.

Update Maximum Salary field to be required

Just discovered, per the equal pay act thingy, that salaries require a min - maximum range, we'll need to adjust the UI to reflect this and make sure that the Yup catcher gets it, too.

Pull in Meetup.com meetups

Is your feature request related to a problem? Please describe.
It would be amazing to start pulling in some meetups to the site

Describe the solution you'd like
-- @danhannigan, I will default this question to you off the rip --

Describe alternatives you've considered
There are no alternative solutions or features considered yet.

Additional context
How was this accomplished on the last site?

Enable editing functionality for trusted users

Users would like to edit posts after they've created them. We can enable this, but I've been wary because of the potential for abuse. However, I do have a is_trusted flag on the profiles table. If we can check for that flag and then open up editing for folks with that flag, that'd be something we could use.

Conference Link URLs seem to be in reverse order from the visual UI element.

Describe the bug
A clear and concise description of what the bug is.

This might be just me, but the URLs linked on each conference on DenverDevs.org/events seem to be sorted reversed on the live site, but when I cloned it down, my local seems to have the URLs ordered correctly.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://denverdevs.org/events/#conferences in Chrome or Safari i.e. not in Firefox.
2. Hover over the link to see which URL it's going to.
3. The first link will link to the last of the list and the last to the first, and the rest are reversed as well.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS Majave
• Browser [e.g. chrome, safari] Chrome and Safari but for some reason not in Firefox
• Version [e.g. 22] E.g. Chrome Version 74.0.3729.169

Create "Job Preview" area when submitting a post, that updates as the user enters values

Kind of a nice to have but I had the thought of making a "Job Preview" that can show up whenever a user is creating a new job post, that way they see what they're going to get.

Could use the react-hook-form state, and feed the props in via the Job Card probably. Would be neat!

Remove .html suffices.

Add fields for base compensation: hourly/salary & min - max range.

Need to add a required field to take in base compensation and add it to the database. I've set these fields in the DB:

compensation_type, string (set to "hourly" or "salary")
compensation_min, num
compensation_max, num

We can handle the visual output on the Job Card later, or in this same ticket, up to whoever takes it on. A good place to add it would be next to the Location or Company name, with similar formatting that'd look like one of these examples:

Contract: 95hr Contract: 95hr to 120hr, Salary: 120k - 140k Salary: Minimum 110k (round values?)

Job Filters to Narrow Search

Feature(s) being requested

• Figure out how to make the filters look better (maybe a horizontal filter bar up top?)
• Allow filtering by Location

Describe the solution you'd like
I think the proposed filter section in the following mockups would work exceptionally well.

Describe alternatives you've considered
I have not viewed any other options yet.

Additional context
The additional context was provided above.

Bad link on job post success page

The link for "Submit another job post" at /jobs/post-job-success goes to a 404 /form-hiring instead of /jobs/post-job

Build out Contributing.md doc

Need to update the contributing.md doc since it's outdated.

When signed in - the jobs on the "job board" run through two sorts.

When a user is signed in and visits the /jobs page it does not sort properly — the first GetServerSideProps gets overwitten by a useEffect hook inside the page. Need to either remove that, or correct it to always sort properly.

Design a 404 page

We don't have one! Let's make one - opening this issue up for the design aspect of it.

Broken link in contributing.md

The link to denverdevs.org from contributing.md leads to a 404 page.

http://denverdevs.org/resources/contributing/

Not sure if this is on a different page now or if the link should be deleted.

Build out emoji parade

Pull in the emojis and put them on a parade

Add redirects for moved pages

I broke some things in #2. I'll add redirects.

Leverage Slack API for more stats / fun stuff

I've considered using more of the Slack API to spit out more interesting stats for us (possibly on the about page).

Like:

• Total Members
• Active Members
• Total Emojis
• And so on.

Clarify Contribution in the CONTRIBUTING.md

Flesh this one out: https://github.com/Denver-Devs/denverdevs.org/blob/master/CONTRIBUTING.md

Include a section for just content content contribution (new sections, copy updates, etc.) working only in Markdown.

Also include a section for modifying / updating the VuePress core of the site.

Build out meetup page

Handle Meetup query and list out all meetups. This behavior will be similar to the current version.

Convert Profile from to react-hook-form, add Yup validation

The current profile page is just an unmanaged form, with no validation. Need to convert it to react-hook-form and add Yup validation.

Add Yup validation to Post Job form

Need to add validation to the form on the "Post a Job" page — probably use YUP for this.

Logo thumbnails possibly broken

The thumbnail for uploading an image was broken with something about supabase hostname in the console.

Location names in Job Listings are butting up against each-other

Separate values with commas if there are multiple, otherwise just show singular.

Re-write Recruiter / Gig formatting page.

As we've grown different issues have popped up around recruiters / gigs / and staffing agencies.

We need to re-write the rules to make it clear what kind of behavior we require from these various groups w/o harming their business. A rough outline follows but could use some modifications & proofreading.

EDIT: Condensing work into a branch that can be pulled down and reviewed: a102430

Build out channel guide

List all of the slack channels, their descriptions, and other meta.

Ability to sort via total members & alphabetical
Ability to search

Build out sidebar for resources pages

Create a sidebar that mimics the behavior of our current VuePress one for the Resources pages.

About page sidebar broken.

I did this.

Write out more robust and informative rules.

As we've grown our rules have needed to adapt -- new edge cases, new behavior that could use a bit of friendly nudging, etc. We should write out some new rules around this, formatting them in a way similar to the new Recruiter guidelines (where each rule is also a linkable header that we can cite)

Fix "Improve this page" links

Since we updated files to be in separate folders, VuePress is looking for a README.MD file in each of those vs an index.md when linking from the Edit links.

https://vuepress.vuejs.org/default-theme-config/#git-repo-and-edit-links

Simple fix: rename all index.md files to README.md files.

Add YAML Frontmater to pages.

Add title, meta, etc to individual pages - see this page for reference: https://vuepress.vuejs.org/guide/markdown.html#front-matter

Scour for typos, grammatical errors, etc.

I'm prone to having these - if you're looking for something more low-code/no code this is a good one to take on.

Add editorconfig & possibly some more linting for Chakra

Need an editorconfig to target prettier and enforce it's on-save features, or just enforce the same formatting so we're not running into PRs with diffs made up mainly of formatting adjustments.

Also possibly look into adding Chraka UI linting. https://github.com/yukukotani/eslint-plugin-chakra-ui

Upgrade supabase-js to v2.0

https://supabase.com/docs/reference/javascript/next/release-notes

Expand options for Location Selection.

Current locations in the Location Selection are:

  const locationOptions = [
    { value: "remote", label: "Remote" },
    { value: "denver", label: "Denver" },
    { value: "dtc", label: "DTC" },
    { value: "boulder", label: "Boulder" },
    { value: "ft-collins", label: "Fort Collins" },
  ];

Need to expand these to better encapsulate the region.

Ensure Netlify Invite function is working (refactor as needed)

Hook Welcome-To-Denver Travis link check in to this repo.

Checks for invalid/dead links and shoots a Travis error if they're encountered.

https://github.com/Denver-Devs/welcome-to-denver/blob/master/.travis.yml

Generate images for social cards

Look into a solution for generating social images for all of our pages - plenty of great examples out there like this one: https://spacejelly.dev/posts/how-to-generate-personalized-social-media-cards-for-landing-pages-with-next-js-cloudinary/

Ideally we'd find something free, since our volume isn't super high, but I can be convinced to chip in some cash if needed.

Upgrade Vuepress to 1.x version.

Self explanatory, but it needs to be done. Tested & checked.

Error sending signup confirmation email

Describe the bug
When signing up, I receive an error about confirmation email not being sent

To Reproduce
Steps to reproduce the behavior:

1. Click "Sign Up"
2. Input email address (no spaces or invalid characters)
3. Click "Send Magic Link"
4. Error is displayed

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: MacOS 11.6.5
• Browser Chrome
• Version 99.0.4844.83

Readme says you're using vuejs 🌚

Get our metadata / SEO on track

I slapped the site together to get it working and didn't do my due diligence to get the metadata + SEO in a good spot.

Maybe we could use something like Next SEO: https://www.npmjs.com/package/next-seo to get it all bundled up.

Open to any suggestions or ideas.

Consider going Evergreen?

Our analytics are dominated by Evergreen browsers. VuePress has an option to support only Evergreen which results in faster builds and smaller files. See: https://vuepress.vuejs.org/config/#browser-compatibility

Design & complete home page

Finish the style / design of the home page, also pulling in content intended there.

Add COC to repo

https://help.github.com/articles/adding-a-code-of-conduct-to-your-project/

Limit total tags and locations to three in the "Post Job" form

Need to limit users from selecting too many tags or locations. Three is an arbitrary number that I just picked, but I feel like that's more than enough to get folks to narrow down their search.

Also update language on each to say "select up to three"

Develop UI components

Create a set of UI components to use throughout the site (and create variant themes for the ones bundled in with Theme UI)

Update Job Board rules for new Forum channels

This one will take some discussion, but we need to update that page to better account for the forum channels - we can be more lenient on things since they're captured in Forums, now.