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 modern tech stack including:

• Next.js 15
• TypeScript
• Tailwind CSS
• Playwright for testing
• MDX for content
• shadcn/ui components
• Server Actions
• Server Components

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.js (v18.18.0 or higher)
• NVM
• pnpm (recommended) or npm

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 use
$ npm install
$ npm run dev

Navigate to http://localhost:3000/ to see the app in action.

Development using Dev Container (Optional) 🐳

We support development containers for an easier setup experience.

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.
   • When prompted, choose "Reopen in Container"
   • Or use Command Palette (F1) and run Remote-Containers: Reopen in Container.

3. Start Developing

   • Once the container is built and running, you're ready to code!

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

Image Generation Script for Blog Post Images

How it Works

• Scrapes/reads the blog markdown file in system blog folder.
• Blog title, content and summary are returned to inject in a dynamic prompt that is given to Google Gemini.
• Gemini returns JSON formatted to be able to give this return value as an input to Google Imagen to build an image.
• After the image is generated it is uploaded to Cloudinary into the blog-images folder.

How to Run

• Verify you have the following environment variables locally in a .env file:
  • NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
  • CLOUDINARY_API_KEY
  • CLOUDINARY_API_SECRET
  • GEMINI_API_KEY
• Run this script followed by the blog article slug as second arg like this example: npm run generate-blog-image <blog-slug-here>

To get a local copy up and running, you'll need a few things installed on your machine. npx tsx scripts/generate-blog-image.ts

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.