A comprehensive community platform built for Open Source Weekend, featuring upcoming events, past meetups, and a dynamic job board. Powered by Astro, Tailwind CSS, and Google Sheets as the CMS.
- Community Hub: central landing page (
/) showcasing the community mission, upcoming events, and job opportunities. - Events System:
- Lists Upcoming and Past events automatically based on dates.
- Dynamic data fetching from Google Sheets.
- Job Board:
- Real-time job listings fetched from Google Sheets.
- Status Indicators: "Open" or "Closed" status with visual warnings for closed roles.
- Openings Count: Displays the number of available positions.
- Server-Side Rendering (SSR): Dynamic content with excellent SEO and performance.
- Design System: Premium, dark-mode ready UI built with Tailwind CSS v4 and
lucide-astroicons.
- Framework: Astro (SSR mode)
- Styling: Tailwind CSS v4
- Deployment: Vercel (Serverless Functions)
- Data Source: Google Sheets (via CSV export) for both Jobs and Events.
- Node.js (v18+)
- npm
git clone <your-repo-url>
cd Job_Portal
npm install# No environment variables required for standard setupNote: Your Google Sheets must be "Published to the Web" as a CSV.
npm run devVisit http://localhost:4321 to see the app.
├── src/
│ ├── components/
│ │ ├── ui/ # Reusable design system (Badge, Button, etc.)
│ │ ├── EventCard.astro # Event display component
│ │ └── JobCard.astro # Job display component
│ ├── lib/
│ │ ├── events.ts # Events fetching & caching logic
│ │ └── jobs.ts # Jobs fetching & caching logic
│ ├── pages/
│ │ ├── index.astro # Landing Page
│ │ ├── events/ # Events Page
│ │ └── jobs/ # Job Board & Detail Pages
│ └── layouts/ # Main Layout (Header, Footer)
└── astro.config.mjs # SSR configuration (Vercel adapter)
To correctly fetch data, your Google Sheets must use the exact headers below. Copy and paste these into the first row of your spreadsheets.
title,startDate,endDate,link,location,type,descriptiontitle,company,jobSlug,featured,skills,experience,jobType,jobMode,location,companyWebsite,applyLink,postedOn,About Company,Job Description,Status,openingsThe project is configured for Vercel.
- Push your code to GitHub/GitLab.
- Import the project in Vercel.
- Deploy! (Environment variables for Sheet URLs are now hardcoded in
astro.config.mjs)