Giter Site home page Giter Site logo

techishiring / techishiring-website Goto Github PK

View Code? Open in Web Editor NEW
52.0 4.0 35.0 9.56 MB

A space where great Engineers and great jobs can find each other! We're on Twitter and LinkedIn and have a newsletter on Substack!

Home Page: https://www.techishiring.com

License: MIT License

JavaScript 2.69% TypeScript 96.33% CSS 0.49% HTML 0.49%
hiring jobsearch tech twitter design-system figma react storybook typescript

techishiring-website's Introduction

TechIsHiringLinkedInCompanyHeader

techishiring-website's People

Contributors

chadstewart avatar ciradu2204 avatar dev-phantom avatar devtofunmi avatar dgodongm avatar ghostzero avatar hassanshanjava avatar himanshukrmr avatar hokagedemehin avatar ladykerr avatar marktnoonan avatar royanger avatar sadaf-a avatar takanome-dev avatar yiremorlans avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

techishiring-website's Issues

Migrate newsletter integration

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently, the TechIsHiring newsletter is on Revue. Revue today has announced that it will be discontinuing service which forces the newsletter to move elsewhere. The integration with Revue will need to be updated once a new newsletter service is identified.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

As of right now, Substack seems to be a very suitable replacement for Revue. If the newsletter is migrated to Substack, then integration would need to be moved to leverage that.

May also explore other newsletter services as well but more likely Substack will be the service of choice.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Alternatives are still being determined.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Replace Twitter timeline widget with custom solution

Currently, the app is using a package that is using Twitter's timeline widget to show TechIsHiring's timeline. The main issue is we don't have much control over the widget, how it displays and what. The main concern is that the primary way I share opportunities is by quote-tweeting them with just the TechIsHiring hashtag. On Twitter, this displays okay but through this widget, it only displays the top tweet and not the quote tweet where the actual value is.

A solution would need to be built to allow to take Twitter API responses and put them into components. Twitter API responses also include quote-tweeted data so we can add them as well, thus returning value to me quote-tweeting other person's tweets.

Add Vitest, React Testing Library and Cypress

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

There is currently no automated tests for the project.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

We should add Vitest, React Testing Library and Cypress to the project.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Haven't considered any alternatives at this time.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version the docs.
Maybe a screenshot or design?

n/a

Write test suite for project

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Once #29 is completed, we will need to add a test for the project.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Things to test:

lib folder:

  • utils: capitalize, verify-email
  • api: Not sure how to test this yet

pages folder:

I honestly don't know how to test Next.js components so I'd need to look that up.

components folder:

How should I test React Components

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Specifically for the components folder, I'm considering adding unit tests for each component in the folder or adding Cypress and testing flows through the application itself. I'm more knowledgeable on unit tests but I think Cypress will be a great learning experience and potentially better for testing components that mainly focuses on display.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version the docs.
Maybe a screenshot or design?

will do this later

Make contact page mobile bg image visible up to 1024px width

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently, the mobile version of the contact us page has a background image. That background image is not visible between the widths of 768px to 1024 px.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Update the media query for the background image in src/components/organisms/contact-content/content-content.tsx to display up to 1024px.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Remove arbitrary blockers to deploying code

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

So when the project started and I worked on the project alone, I was used to having some of the tooling emit errors instead of warnings when I worked, such as tsc and linters. Now that the project is public and getting some traction, I don't think that is a good dev experience for contributors so I'd like to reduce the number of hurdles of getting a contribution landed.

Examples of this issue:

#50
#58

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Right now, tsc and eslint will emit errors instead of warnings for any rule violations. That'll cause deployment to break and while you can still merge the code, it won't deploy. Setting those to emit warnings should be fine for now.

I'll also take the time to look at the CI/CD pipeline and see where we can implement this idea as well.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

Dunno if there's a teachable moment here other than actually worry about your dev experience! ๐Ÿ˜‚

Feature: Add alt text to external navigation links

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently in the main nav bar, one of the links is an external link. That link has an icon for accessibility to say that it's external and that icon has alt text. Unfortunately that alt text is hard coded into the app.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Add an external link alt text attribute to the object in the useNav hook and use that text whenever and an item is an external link.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

While no alternatives have been considered for adding the external link attribute, enforcing it through types has been something I've been playing around with. I have a few ideas:

  1. Make the external link attribute be an object with an attribute of the alt text
  2. Set types so that when an external link is added, an alt text must be added as well (not sure how to do this in TypeScript exactly).

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Update About us page

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Update About us Page to new design.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (7)

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (6)

Check out the components here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=291%3A2179&t=ItybLH9XnPZ96T8A-0

*Note: The header and footer components will be updated in issues #34 & #38. There will be no need to work on them in this issue

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add Tests

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Want to add a test suite to the application.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

As of right now, this issue will remain vague as I don't have a great idea on how I want to structure the test suite. The application is mostly split between separating markup (display logic) from business logic. Because of that, I'm not sure if it'd add much value to test the display logic through unit tests. The business logic seems like a no-brainer for now but I'd like some time to think about and get opinions on what's the best way to write tests that'll add value to the project.

I also want to leverage Cypress for testing as well.

Note: This issue will need to be tackled after issue #29.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Currently n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

Currently n/a

Accessibility bug (Newsletter): Improve subscribe to newsletter component

Captialize 'Subscribe to our newsletter!' sentence

Add 'Enter Your Email' label to input tag. For attribute newsletter.

Make border of input field a darker gray: '#3D3D3D'. Add id to input tag that matches for attribute for label.

Change button background to a darker gray: '#3D3D3D' and change text to white. On focus, add border of a darker gray: #3D3D3D and invert colors of text and background.

Note: Potentially add this add a modal in all pages.

Found by @jfc3

Feat: Add a Style Guide to the project

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

So currently the only way to know what style would be preferred for contributions is if you go into the code and look. Without that context, it's much harder for contributors to come in and make meaningful changes without having to throw away a lot of work.

An example of this is this discussion thread: #72 (comment)

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Add a Style Guide to the project. This will likely need to be added in Contributing.md and possibly the README.

As I've personally never written an official Style Guide, any help would be very much appreciated in doing this. I'll also do some research on other projects to see how they handled this issue.

What I'd need help with is:

  1. What are the important things to capture
  2. Where should I mention these things
  3. What can be automated vs. what will I need to look out for in PRs?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Currently there are no alternatives but I'd like to leave this space for adding them as research is done and advice is potentially given.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

When talking on contributors, try to find the intersection between making the process of making a contribution as painless as possible while also maintaining a project as painless as possible.

Adding a max width on the header

Currently, the header does not have a max width so it keeps expanding on larger screens and that is not the behaviour we will expect from it.

Right now, I want to address this issue and give the header a max width of 1536 (i.e 2xl in tailwind)

Suggestions are welcomed

@chadstewart your input is also needed for the go-ahead of my idea is fine

Update Footer Component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Update Footer to new design.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (4)

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (3)

Check out the components here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=ItybLH9XnPZ96T8A-0

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Update: update the contributing.md for existing contributors

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]
In my last PR a merge conflict was raised that was because i did not fetch upstream before pushing my last commit

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.
update the contributing.md for existing contributors to fetch upstream before creating a new PR or commit
so as not to result to conflict
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?
users can easily copy the command to fetch upstream and also merge upstreams

Update Storybook Component names

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently we have a storybook instance for the project. Some of the names in Storybook does not match the rest of the Storybook components. Those names would need to be updated.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Update the storybook names to fit the other component names in storybook. The names in question are:

  • aboutBanner
  • aboutDetails
  • aboutHeader
  • contact form
  • contactHeader

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add Hero Component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

A hero component needs to be created for use throughout the project.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

A hero component that can take in an image and some text.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

A single component might not be the best abstraction at the moment so it might make sense to split all the types of hero components currently in the project into separate components.

Check out the pages here for the current hero components: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=ItybLH9XnPZ96T8A-0

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add ESLint GitHub Action

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

So there's linting rules for the project that can cause errors that causes the build to break when adding PRs. This was an issue in PR issue #50.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Thinking of adding a GitHub Action to run linting on the project when code is pushed. I'm not sure if this is the best solution but it's the thing that came to mind first. I'll look into other solutions.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

We could have pre-commit hooks that'll run linting before pushing the code. Or we could make the linting rules warnings instead of errors so builds won't break on linting rules.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Developer Experience: Update issue template to have initial titles and properly add labels

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently the issues templates primarily focus on the description and not the title or the issues. The titles are empty and the issues are misconfigured.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Update each Issue template to have a starting title and properly label issues.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Remove search bar from Hero Section

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently the app has search bars on the home page hero section. They were intended to use the Twitter API to search for specific jobs to populate the list below. Unfortunately the state of the Twitter API is currently in flux and so it wouldn't make too much sense spending engineering time to work on something we may be unable to use or we may have to change the implementation. Until the state of the Twitter API is more clear, we'll refrain from using this.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Simply comment out the search bar. I don't want to completely remove it as yet as we may use it in the future.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Refactor: Remove Link component from Icon component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Icon has a link component inside of it.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

The link component needs to be removed and the Footer component needs to be refactored to add the Link component there instead.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Refactor: Remove Contact Layout Component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

There is a contact layout component in the components/template folder. There is no need for this component.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Contact Layout needs to be removed and the contact file in pages needs to be refactored to use default layout.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

The templates folder is there for reusable layouts across the application. While there aren't many different layouts, the current example is the basic layout of header, main content and footer. If a layout is reusable, then it would be appropriate to add to templates.

Bug: Image in Contact page changing size based on window width

Expected Behavior

When on the Contact page, the image on the right hand side should remain the same height regardless of the page width.

Current Behavior

The height of the image changes when the width of the page changes.

Possible Solution

Honestly not sure but this is likely a minor CSS issue.

Steps to Reproduce

  1. Navigate to dev.techishiring.com
  2. Navigate to the Contact Us page
  3. Change the size of the window which is displaying the site

Context (Environment)

Dev environment as of March 29, 2023.

Detailed Description

Read above.

Possible Implementation

n/a

Replace background image for Hero Section

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

The hero section has a background image but the image was a direct link to the image in Figma. In #77, that was removed but not replaced. Creating an issue so that it can be replaced with a better implementation.

https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=NlbZLYNHMZQ0TNCS-0

Screenshot from 2023-03-12 13-44-23
Screenshot from 2023-03-12 13-53-56

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

The previous implementation linked directly to the image in Figma. What would be preferable is to download the background image and just use the asset directly from the project.

Hopefully this shouldn't be too complicated but there might be some Next.js SSR specific details that might be an issue.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

Whenever working with assets from Figma, instead of linking to them, you can just download those assets and then add them to the project directly. Best thing to do is ask before moving forward with your PR if you have a question.

Add 'Why Choose TechIsHiring?' Component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Add a new component to the landing page that's a brief summary of TechIsHiring.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=151%3A571 t=ItybLH9XnPZ96T8A-0

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=151%3A571 t=ItybLH9XnPZ96T8A-0 (1)
d5d-bdee-9696bd7867b6.png)

The components can be found here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=ItybLH9XnPZ96T8A-0

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Remove Chakra and replace with custom components or Preline/Daisy/etc

Feature Request

Is your feature request related to a problem? Please describe.
The project currently has both Tailwind and Chakra UI installed. While this isn't a really problem, it is a bit of a mix of systems.

Describe the solution you'd like
Rip out Chakra and replace with Preline or custom components built with the Tailwind.

Why Preline (or Daisy UI)?
They are built using Tailwind, and where it matters the library adds in a little bit of JS. See the Off Canvas examples. Off Canvas is like Chakra's Drawers. Essentially you install the Preline package, then just Copy & Paste from the Preline docs into the project. The nice thing about this solution is that you can then, quickly or over time, tweak or change it and essentially have a custom component. (Or even write the JS to open/close/show/hide/etc things and turn it fully custom.

Why custom?
I'm not a super strong advocate of this, but it is an option if something like Preline or Daisy isn't interesting.

Describe alternatives you've considered
None specifically -- past experience plus Tailwind already being present in the project.

Teachability, Documentation, Adoption, Migration Strategy
This isn't something that would really affect users (assuming no bugs). This is just an potential evolution of the project.

update the pull request template to auto create milestone

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

after creating a PR it does not automatically creates a milestone for the PR

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

in the PR template kindly add closes or fixes to the related issue

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
n/a
Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

it helps others to know the issue is currently in progress

Fix issues template to properly represent what they are describing!

Developer Experience Issue

Please describe your Developer Experience Issue.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

When selecting the issues they look exactly the same so they are hard to differentiate.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Update the template so they are more clear.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version the docs.
Maybe a screenshot or design?

n/a

Update Design System

Currently the Design System for several components that should be dynamic is mostly static.

Need to update the Design System to that some components are more dynamic.

Feat: Switching to Material UI from Chakra UI

Feature Request

Is your feature request related to a problem? Please describe.
I remember some few years back when I was still swaping through different UI libraries, looking for one that I can use for all my web development needs, I came across Chakra UI and fell in love with it almost immediately. Around that same time I was already a fan of Tailwind CSS for obvious reasons, but when I tried to combine these two great libraries, there were clitches here and there. Lots of the components in Chakra UI does not allow custom manipulation to fit my needs so it was very hard to use these two in the same project

Describe the solution you'd like
A switch to Material UI will open the project to more components and will allow better integration with Tailwind CSS Style library interoperability

And did I mention Material UI is written fully in Typescript now, so no type issue will be encountered

What do you think?

Make Contact Us page functional

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

We have a contact us page but currently it's not functional. We'd like to make the page actually able to send emails to the TechIsHiring email account.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

The web form is built already so it's primarily getting the data out of the form and sending it as an email. This would involve sending all the data as a request to Node instance in Next.js and then sending the email through that Node instance. This makes the serverless function do all the heavy lifting once deployed and keeping the work the client needs to do lightweight.

To actually send the email, we would leverage SendGrid.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Right now, SendGrid seems like the most simple way to send an email (admittedly it also seems to be the most popular solution as I haven't built a Contact Us page in years ๐Ÿ˜‚). I saw a few alternatives but I'm going with this. Since the serverless function is acting link a BFF, if we decide to change in the future, the client will be unaffected and all the work can simply take place in the the serverless function.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add Contact Us Page

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Add a Contact Us Page

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (9)

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (8)

Check out the component here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=288%3A1549&t=ItybLH9XnPZ96T8A-0

*Note: The header and footer components will be updated in issues #34 & #38. There will be no need to work on them in this issue

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Update Header Component

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

The header needs to be updated to the new design.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0

The component is located in here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=ItybLH9XnPZ96T8A-0

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add a 'Hire Chad' Page

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Was given the suggestion that since I am job hunting, I should make a 'hire chad' page. Want to implement a naive version until I can get it better designed.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Just taking the contact page and implementing the design with a few changes for my page. The only link to this page would be from the About me page.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

At the moment, it's just really taking one of the previous page designs and utilizing it for this page. I'll have it more properly designed at a later date.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Bug: Social Links do not work.

Expected Behavior

There are social links in the footer of the app. These links should link to the various social media accounts for TechIsHiring.

Current Behavior

Currently they do not link to anything. They don't have an a tag or an href to anything.

Possible Solution

The current implementation using the Link component from the atoms folder which uses next/link. We can just convert all the links to a tags and that should solve the problem.

Steps to Reproduce

  1. Go to dev.techishiring.com
  2. Go to bottom of the page where the footer is and click on any social link.

Context (Environment)

This is currently on dev.techishiring.com. I'm not sure if this is an issue on the main site when this fix is pushed to main eventually, it won't matter.

Detailed Description

See above.

Possible Implementation

See above.

Update Footer Nav bar to reflect Header Nav bar.

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Currently, the footer has a navbar which is hard coded. It'd be best to update the navbar in the footer to reflect the header navbar.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

Currently, the nav items are controlled by a React hook that has all the nav items. It would be best to use the hook to populate the navbar items in the footer as well.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Update API Layer with Tanstack Query

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

After learning about all the benefits of Tanstack Query, I'd like to remove the custom React Hook that handles API requests and replace it with Tanstack Query. I'd also like to update the API Layer and remove code that will no longer be used.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

The API Layer has a custom React Hook that handles working with API's. I'd like to remove that and effectively replace it with Tanstack Query. There are also several 'guides' in the project on how to use the API Layer that would need to be updated as well. Because of changes to what TechIsHiring uses, the API Layer will likely be underutilized but I would still like to have this updated and in place for future use (I've already found value leveraging the API Layer and the guides I wrote in the project to use it).

Also like to remove the Axios mostly through the advice of @JacobMGEvans.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add 'TechIsHiring Highlights' component.

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Add a component that highlights specific tweets from the TechIsHiring account.

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

The idea is to add a carousel so that there is a main tweet in the middle of the page that has emphasis over the other tweets.

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (1)

www figma com_file_AHf38Z5LQ4v1YBIgJv0tsM_TechIsHiring_node-id=128%3A550 t=ItybLH9XnPZ96T8A-0 (2)

The components can be found here: https://www.figma.com/file/AHf38Z5LQ4v1YBIgJv0tsM/TechIsHiring?node-id=151%3A571&t=ItybLH9XnPZ96T8A-0

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

The highlighted tweets can be made static as well as the main goal is to show the most important tweets.

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Add Prettier to the project

Feature Request

Is your feature request related to a problem? Please describe.
Prettier provides a better DX and less false line changes. IE, I use a default of 3 tabs in my editor but the project uses 2. Any pages I edit will have all tabs changed to 3. Prettier overrides this.

Describe the solution you'd like
Add prettier to the project.

Describe alternatives you've considered
No alternatives.

Teachability, Documentation, Adoption, Migration Strategy
No need for docs -- packages are added to package.json as well as the config. All further development will seamlessly use the setup.

Upgrade to Next 13 & TypeScript 5

Feature Request

Describe the solution you'd like
Upgrade to Next 13 and migrate to new features in that release.

Describe alternatives you've considered
No reasonable alternatives.

Update README to add Figma file, Contribution and License

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I have an issue when [...]

Update README file to add the figma file for the project and add references to how to contribute and the License

Describe the solution you'd like
A clear and concise description of what you want to happen. Add any considered drawbacks.

n/a

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy
If you can, explain how users will be able to use this and possibly write out a version in the docs.
Maybe a screenshot or design?

n/a

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.