CCCD Jamaica / VSP Peace Corps Project

Table of Contents

• Project Information
  • Project Description
  • Project Goals
  • Project License
  • Project Status
  • Project Hosting
• Project Tools
  • Frontend Web Development
  • Decoupled Content Management System
  • AI Tools
  • Source Code Management
  • Project Management
• Project Structure

Project Information

Project Description

This project is a modern, responsive website for CCCD Jamaica, leveraging cutting-edge web technologies and AI-assisted development. Built with SvelteKit, a powerful framework for creating fast, efficient web applications, the site utilizes TailwindCSS for flexible and maintainable styling. The development process is enhanced by AI tools such as Cursor AI, Google Gemini, and OpenAI's DALL-E 3, which assist in code generation, content creation, and image design. The project is hosted on Vercel, ensuring high performance and seamless deployment. This combination of technologies allows for rapid development, excellent user experience, and easy maintenance of the CCCD Jamaica website.

Project Goals

• To create a modern, responsive website for CCCD Jamaica
• To leverage cutting-edge web technologies and AI-assisted development
• To build a fast, efficient web application
• To ensure a high performance and seamless deployment
• To create a user-friendly and accessible website for the Deaf community in Jamaica
• To implement a Jamaican Sign Language (JSL) Resource Page utilizing AI to learn and teach JSL

Project License

This project is licensed under the BSD 3-Clause License.

Project Status

• Project Production Version: 1.0.2
• Project Development Version: 1.0.3

Hosting

• Vercel - Static site hosting
• Linode - Virtual private server hosting
  • Coolify - Container platform management at Linode
• Cloudflare - CDN and DNS services
• Cloudinary - Media management

Project Tools

Frontend Web Development

• SvelteKit - Main framework for the project
  • svelte-meta-tags - Meta tags for the project
• TailwindCSS - Main styling framework for the project
  • Tailwind Forms - Forms for the project
  • Tailwind Typography - Typography for the project
  • Tailwind Aspect Ratio - Aspect ratio for the project
  • Tailwind Container Queries - Container queries for the project
• TailwindUI - UI components for the project, but not used extensively
• Pixelmator - Image editing for the project before being uploaded to Cloudinary
• Svelte Cloudinary - Cloudinary integration for the project
• iconify - Iconify icons for the project
• Unsplash - Unsplash images for the project as placeholders, when needed
• Undraw - Undraw illustrations for the project as placeholders, when needed
• favicon.io - Favicon for the project
• Umami - Umami analytics for the project

Decoupled Content Management System

This project first started to use Drupal as the main content management system, but due to the complexity of Drupal, it was decided to use WordPress. Due to time constraints, the developer decided to switch to Directus for the next phase of the project for editing, updating, and adding content to the project. With the help of Cursor AI, this is more realistic resource-wise.

• Directus - Decoupled content management system for the second phase of the project

AI Tools

• Cursor AI - AI code generation for the project forked from VSCode
• chatGPT - Used for code checking
• Claude - Used for code checking
• Google Gemini - Used for code generation (when needed) and content creation
  • DALL-E 3 - Used for image generation for the project
• Grammarly - Used for grammar checking for the project

Accessibility, SEO and Optimization Checks

The goal for this project is to meet with WCAG 2.1 AA standards, but strive for WCAG 2.1 AAA standards whenever possible.

• Accessibility Insights - Accessibility Insights accessibility evaluation tool for the project
• AInspector - Accessibility inspection tool
• AxeDevTools - Accessibility testing tool
• Lighthouse - Lighthouse accessibility evaluation tool for the project
• pa11y - Automated accessibility testing tool
• Siteimprove Accessibility Checker - Comprehensive accessibility checker
• WAVE Evaluation Tool - Web accessibility evaluation tool
• WCAG Contrast Checker - Color contrast checker for accessibility

Project Management

• GitHub CCCD Website Project

Source Code Management

• GitHub
• Project Page on GitHub
  • Production URL: https://github.com/CCCD-Jamaica/ccdd-sveltekit
  • Development URL: https://github.com/CCCD-Jamaica/ccdd-sveltekit/tree/development

Project Structure

• src/components: This is the main directory for the project. It contains the components for the project.
• src/lib: This is the main directory for the project. It contains the components for the project.
• src/routes: This is the main directory for the project. It contains the pages for the project.
• src/app.css: This is the main CSS file for the project. It contains the styles for the project.
• src/app.html: This is the main HTML file for the project. It contains the HTML for the project.
• src/app.js: This is the main JavaScript file for the project. It contains the JavaScript for the project.
• src/svelte.config.js: This is the main Svelte configuration file for the project. It contains the configuration for the project.
• tailwind.config.js: This is the main TailwindCSS configuration file for the project. It contains the configuration for the project.
• postcss.config.js: This is the main PostCSS configuration file for the project. It contains the configuration for the project.
• package.json: This is the main package.json file for the project. It contains the configuration for the project.
• tsconfig.json: This is the main TypeScript configuration file for the project. It contains the configuration for the project.
• vite.config.js: This is the main Vite configuration file for the project. It contains the configuration for the project.

ccdd-sveltekit