vets-who-code / vets-who-code-app

Welcome to Vets Who Code Web App 🎉

Hey there, Soldier! Welcome to the Vets Who Code Web App. This project serves as a communal code base where military vets and their spouses can sharpen their coding skills. 🚀

What's Under The Hood 🧰

This app is built using a jam-packed tech stack including:

• Tailwind
• Next.js
• Playwright
• Typescript
• MDX
• Lerna architecture

Our Mission 🎯

1. Empower Veterans and Military Spouses: We're creating a production-grade app that addresses the unique needs of our community.

2. Ever-Evolving Platform: New features are continuously added to provide valuable tools for our users.

3. Learn By Doing: The project serves as a hands-on experience for our community to learn and grow their coding skills.

Getting Started 🚀

To get a local copy up and running, you'll need a few things installed on your machine.

Prerequisites 🛠️

• Git
• Node
• NVM
• Yarn
• NextJS

Installation Steps 🔧

Fire up your terminal and run:

$ git clone https://github.com/Vets-Who-Code/vets-who-code-app.git
$ cd vets-who-code-app
$ nvm install
$ yarn add
$ npm run dev

And boom! Navigate to http://localhost:3000/ to see the app.

Development using Dev Container (Optional) 🐳

We have a development container to help you quickly set up your dev environment. This is completely optional but can make getting started easier.

Requirements

• Docker
• VS Code
• Remote - Containers extension for VS Code

Steps

1. Clone the repository

   git clone https://github.com/Vets-Who-Code/vets-who-code-app.git
   cd vets-who-code-app

2. Open in VS Code

   • Open the root directory in VS Code.
   • A notification will appear asking if you would like to reopen the project in a dev container. Choose "Reopen in Container".
   • If you don't see the notification, open the Command Palette (F1) and run Remote-Containers: Reopen in Container.

3. Wait for the Build

   • The dev container will build based on the Dockerfile and devcontainer.json configuration. This may take a few minutes the first time.

4. Start Developing

   • After the container is built, VS Code will attach to it. You're now developing inside the container!

Remember, this is optional. If you prefer to set up your development environment manually, you can continue to do so.

Contributing 🤝

We love contributions! Please read our Contributing Guidelines to get started.

Roadmap 🗺️

Curious about upcoming features? Check our Roadmap.

License 📜

This project is under the MIT License - see the License for more details.

vets-who-code-app's Issues

Change favicon for homepage

Expected Behavior

To have a favicon that represents vetswhocode

Current Behavior

When going to vetswhocode website the favicon is the default favicon

About page not rendering when navigating directly to page from https://vetswhocode.io/about

Describe the bug
A clear and concise description of what the bug is.
jQuery is not loaded on the page from this route. Breaks render of the page because $ is not defined.
To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Subscribe Hover state

Describe the bug
Hover state specifically for the subscribe button on the landing page is broken. Needs a hover state where font color remains white.

To Reproduce
Steps to reproduce the behavior:

1. Go to index page
2. Scroll to the bottom of page
3. Hover subscribe button
4. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Typo in "your role" accordion on mentor page.

Describe the bug
The "your role" accordion on the mentor page has a typo.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vetswhocode.io/mentor
2. Scroll down to "Your Role: You will not be the expert..."
3. The sentence is incomplete; "Many mentors it difficult when they do not have all the answers."

Expected behavior
A complete sentence.

Screenshots

Desktop (please complete the following information):

• All platforms, browsers, and devices.

Add Dark Mode

Lets focus on adding Dark mode to VWC

Add Stripe Shop

As a Executive Director, I want The Hashflag Swag Shop to be Native to the web app. I want to use the Stripe Checkout API as well As Gatsby.

Add color variables: Part of dark mode

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

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

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

Additional context
Add any other context or screenshots about the feature request here.

About Page Expansion

Its been a few years. Time to update this page. I will be handling this page personally.

Modal for donate does not have a close button

Describe the bug
There is no close button on the modal. Spacing in the modal needs to be fixed as well. The information is all left aligned. Can we center or rearrange content to flow better?

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vetswhocode.io/donate/
2. Scroll to the bottom of page.
3. Click on click on donate button modal will appear.

Expected behavior
Expected behavior the ability to close the modal from a button within the modal.

Screenshots
If applicable, add screenshots to help explain your problem.

Add Media Page

Need to create a page that showcases all of the media we have garnered over the years.

Change Banner Picture

On the home page we have a banner with two former Vets Who Code troops. Lets update it with the one from Schuster's Southern Dev Conf.

Countdown to next Cohort

The current countdown to next cohort goes into negative numbers instead of stopping at 0 or changing the display to display TBA.

Donation Form is blocked behind content

Donation Form is blocked behind content
When you press the donate page button the form appears behind the content.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Donate Page'
2. Click on 'Donate Button'
3. See error

Expected behavior
The Form is supposed to be in front of the content.

Blog suggestion

There isn't a way to tell when one blog post ends and another begins. They all run together.
https://vetswhocode.io/blog

Describe the solution you'd like
Add an <hr /> between each blog post. Maybe color #d3d3d3.

Describe alternatives you've considered

Additional context

Make text larger: move to REMs

For Accessibility Purposes, lets make the root text 16px and then base the REM's of all fonts off of that.

Clean Up Sponsor section

On the sponsors section, we can delete Digital Ocean and NBC.

Make the background of the donate button turn red on hover

We want to get as much attention to our fundraising efforts as possible. In the Navbar I want the donation tab background to turn red on hover to gain more attention. Use Vets Who Code red.

About Page Mobile Responsiveness

Problem
On mobile view, the heading and paragraphs are not vertically aligned.

To Reproduce
Steps to reproduce the behavior:

1. On a mobile device go to 'https://vetswhocode.io/about'
2. See visual

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

Screenshots

Device Info
Smartphone

• Device: iPhoneXR
• OS: iOS 13.4.1
• Browser stock browser, safari

Additional context
Align headers center and paragraph text align justify should solve the issue

Blog page duplicated "Donate" button

Describe the bug
The are two donate buttons on the blog page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://vetswhocode.io/blog'
2. Scroll down to 'Help Us Teach More Veterans How To Code ' in the footer
3. See duplicate

Expected behavior
Remove duplicate Donate button.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
All browsers

Smartphone (please complete the following information):
All browsers

Additional context
Add any other context about the problem here.

Add Blog (GraphQL)

Syllabus update

What we are teaching now isn't being reflected on the site. Needs an update.

Add Serverless Blogging Capabilities

Need to add blogging capabilities to web site. I would prefer keep it javascript based and /or serverless. Having to use markdown would be fine as well.

Add success message and loading states to forms

All form need to notify the user of submission status and completion.

Remove Google Map on Contact page

Since Vets Who Code is a remote project, there is no need for a map to Nashville, TN marking a location.

Describe the solution you'd like
Recommend removing the map.

Describe alternatives you've considered
Let the content below the map fill the space.

Additional context
None

Body Scrolling when modal open

Describe the bug
Body Scrolling when modal open
Can not scroll the modal when open. The background will scroll instead.

To Reproduce
Steps to reproduce the behavior:

1. Go to Donate page
2. Click on donate button.
3. Scroll modal on mobile/touch device
4. See error

Expected behavior
A clear and concise description of what you expected to happen.
Expected to be able to scroll modal down not the body element.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add Testimonial Page.

We have a ton of new troops and fun stories. We should showcase them.

Google Link broken

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

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

fix slider color ratio

color ratio is off on the slider, making text harder to see. Maybe we need to choose another image?

Migrate VWC to Gatsby V2

Update Gatsby to V2
Update directory structure
Update Test suite
Update all dependencies in accordance with Gatsby V2

Active accordion state

Describe the bug
A clear and concise description of what the bug is.
Active state on accordions not being tracked.

To Reproduce
Steps to reproduce the behavior:

1. Go to Syllabus/Mentor page
2. Click on the second accordion tab
3. The first accordion is still in an active state even though the second one is now active
4. Plus sign does not change to a minus sign

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

1. On click swap state of accordion, tab to be inactive/active respectively
2. Swap plus sign to minus accordingly

Screenshots
If applicable, add screenshots to help explain your problem.

Add accessibility aira-labels and alt tags to web app

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

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

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

Additional context
Add any other context or screenshots about the feature request here.

Sticky Donate Button

Need a Sticky button for the donations. I've been wanting this for over a year.

Add name next to logo

We should add the name next to the logo

Remove heart icon

Describe the bug
The heart icon obscures the text on mobile. Also does not add value to the site in regards to having users go to donation pages.

To Reproduce
Steps to reproduce the behavior:

1. Go to main page
2. put a page width. to mobile screen
3. Scroll down to text
4. See error

Expected behavior
The expected behavior was to have the heart draw attention and have users click it to go to the donation page. That is not happening.

Add Contentful Logo/Attribution

Is your feature request related to a problem? Please describe.
Need to add Contentful Logo and Attribution to VWC site.

Describe the solution you'd like
Logo needs to be added to the sponsor slider

Describe alternatives you've considered
N/A

Additional context
Requested by Captain America himself.

Panel text shows after accordion panel is closed for a split second

Describe the bug
When clicking on a new Accordion panel the text from the previous panel remains visible for split second before leaving the screen.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Bug: Nav Bar shifting down

Navbar Items are shifting down as viewport width decreases.

Update about page

Text needs to change, team members need to be added.

Submit buttons lowercase

Describe the bug
The Submit buttons on the Mentor and Apply pages are lowercase.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vetswhocode.io/apply
2. Scroll down to 'submit'
3. See lowercase buttons

Expected behavior
I expect the button to be "Submit" rather than "submit"

Screenshots
Not appropriate

Desktop (please complete the following information):
All browsers

Smartphone (please complete the following information):
All browsers

Additional context
None

Jest is not a part of install

Jest testing is not a part of the yarn install.

When pulling down a fresh version of the site and running yarn, Jest should be a part of the install and setup of the site locally.

Had to google how to add Jest and update the node_modules folder via help from a Stack overflow post https://stackoverflow.com/questions/50138532/command-not-found-jest

You have to have Jest in order to run tests (required to do a pull request) so it should be a part of the install of the repo

The heading "Help Us Teach More Veterans How To Code" is not displaying correctly on mobile

Describe the bug
At the bottom of every page except for the Home page, near the bottom, there is a donate button with the heading "Help Us Teach More Veterans How To Code". On mobile, it is not displaying correctly. The last word "Code" is on the next line and is not vertically aligned.

To Reproduce
Steps to reproduce the behavior:

1. On a mobile device, go to any page except the Home page
2. Scroll down about 75% of the page
3. See error

Expected behavior
Expected "Help Us Teach More Veterans How To Code" on one or two lines centered and the "Donate" button centered below it.

Screenshots

Smartphone (please complete the following information):

• Device: iPhoneXR
• OS: iOS 13.4.1
• Browser: tested on Chrome and Safari

Additional context
Add any other context about the problem here.

Donation Button

Expected Behavior

You press the button, a red overlay appears with the stripe implementation.

Current Behavior

Nothing

Possible Solution

Possibly reiterate how script file is implemented.

Steps to Reproduce (for bugs)

1. Go to Donate page and scroll down until you see the donate button.

2. Click donate button

Context

Will limit us in the process of getting donations through the website.

Your Environment

• Version used:
• Environment name and version (e.g. PHP 5.4 on nginx 1.9.1):
• Server type and version:
• Operating System and version:
• Link to your project:

Change image

Change that image to the one with Schuster, me and Mark. Its showcases our work better.

Do we have proper meta tags?

Expected Behavior

Get the required information from your website and display it in a visual way instead of just a plain old link. This will not only make your website better, but can also result in higher engagement, since the users have more context on what to expect when visiting the link.

Current Behavior

N/A

Possible Solution

Add proper tags that apply.

Context

Provide more contextual information about the website.

Your Environment

• Version used:
• Environment name and version (e.g. PHP 5.4 on nginx 1.9.1):
• Server type and version:
• Operating System and version:
• Link to your project:

Fix Repo's Instructions

Lets clean up the instructions on the repo on how to get the site up and running. Also, lets add all needed tutorials to get up to speed.

On mobile, images are overflowing on Blog page

Describe the bug
The images headers of blog posts are overflowing on the x-axis on the Blog page.

To Reproduce
Steps to reproduce the behavior:
1.On a mobile device go to 'https://vetswhocode.io/blog'
2. See overflow of images

Expected behavior
Expect images to fit within the viewport of the device.

Screenshots

Smartphone:

• Device: iPhoneXR
• OS: [e.g. iOS 13.4.1
• Browser Chrome and Safari

Additional context
Add any other context about the problem here.

remove serif fonts

Serif fonts aren't really a good idea for a tech company. Gotta stay futuristic. Let's keep the same font everywhere while using font-weight and underlines to dictate the importance.

LINKEDCHAT not working in prod

For some reason in production, the linked chat window does not open. Let's figure out why and how to best fix it.

Move donation form above testimonial

On vetswhocode.io/donate, the donation form is below the testimonial. We need to place it above it.

Rewrite Forms

Expected Behavior

When submitting form information, it should be sent to our slack channel.

Current Behavior

The third party library has been sunset, so there will be know information sent to slack.

Possible Solution

• We either can find another third party library to substitute the current one.
• Write custom function to send information to slack.

Steps to Reproduce (for bugs)

Context

With this not working, we can't push the updated website, without losing potential submissions from our forms

Your Environment

• Version used:
• Environment name and version (e.g. PHP 5.4 on nginx 1.9.1):
• Server type and version:
• Operating System and version:
• Link to your project: