{"id":29724719,"url":"https://github.com/aldoignatachandra/fullstack-simple-contact-form","last_synced_at":"2026-02-09T01:04:21.399Z","repository":{"id":299987113,"uuid":"1004817222","full_name":"aldoignatachandra/Fullstack-Simple-Contact-Form","owner":"aldoignatachandra","description":"Fullstack simple contact form application built with Go, Laravel, and Next.js, featuring a microservices architecture with Docker containerization","archived":false,"fork":false,"pushed_at":"2025-06-21T05:29:08.000Z","size":146,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-25T01:10:46.279Z","etag":null,"topics":["docker-compose","fullstack","golang","next-js","php","simple-project"],"latest_commit_sha":null,"homepage":"","language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aldoignatachandra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-19T08:19:18.000Z","updated_at":"2025-06-22T16:19:34.000Z","dependencies_parsed_at":"2025-06-21T06:21:21.183Z","dependency_job_id":"7633f424-e73f-4346-bf93-fd05a6c81041","html_url":"https://github.com/aldoignatachandra/Fullstack-Simple-Contact-Form","commit_stats":null,"previous_names":["aldoignatachandra/simple-fullstack-contact-form","aldoignatachandra/fullstack-simple-contact-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aldoignatachandra/Fullstack-Simple-Contact-Form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aldoignatachandra%2FFullstack-Simple-Contact-Form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aldoignatachandra%2FFullstack-Simple-Contact-Form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aldoignatachandra%2FFullstack-Simple-Contact-Form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aldoignatachandra%2FFullstack-Simple-Contact-Form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aldoignatachandra","download_url":"https://codeload.github.com/aldoignatachandra/Fullstack-Simple-Contact-Form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aldoignatachandra%2FFullstack-Simple-Contact-Form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29252665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T22:49:53.206Z","status":"ssl_error","status_checked_at":"2026-02-08T22:49:51.384Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker-compose","fullstack","golang","next-js","php","simple-project"],"created_at":"2025-07-24T21:40:12.246Z","updated_at":"2026-02-09T01:04:21.394Z","avatar_url":"https://github.com/aldoignatachandra.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contact Form Project\n\nThis repository is part of my learning journey in fullstack engineering, where I'm exploring modern web development practices including microservices architecture, containerization, and multi-language development. The project was developed as part of the curriculum at [BuildWithAngga](https://buildwithangga.com/), under the mentorship of [Tri Wicaksono](https://triwicaksono.com/). Through this project, I've gained hands-on experience with Go, Next.js, and Laravel, as well as Docker containerization and API development.\n\n## 📚 Introduction\n\nThis project is a complete contact form solution with three main components:\n\n1. `Client Contact Form` - A Next.js frontend for users to submit contact messages\n2. `API Contact Form` - A Go backend API for processing and storing contact messages\n3. `CMS Contact Form` - A Laravel admin panel for managing contact messages\n\nAll components are containerized with Docker for easy **deployment** and **development**.\n\n## 🏗️ Architecture\n\nThe project follows a microservices architecture with the following components:\n\n- `Client Contact Form` : Next.js application that provides a simple interface for submitting contact messages\n- `API Contact Form` : Go API that handles data validation, storage, and retrieval of contact messages\n- `CMS Contact Form` : Laravel application that provides a simple admin interface for managing contact messages\n- `MariaDB` : Database for storing contact messages\n- `PHPMyAdmin` : Web interface for database management\n\n## 🗂️ Project Structure\n\n```\n├── app/\n│   ├── api-contact-form/       # Go API backend\n│   │   ├── config/             # Database and environment configuration\n│   │   ├── handlers/           # HTTP request handlers\n│   │   ├── models/             # Data models\n│   │   ├── repositories/       # Database interaction layer\n│   │   ├── services/           # Business logic layer\n│   │   └── main.go             # Application entry point\n│   ├── client-contact-form/    # Next.js frontend\n│   │   ├── src/                # Source code\n│   │   │   ├── api/            # API route handlers\n│   │   │   └── app/            # Next.js app directory\n│   │   └── public/             # Static assets\n│   └── cms-contact-form/       # Laravel admin panel\n│       ├── app/                # Application code\n│       │   ├── Http/           # HTTP controllers and middleware\n│       │   └── Services/       # Service layer for API communication\n│       ├── resources/          # Views and assets\n│       └── routes/             # Route definitions\n└── docker-compose.yaml         # Docker Compose configuration\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Docker\n- Git\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/aldoignatachandra/Fullstack-Simple-Contact-Form.git\ncd Fullstack-Simple-Contact-Form\n```\n\n2. Create environment files:\n\n```bash\ncp .env.example .env\ncp app/api-contact-form/.env.example app/api-contact-form/.env\ncp app/client-contact-form/.env.local.example app/client-contact-form/.env.local\ncp app/cms-contact-form/.env.example app/cms-contact-form/.env\n```\n\n3. Configure the environment variables in the .env file:\n\n```bash\n# Database Configuration\nMYSQL_ROOT_PASSWORD=rootpassword\nMYSQL_DATABASE=contactsdb\nMYSQL_USER=user\nMYSQL_PASSWORD=password\n\n# Port Mapping Configuration\nHOST_MARIADB_PORT=3306\nCONT_MARIADB_PORT=3306\n\nHOST_PHPMYADMIN_PORT=8011\nCONT_PHPMYADMIN_PORT=80\n\nHOST_API_PORT=8080\nCONT_API_PORT=8080\n\nHOST_CMS_PORT=8081\nCONT_CMS_PORT=80\n\nHOST_CLIENT_PORT=3000\nCONT_CLIENT_PORT=3000\n```\n\n4. Start the application:\n\n```bash\ndocker compose up -d\n```\n\n5. Wait for all services to start up (this may take a few minutes for the first run).\n\n## 🌐 Accessing the Applications\n\nAfter starting the services, you can access the different components at:\n\n- Client Contact Form : http://localhost:3000\n- CMS Admin Panel : http://localhost:8081\n- API Endpoints : http://localhost:8080\n- PHPMyAdmin : http://localhost:8011 (Username: root, Password: rootpassword)\n\n## 🧩 Components\n\n### Client Contact Form\n\nThe client contact form is built with Next.js and provides a simple interface for users to submit their contact information. It includes:\n\n- Form validation\n- API integration\n- Responsive design\n- Success confirmation page\n\n### API Contact Form\n\nThe API is built with Go and uses the Gin framework. It provides:\n\n- RESTful endpoints for CRUD operations\n- Data validation\n- Database integration with GORM\n- CORS configuration for cross-origin requests\n\n### CMS Contact Form\n\nThe CMS is built with Laravel and provides an admin interface for managing contacts. It includes:\n\n- Contact listing with pagination\n- Contact details view\n- Edit and delete functionality\n- API integration with the backend\n\n## 🛠️ Development\n\n### Modifying the API\n\nTo make changes to the Go API:\n\n1. Make your changes in the `app/api-contact-form` directory\n2. Rebuild the container in the root directory:\n\n```bash\ndocker compose up -d --build api-contact-form\n```\n\n### Modifying the Client Contact Form\n\nTo make changes to the Next.js frontend:\n\n1. Make your changes in the `app/client-contact-form` directory\n2. Rebuild the container in the root directory:\n\n```bash\ndocker compose up -d --build client-contact-form\n```\n\n### Modifying the CMS\n\nTo make changes to the Laravel CMS:\n\n1. Make your changes in the `app/cms-contact-form` directory\n2. Rebuild the container in the root directory:\n\n```bash\ndocker compose up -d --build cms-contact-form nginx-cms-contact-form\n```\n\n## 🧪 Testing\n\n### API Testing\n\nYou can test the API endpoints using tools like `cURL`, `Postman`, or any `HTTP client`.\n\nExample cURL command to create a new contact:\n\n```bash\ncurl -X POST http://localhost:8080/contacts \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"name\":\"John Doe\",\"email\":\"john@example.com\",\"phone\":\"1234567890\",\"message\":\"Hello, this is a test message.\"}'\n```\n\n## 🧩 Areas for Improvement\n\n### Authentication and Authorization\n\n- Implement basic authentication and authorization for the API endpoints\n- Use JWT tokens for secure authentication\n\n### Logging and Monitoring\n\n- Enhance logging to include more detailed information\n- Set up monitoring to track application performance and errors\n\n### API Documentation\n\n- Create comprehensive API documentation using tools like Swagger or Postman\n\n### Unit Testing\n\n- Write unit tests for the API to ensure code quality and reliability\n\n### CI/CD Pipelines\n\n- Set up CI/CD pipelines to automatically build, test, and deploy the application\n\n### Scalability Enhancements\n\n- Explore strategies for horizontal scaling, such as using a database cluster or a message queue\n\n## 👨‍💻 Author\n\nCreated with 💻 by Ignata\n\n- 📂 GitHub: [Aldo Ignata Chandra](https://github.com/aldoignatachandra)\n- 💼 LinkedIn: [Aldo Ignata Chandra](https://linkedin.com/in/aldoignatachandra)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faldoignatachandra%2Ffullstack-simple-contact-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faldoignatachandra%2Ffullstack-simple-contact-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faldoignatachandra%2Ffullstack-simple-contact-form/lists"}