13 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | Will update this more as the project progresses.
4 |
5 | ## Supported Versions
6 |
7 | Use this section to tell people about which versions of your project are
8 | currently being supported with security updates.
9 |
10 | | Version | Supported |
11 | | ------- | ------------------ |
12 | | 5.1.x | :white_check_mark: |
13 | | 5.0.x | :x: |
14 | | 4.0.x | :white_check_mark: |
15 | | < 4.0 | :x: |
16 |
17 | ## Reporting a Vulnerability
18 |
19 | Use this section to tell people how to report a vulnerability.
20 |
21 | Tell them where to go, how often they can expect to get an update on a
22 | reported vulnerability, what to expect if the vulnerability is accepted or
23 | declined, etc.
24 |
--------------------------------------------------------------------------------
/src/components/bannerSection/bannerSection.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import BannerSection from './bannerSection';
4 |
5 | describe('BannerSection', () => {
6 | test('renders banner section component', () => {
7 | render(
24 | {message}
25 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/api/speakers/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import { getSpeakers } from '../../../../lib/contentful';
3 |
4 | export const dynamic = 'force-dynamic';
5 | export const revalidate = 0; // Disable caching
6 |
7 | export async function GET() {
8 | try {
9 | const speakers = await getSpeakers();
10 | return NextResponse.json(speakers, {
11 | headers: {
12 | 'Cache-Control': 'no-store, no-cache, must-revalidate',
13 | Pragma: 'no-cache',
14 | Expires: '0',
15 | },
16 | });
17 | } catch (error) {
18 | console.error('API Error:', error);
19 | return NextResponse.json(
20 | {
21 | error:
22 | error instanceof Error ? error.message : 'Failed to fetch speakers',
23 | },
24 | { status: 500 }
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | images: {
4 | remotePatterns: [
5 | {
6 | protocol: 'https',
7 | hostname: 'images.ctfassets.net',
8 | port: '',
9 | pathname: '/**',
10 | },
11 | {
12 | protocol: 'https',
13 | hostname: 'picsum.photos',
14 | port: '',
15 | pathname: '/**',
16 | },
17 | {
18 | protocol: 'https',
19 | hostname: 'vpgsxqtnqt8tekgb.public.blob.vercel-storage.com',
20 | port: '',
21 | pathname: '/**',
22 | },
23 | {
24 | protocol: 'https',
25 | hostname: '*.public.blob.vercel-storage.com',
26 | port: '',
27 | pathname: '/**',
28 | },
29 | ],
30 | },
31 | };
32 |
33 | export default nextConfig;
34 |
--------------------------------------------------------------------------------
/src/components/socialSection/socialLinks.tsx:
--------------------------------------------------------------------------------
1 | import { IconContext } from 'react-icons';
2 | import { SocialLinkData } from './socialSection';
3 |
4 | interface SocialLinksProps {
5 | links: SocialLinkData[];
6 | iconContextValue: IconContext;
7 | className: string;
8 | }
9 |
10 | const SocialLinks = ({
11 | links,
12 | iconContextValue,
13 | className,
14 | }: SocialLinksProps) => {
15 | return (
16 | -
18 | {links.map((link) => (
19 |
- 20 | 21 | {link.icon} 22 | 23 | 24 | ))} 25 |
15 |
21 |
22 | ) : (
23 |
24 |
32 | );
33 |
34 | return (
35 |
36 | {cohortName &&
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import CardsSection from '@/components/cardsSection/cardsSection';
4 | import BannerSection from '@/components/bannerSection/bannerSection';
5 | import HeroSection from '@/components/heroSection/heroSection';
6 | import SocialSection from '@/components/socialSection/socialSection';
7 | import GroupPhotoSection from '@/components/groupPhotoSection/groupPhotoSection';
8 | import SponsorshipSection from '@/components/sponsorshipSection/sponsorshipSection';
9 | import styles from './page.module.css';
10 |
11 | export default function Home() {
12 | return (
13 | {cohortName}
} 37 | {VideoEmbed} 38 |
14 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/aboutCTA/aboutCTA.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from 'next/link';
3 | import styles from './aboutCTA.module.css';
4 | import { LABELS } from '@/app/labels';
5 |
6 | export default function AboutCTA() {
7 | return (
8 |
15 |
17 |
18 |
19 |
21 |
22 |
23 |
25 |
26 |
27 |
29 |
30 |
31 |
33 |
34 |
35 |
37 |
10 |
11 |
16 |
12 |
13 |
14 |
15 |
17 |
31 | {LABELS.about.cta.title}
18 |{LABELS.about.cta.subtitle}
19 |
20 |
21 | {LABELS.about.cta.join_community}
22 |
23 | {LABELS.about.cta.button_arrow}
24 |
25 |
26 |
27 | {LABELS.about.cta.explore_programs}
28 |
29 |
30 |
32 |
43 | );
44 | };
45 |
46 | export default Modal;
47 |
--------------------------------------------------------------------------------
/__test__/setupTests.js:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 |
3 | // Mock IntersectionObserver
4 | global.IntersectionObserver = class IntersectionObserver {
5 | constructor() {}
6 | observe() {
7 | return null;
8 | }
9 | disconnect() {
10 | return null;
11 | }
12 | unobserve() {
13 | return null;
14 | }
15 | };
16 |
17 | // Mock ResizeObserver
18 | global.ResizeObserver = class ResizeObserver {
19 | constructor() {}
20 | observe() {}
21 | unobserve() {}
22 | disconnect() {}
23 | };
24 |
25 | // Mock matchMedia
26 | Object.defineProperty(window, 'matchMedia', {
27 | writable: true,
28 | value: jest.fn().mockImplementation(query => ({
29 | matches: false,
30 | media: query,
31 | onchange: null,
32 | addListener: jest.fn(), // deprecated
33 | removeListener: jest.fn(), // deprecated
34 | addEventListener: jest.fn(),
35 | removeEventListener: jest.fn(),
36 | dispatchEvent: jest.fn(),
37 | })),
38 | });
39 |
40 | // Mock HTMLMediaElement methods
41 | Object.defineProperty(HTMLMediaElement.prototype, 'play', {
42 | writable: true,
43 | value: jest.fn().mockResolvedValue({}),
44 | });
45 |
46 | Object.defineProperty(HTMLMediaElement.prototype, 'pause', {
47 | writable: true,
48 | value: jest.fn(),
49 | });
50 |
51 | Object.defineProperty(HTMLMediaElement.prototype, 'load', {
52 | writable: true,
53 | value: jest.fn(),
54 | });
55 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const { createServer } = require('http');
2 | const { parse } = require('url');
3 | const next = require('next');
4 |
5 | const dev = process.env.NODE_ENV !== 'production';
6 | const hostname = 'localhost';
7 | const port = 3000;
8 | // when using middleware `hostname` and `port` must be provided below
9 | const app = next({ dev, hostname, port });
10 | const handle = app.getRequestHandler();
11 |
12 | app.prepare().then(() => {
13 | createServer(async (req, res) => {
14 | try {
15 | // Be sure to pass true as the second argument to url.parse.
16 | // This tells it to parse the query portion of the URL.
17 | const parsedUrl = parse(req.url, true);
18 | const { pathname, query } = parsedUrl;
19 |
20 | if (pathname === '/a') {
21 | await app.render(req, res, '/a', query);
22 | } else if (pathname === '/b') {
23 | await app.render(req, res, '/b', query);
24 | } else {
25 | await handle(req, res, parsedUrl);
26 | }
27 | } catch (err) {
28 | console.error('Error occurred handling', req.url, err);
29 | res.statusCode = 500;
30 | res.end('internal server error');
31 | }
32 | })
33 | .once('error', (err) => {
34 | console.error(err);
35 | process.exit(1);
36 | })
37 | .listen(port, () => {
38 | console.log(`> Ready on http://${hostname}:${port}`);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/src/components/modal/modal.module.css:
--------------------------------------------------------------------------------
1 | .overlay {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | width: 100vw;
6 | height: 100vh;
7 | background-color: rgba(0, 0, 0, 0.5);
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | z-index: 999;
12 | }
13 |
14 | .modal {
15 | background-color: #fff;
16 | padding: 2rem;
17 | border-radius: 10px;
18 | width: 90%;
19 | max-width: 600px;
20 | max-height: 85vh;
21 | overflow-y: auto;
22 | position: relative;
23 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
24 | animation: fadeIn 0.3s ease-in-out;
25 | }
26 |
27 | .content {
28 | width: 100%;
29 | display: flex;
30 | flex-direction: column;
31 | }
32 |
33 | .closeButton {
34 | position: absolute;
35 | top: 1rem;
36 | right: 1rem;
37 | background: transparent;
38 | border: none;
39 | font-size: 1.5rem;
40 | cursor: pointer;
41 | color: #333;
42 | z-index: 10;
43 | }
44 |
45 | @keyframes fadeIn {
46 | from {
47 | opacity: 0;
48 | transform: scale(0.95);
49 | }
50 | to {
51 | opacity: 1;
52 | transform: scale(1);
53 | }
54 | }
55 |
56 | @media (max-width: 768px) {
57 | .modal {
58 | width: 95%;
59 | max-width: 95vw;
60 | max-height: 90vh;
61 | padding: 1.5rem;
62 | }
63 | }
64 |
65 | @media (max-width: 480px) {
66 | .modal {
67 | padding: 1rem;
68 | max-height: 95vh;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/cohortsOverview/cohortsOverview.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import { LABELS } from '@/app/labels';
3 | import styles from './cohortsOverview.module.css';
4 |
5 | export default function CohortsOverview() {
6 | return (
7 | e.stopPropagation()}>
33 |
40 |
42 | {children}
41 |
11 |
35 |
12 |
19 |
20 | 13 | {LABELS.cohorts.overview.title} 14 |
15 |16 | {LABELS.cohorts.overview.description} 17 |
18 |
21 |
34 |
22 |
33 |
30 | {LABELS.cohorts.overview.imageCaption}
31 |
32 |
12 |
36 |
13 |
20 |
21 | 14 | {LABELS.community.sections.impact_title} 15 |
16 |17 | {LABELS.community.sections.impact_desc} 18 |
19 |
22 |
35 |
23 |
34 |
31 | {LABELS.community.sections.overview_image_caption}
32 |
33 |
38 |
44 | )
45 | );
46 | }
47 |
48 | return this.props.children;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/button/button.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent } from '@testing-library/react';
2 | import Button from './Button';
3 |
4 | jest.mock('./button.module.css', () => ({
5 | button: 'button',
6 | buttonPrimary: 'button--primary',
7 | buttonIcon: 'button__icon',
8 | }));
9 |
10 | test('renders correct text', () => {
11 | render();
12 | const buttonElement = screen.getByText(/click me/i);
13 | expect(buttonElement).toBeInTheDocument();
14 | });
15 |
16 | test('calls onClick prop when clicked', () => {
17 | const handleClick = jest.fn();
18 | render();
19 | fireEvent.click(screen.getByText(/click me/i));
20 | expect(handleClick).toHaveBeenCalledTimes(1);
21 | });
22 |
23 | test('renders correctly with primary variant', () => {
24 | const { asFragment } = render(
25 |
26 | );
27 | expect(asFragment()).toMatchSnapshot();
28 | });
29 |
30 | test('renders correctly with non-primary variant', () => {
31 | const { asFragment } = render(
32 |
33 | );
34 | expect(asFragment()).toMatchSnapshot();
35 | });
36 |
37 | test('shows icon when showIcon is true', () => {
38 | render();
39 | const iconElement = screen.getByTestId('button-icon');
40 | expect(iconElement).toBeInTheDocument();
41 | });
42 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dallas-software-developers",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start:dev": "next start",
9 | "start": "NODE_ENV=production node server.js",
10 | "lint": "next lint",
11 | "test": "jest",
12 | "format": "prettier --check ./src",
13 | "format:fix": "prettier --write ./src"
14 | },
15 | "dependencies": {
16 | "@tanstack/react-query": "^5.54.1",
17 | "@vercel/blob": "^1.1.1",
18 | "appwrite": "^15.0.0",
19 | "dotenv": "^17.2.1",
20 | "next": "^14.2.16",
21 | "node-appwrite": "^14.1.0",
22 | "react": "^18",
23 | "react-dom": "^18",
24 | "react-google-recaptcha": "^3.1.0",
25 | "react-icons": "^5.1.0",
26 | "sharp": "^0.33.5"
27 | },
28 | "devDependencies": {
29 | "@babel/preset-env": "^7.24.0",
30 | "@babel/preset-react": "^7.23.3",
31 | "@babel/preset-typescript": "^7.23.3",
32 | "@faker-js/faker": "^9.1.0",
33 | "@testing-library/jest-dom": "^6.4.2",
34 | "@testing-library/react": "^14.2.1",
35 | "@testing-library/user-event": "^14.6.1",
36 | "@types/node": "^20",
37 | "@types/react": "^18",
38 | "@types/react-dom": "^18",
39 | "@types/react-google-recaptcha": "^2.1.9",
40 | "babel-jest": "^29.7.0",
41 | "eslint": "^8",
42 | "eslint-config-next": "14.1.1",
43 | "jest": "^29.7.0",
44 | "jest-environment-jsdom": "^29.7.0",
45 | "prettier": "^3.5.0",
46 | "typescript": "^5"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/api/cohort/route.ts:
--------------------------------------------------------------------------------
1 | import 'server-only';
2 | import * as sdk from 'node-appwrite';
3 | import client from '../../../../lib/appwrite_client';
4 |
5 | export const dynamic = 'force-dynamic';
6 |
7 | import { NextResponse } from 'next/server';
8 |
9 | interface CohortStatus {
10 | documentId: string;
11 | statusType: string;
12 | message: string;
13 | active: boolean;
14 | }
15 |
16 | export async function GET() {
17 | const closedStatus = {
18 | documentId: '0',
19 | statusType: 'closed',
20 | message:
21 | 'Cohorts are currently closed and registration will be announced in Discord when the next one opens.',
22 | active: false,
23 | } as CohortStatus;
24 |
25 | // In development, we use faker to generate random images
26 | if (
27 | process.env.NODE_ENV === 'development' &&
28 | process.env.NEXT_PUBLIC_APPWRITE_HASKEY === 'false'
29 | ) {
30 | return NextResponse.json(closedStatus);
31 | }
32 |
33 | const databases = new sdk.Databases(client);
34 |
35 | const response = await databases.listDocuments(
36 | process.env.APPWRITE_DATABASE_ID as string,
37 | 'cohortStatus'
38 | );
39 |
40 | const cohortStatusData =
41 | response.documents
42 | .map((doc) => {
43 | return {
44 | documentId: doc.$id,
45 | statusType: doc.statusType,
46 | message: doc.message,
47 | active: doc.active,
48 | };
49 | })
50 | .find((doc) => doc.active) || closedStatus;
51 |
52 | return NextResponse.json(cohortStatusData);
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/aboutOffer/aboutOffer.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 1200px;
3 | margin: 0 auto;
4 | padding: 0 var(--spacing-4);
5 | }
6 |
7 | .sectionTitle {
8 | font-size: clamp(2rem, 4vw, 3rem);
9 | font-weight: 700;
10 | text-align: center;
11 | margin-bottom: var(--spacing-8);
12 | color: hsl(var(--dark));
13 | position: relative;
14 | }
15 |
16 | .sectionTitle::after {
17 | content: '';
18 | position: absolute;
19 | bottom: -10px;
20 | left: 50%;
21 | transform: translateX(-50%);
22 | width: 60px;
23 | height: 4px;
24 | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
25 | border-radius: 2px;
26 | }
27 |
28 | .offerSection {
29 | padding: var(--spacing-12) 0;
30 | background: white;
31 | }
32 |
33 | .offerGrid {
34 | display: grid;
35 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
36 | gap: var(--spacing-6);
37 | }
38 |
39 | .offerCard {
40 | padding: var(--spacing-6);
41 | background: linear-gradient(135deg, hsl(var(--light)) 0%, white 100%);
42 | border-radius: 12px;
43 | border: 1px solid hsla(var(--dark), 0.1);
44 | transition: all 0.3s ease;
45 | }
46 |
47 | .offerCard:hover {
48 | transform: translateY(-5px);
49 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
50 | border-color: #667eea;
51 | }
52 |
53 | .offerTitle {
54 | font-size: 1.3rem;
55 | font-weight: 600;
56 | margin-bottom: var(--spacing-3);
57 | color: hsl(var(--dark));
58 | }
59 |
60 | .offerDescription {
61 | font-size: 1rem;
62 | line-height: 1.6;
63 | color: hsl(var(--dark) / 0.7);
64 | }
65 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | ---
2 | jobs:
3 | contrib-readme-job:
4 | if: github.event_name == 'push' && github.ref == 'refs/heads/main'
5 | runs-on: ubuntu-latest
6 | name: A job to automate contrib in readme
7 | steps:
8 | - uses: actions/checkout@v2
9 | - name: Contribute List
10 | uses: akhilmhdh/contributors-readme-action@v2.3.6
11 | env:
12 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
13 | eslint-run-push:
14 | name: Run ESLint
15 | runs-on: ubuntu-latest
16 | steps:
17 | - name: Run ESLint
18 | run: npm install
19 | npx eslint .
20 | prettier-format-check:
21 | name: Check code formatting with Prettier
22 | runs-on: ubuntu-latest
23 | steps:
24 | - name: Checkout code
25 | uses: actions/checkout@v2
26 | - name: Set up Node.js
27 | uses: actions/setup-node@v2
28 | with:
29 | node-version: "14"
30 | - name: Install dependencies
31 | run: npm install
32 | - name: Run Prettier Check
33 | run: npx prettier --check ./src
34 | typescript-run-push:
35 | name: Setup TypeScript on Main Push
36 | runs-on: ubuntu-latest
37 | steps:
38 | - name: Checkout code
39 | uses: actions/checkout@v2
40 | - name: Set up Node.js
41 | uses: actions/setup-node@v2
42 | with:
43 | node-version: "14"
44 | - name: Install TypeScript
45 | run: npm install -g typescript
46 | - name: Check TypeScript Version
47 | run: tsc --version
48 | on:
49 | pull_request:
50 | push:
51 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export interface Speaker {
2 | id: string;
3 | name: string;
4 | role: string;
5 | company: string;
6 | photoUrl?: string;
7 | linkedin?: string;
8 | lastSpoke?: string;
9 | topics?: string[];
10 | isAdmin?: boolean;
11 | }
12 |
13 | export interface ActionLink {
14 | documentId: string;
15 | linkName: string;
16 | link: string;
17 | active: boolean;
18 | }
19 |
20 | export interface ToastMessage {
21 | id: string;
22 | message: string;
23 | type: 'success' | 'error' | 'warning' | 'info';
24 | }
25 |
26 | export interface FormFieldError {
27 | field: string;
28 | message: string;
29 | }
30 |
31 | export interface ApiResponse{LABELS.errorHandling.somethingWentWrongTitle}
39 |{LABELS.errorHandling.unexpectedErrorMessage}
40 | 43 |
48 | {activeToasts.map((toast) => (
49 | hideToast(toast.id)}
54 | />
55 | ))}
56 |
57 |
9 |
46 | {LABELS.about.values.title}
10 |
11 |
45 |
12 |
22 |
13 | {LABELS.about.values.community_first.icon}
14 |
15 | 16 | {LABELS.about.values.community_first.title} 17 |
18 |19 | {LABELS.about.values.community_first.description} 20 |
21 |
23 |
33 |
24 | {LABELS.about.values.continuous_learning.icon}
25 |
26 | 27 | {LABELS.about.values.continuous_learning.title} 28 |
29 |30 | {LABELS.about.values.continuous_learning.description} 31 |
32 |
34 |
44 |
35 | {LABELS.about.values.inclusivity.icon}
36 |
37 | 38 | {LABELS.about.values.inclusivity.title} 39 |
40 |41 | {LABELS.about.values.inclusivity.description} 42 |
43 |
43 |
58 |
44 |
49 |
50 | {isLoading ? (
51 | {LABELS.about.team.title}
45 |46 | {LABELS.about.team.description} 47 |
48 |
52 |
54 | ) : (
55 |
23 |
55 |
24 |
31 |
32 | 25 | {LABELS.community.sections.get_involved_title} 26 |
27 |28 | {LABELS.community.sections.get_involved_desc} 29 |
30 |
33 |
54 |
34 |
53 |
35 |
44 |
45 | {LABELS.community.sections.become_speaker_title}
46 |{LABELS.community.sections.become_speaker_desc}
47 | 48 | 52 |
50 |
67 |
51 |
58 |
59 | {isLoading ? (
60 | 52 | {LABELS.community.sections.team_title} 53 |
54 |55 | {LABELS.community.sections.team_desc} 56 |
57 |
61 |
63 | ) : (
64 |
34 |
38 |
48 |
49 |
42 |
43 |
44 |
45 |
46 |
47 |
50 |
64 |
51 |
63 | 52 | 53 | {LABELS.about.hero.title_about} 54 | 55 | 56 | 57 | {LABELS.about.hero.title_highlight} 58 | 59 | 60 |
61 |{LABELS.about.hero.subtitle}
62 |
10 |
56 |
11 |
55 |
12 |
45 | 13 | {LABELS.about.mission.title} 14 |
15 |16 | {LABELS.about.mission.description} 17 |
18 |
19 |
44 |
20 |
21 | {LABELS.about.mission.stats.active_members}
22 |
23 |
24 | {LABELS.about.mission.stats.active_members_label}
25 |
26 |
27 |
28 |
29 | {LABELS.about.mission.stats.events_per_year}
30 |
31 |
32 | {LABELS.about.mission.stats.events_per_year_label}
33 |
34 |
35 |
36 |
37 | {LABELS.about.mission.stats.free_and_open}
38 |
39 |
40 | {LABELS.about.mission.stats.free_and_open_label}
41 |
42 |
43 |
46 |
54 |
9 |
61 | {LABELS.about.offer.title}
10 |
11 |
60 |
12 |
19 | 13 | {LABELS.about.offer.monthly_meetups.title} 14 |
15 |16 | {LABELS.about.offer.monthly_meetups.description} 17 |
18 |
20 |
27 | 21 | {LABELS.about.offer.conference.title} 22 |
23 |24 | {LABELS.about.offer.conference.description} 25 |
26 |
28 |
35 | 29 | {LABELS.about.offer.career_support.title} 30 |
31 |32 | {LABELS.about.offer.career_support.description} 33 |
34 |
36 |
43 | 37 | {LABELS.about.offer.open_source.title} 38 |
39 |40 | {LABELS.about.offer.open_source.description} 41 |
42 |
44 |
51 | 45 | {LABELS.about.offer.cohort_program.title} 46 |
47 |48 | {LABELS.about.offer.cohort_program.description} 49 |
50 |
52 |
59 | 53 | {LABELS.about.offer.discord.title} 54 |
55 |56 | {LABELS.about.offer.discord.description} 57 |
58 |
70 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/src/components/cardsSection/cards.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import CardsSection from './CardsSection';
3 |
4 | describe('CardsSection', () => {
5 | const labelMock = {
6 | lblWorkshopsTitle: 'Technical Workshops',
7 | lblSupportTitle: 'Community Support',
8 | lblCohortsTitle: 'Cohorts & Hackathons',
9 | lblWorkshopsContent:
10 | 'Bringing the community together twice a month around technical topics that allow you to learn and grow your programming skills to be a stronger developer.',
11 | lblSupportContent:
12 | 'No matter your level, you have a community that has your back! Dallas Software Developers are focused on supporting our local community while also trying to support the developers who need our help and support!',
13 | lblCohortsContent:
14 | 'A 6-week program that is completely free to pair developers working on a project being guided by a developer working in the industry. The focus is to help give you something interesting to showcase in an interview and give you real-world skills!',
15 | btnTextMeetup: 'Go To A Meetup',
16 | btnTextCommunity: 'Community Impact',
17 | btnTextCohort: 'Join Our Cohort',
18 | meetupUrl: 'https://www.meetup.com/dallas-software-developers-meetup/',
19 | communityUrl: '/',
20 | cohortUrl: '/',
21 | };
22 |
23 | test('uses the correct href for each link', () => {
24 | render(
72 |
75 | Our Community
73 |Join a thriving group of passionate developers
74 |
76 |
86 |
12 | {peopleData
13 | .filter((p) => p.isAdmin === true)
14 | .sort((a, b) => {
15 | const nameA = a.name || '';
16 | const nameB = b.name || '';
17 | return nameA.localeCompare(nameB);
18 | })
19 | .map((person, index) => (
20 |
62 | );
63 | }
64 |
65 | const TeamList = memo(TeamListComponent);
66 | export default TeamList;
67 |
--------------------------------------------------------------------------------
/src/components/aboutHero/aboutHero.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '../../../__test__/testUtils';
3 | import AboutHero from './aboutHero';
4 |
5 | describe('AboutHero Component', () => {
6 | test('renders the component', () => {
7 | render(
21 |
60 | ))}
61 |
22 |
59 |
32 |
58 |
33 |
57 | {person.name}
34 |35 | {LABELS.teamList.admin_role} 36 |
37 |{LABELS.app.orgName}
38 | {person.linkedin && ( 39 | 46 | 54 | 55 | )} 56 |
28 |
75 |
29 |
36 |
37 | 30 | {LABELS.community.sections.speakers_title} 31 |
32 |33 | {LABELS.community.sections.speakers_desc} 34 |
35 |
38 |
61 |
62 |
39 |
60 | {LABELS.community.sections.featured_topics}
40 |
41 |
47 | {LABELS.community.topics.map((topic, index) => (
48 |
57 | ))}
58 |
59 |
63 |
65 |
66 |
67 |
74 | {LABELS.community.sections.callout_title}
68 |{LABELS.community.sections.callout_desc}
69 | 73 |
16 |
39 |
40 |
17 |
18 |
25 |
26 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
38 | 28 | {LABELS.sponsorship.title} 29 |
30 |31 | {LABELS.sponsorship.description} 32 |
33 |
42 |
72 |
43 |
51 |
52 |
53 |
71 | {LABELS.sponsorship.modal_title}
54 |{LABELS.sponsorship.modal_cta}
55 | 70 |
Modal Content
,
11 | };
12 |
13 | beforeEach(() => {
14 | defaultProps.onClose.mockClear();
15 | });
16 |
17 | test('renders modal when isOpen is true', () => {
18 | render(
51 |
86 |
52 |
59 |
60 | 53 | {LABELS.cohorts.structure.title} 54 |
55 |56 | {LABELS.cohorts.structure.description} 57 |
58 |
61 | {weeklyStructure.map((week, index) => (
62 |
80 |
81 |
63 |
78 | ))}
79 |
64 | {week.week}
65 |
66 |
67 |
77 | 68 | {week.week}:{' '} 69 | {week.title} 70 |
71 |-
72 | {week.activities.map((activity, idx) => (
73 |
- {activity} 74 | ))} 75 |
82 |
85 | {LABELS.cohorts.structure.scheduleNote.title}
83 |{LABELS.cohorts.structure.scheduleNote.description}
84 |
115 | {shapes.map((shape, index) => {
116 | const shapeStyle = {
117 | '--shape-color': shape.color,
118 | '--shape-opacity': shape.opacity,
119 | width: `${shape.size}px`,
120 | height: shape.type !== 'triangle' ? `${shape.size}px` : 'auto',
121 | top: shape.top,
122 | left: shape.left,
123 | animationDelay: shape.animationDelay,
124 | } as React.CSSProperties;
125 |
126 | return (
127 |
133 | );
134 | })}
135 |
136 | );
137 | }
138 |
--------------------------------------------------------------------------------
/src/components/cohortCard/cohortCard.module.css:
--------------------------------------------------------------------------------
1 | .cohortContainer {
2 | display: flex;
3 | flex-direction: column;
4 | background: hsl(var(--light));
5 | border-radius: var(--border-radius-xl);
6 | overflow: hidden;
7 | box-shadow: var(--shadow-md);
8 | transition: all 0.3s ease;
9 | border: 1px solid hsla(var(--primary), 0.1);
10 | width: 100%;
11 | height: auto;
12 | position: relative;
13 | }
14 |
15 | .cohortContainer::before {
16 | content: '';
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | width: 100%;
21 | height: 100%;
22 | background: linear-gradient(
23 | 135deg,
24 | hsla(var(--primary), 0.05) 0%,
25 | transparent 100%
26 | );
27 | opacity: 0;
28 | transition: opacity 0.3s ease;
29 | pointer-events: none;
30 | z-index: 1;
31 | }
32 |
33 | .cohortContainer:hover {
34 | transform: translateY(-8px);
35 | box-shadow: var(--shadow-xl);
36 | border-color: hsla(var(--primary), 0.2);
37 | }
38 |
39 | .cohortContainer:hover::before {
40 | opacity: 1;
41 | }
42 |
43 | .groupName {
44 | font-size: var(--text-xl);
45 | font-weight: var(--font-weight-semibold);
46 | color: hsl(var(--dark));
47 | padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);
48 | margin: 0;
49 | text-align: center;
50 | background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
51 | -webkit-background-clip: text;
52 | -webkit-text-fill-color: transparent;
53 | background-clip: text;
54 | position: relative;
55 | z-index: 2;
56 | }
57 |
58 | .defaultImageContainer {
59 | width: 100%;
60 | aspect-ratio: 16 / 9;
61 | background: linear-gradient(
62 | 135deg,
63 | hsla(var(--primary), 0.1) 0%,
64 | hsla(var(--accent), 0.1) 100%
65 | );
66 | display: flex;
67 | align-items: center;
68 | justify-content: center;
69 | position: relative;
70 | overflow: hidden;
71 | }
72 |
73 | .defaultImageContainer::after {
74 | content: '';
75 | position: absolute;
76 | top: 0;
77 | left: 0;
78 | width: 100%;
79 | height: 100%;
80 | background: radial-gradient(
81 | circle at center,
82 | hsla(var(--primary), 0.1) 0%,
83 | transparent 70%
84 | );
85 | animation: pulse 3s ease-in-out infinite;
86 | }
87 |
88 | .defaultImage {
89 | width: 60%;
90 | height: 60%;
91 | opacity: 0.3;
92 | filter: grayscale(100%);
93 | position: relative;
94 | z-index: 1;
95 | }
96 |
97 | .cohortVideoContainer {
98 | width: 100%;
99 | aspect-ratio: 16 / 9;
100 | position: relative;
101 | overflow: hidden;
102 | background: hsl(var(--dark));
103 | }
104 |
105 | .cohortVideoContainer iframe {
106 | position: absolute;
107 | top: 0;
108 | left: 0;
109 | width: 100%;
110 | height: 100%;
111 | border: none;
112 | }
113 |
114 | @media (max-width: 768px) {
115 | .cohortCard {
116 | max-width: 280px;
117 | margin: 0 auto;
118 | }
119 |
120 | .groupName {
121 | font-size: 1rem;
122 | padding: var(--spacing-3);
123 | }
124 |
125 | .cohortVideoContainer,
126 | .defaultImageContainer {
127 | aspect-ratio: 16 / 10;
128 | height: 150px;
129 | }
130 | }
131 |
132 | @media (max-width: 480px) {
133 | .cohortCard {
134 | max-width: 240px;
135 | }
136 |
137 | .groupName {
138 | font-size: 0.9rem;
139 | padding: var(--spacing-2);
140 | }
141 |
142 | .cohortVideoContainer,
143 | .defaultImageContainer {
144 | height: 120px;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/hooks/useForm.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from 'react';
2 | import { LABELS } from '@/app/labels';
3 |
4 | type ValidationRuleForFormField
19 |
69 |
20 |
57 | 21 | {LABELS.social.heading_parts.before_discord} 22 | 23 | {LABELS.social.heading_parts.discord} 24 | 25 | {LABELS.social.heading_parts.after_discord} 26 |
27 |{LABELS.social.subheading}
28 | 49 |
50 |
56 |
58 |
68 |
59 |
67 |
93 |
124 |
94 |
101 |
102 | 95 | {LABELS.cohorts.projects.title} 96 |
97 |98 | {LABELS.cohorts.projects.description} 99 |
100 |
103 | {Object.keys(cohortData).map((year) => (
104 |
111 | ))}
112 |
113 |
114 |
115 | {cohortData[selectedYear]?.map((group) => (
116 |
123 |
69 |
108 |
70 |
77 |
78 | 71 | {LABELS.cohorts.requirements.title} 72 |
73 |74 | {LABELS.cohorts.requirements.description} 75 |
76 |
79 | {whoShouldJoin.map((requirement, index) => (
80 |
89 |
90 |
81 |
87 | ))}
88 | {requirement.icon}
82 |
83 |
86 | {requirement.title}
84 |{requirement.description}
85 |
91 |
107 |
92 |
101 |
102 |
103 |
106 | {LABELS.cohorts.requirements.dallasCallout.title}
104 |{LABELS.cohorts.requirements.dallasCallout.description}
105 |