• Что бы вступить в ряды "Принятый кодер" Вам нужно:
    Написать 10 полезных сообщений или тем и Получить 10 симпатий.
    Для того кто не хочет терять время,может пожертвовать средства для поддержки сервеса, и вступить в ряды VIP на месяц, дополнительная информация в лс.

  • Пользаватели которые будут спамить, уходят в бан без предупреждения. Спам сообщения определяется администрацией и модератором.

  • Гость, Что бы Вы хотели увидеть на нашем Форуме? Изложить свои идеи и пожелания по улучшению форума Вы можете поделиться с нами здесь. ----> Перейдите сюда
  • Все пользователи не прошедшие проверку электронной почты будут заблокированы. Все вопросы с разблокировкой обращайтесь по адресу электронной почте : info@guardianelinks.com . Не пришло сообщение о проверке или о сбросе также сообщите нам.

My First Angular Project; Event Booking/Registration App Using Angular, Node.js, PostgreSQL.

Lomanu4 Оффлайн

Lomanu4

Команда форума
Администратор
Регистрация
1 Мар 2015
Сообщения
1,481
Баллы
155
Are you looking to build a real-world, production-ready full-stack app that uses modern tools like Angular, Node.js, Docker, PostgreSQL, and AWS? You’ve come to the right place. Let me introduce you to the Event Booking App — a sleek, modular, and scalable application for managing event registrations and sending confirmation emails.

GitHub logo

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

/

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.



A modern, full-stack Event Registration Application designed for seamless user registration, email notifications, and data management. Built with a robust tech stack, this app is responsive, scalable, and ready for deployment.
? Event Registration App

A modern, full-stack Event Registration Application designed for seamless user registration, email notifications, and data management. Built with a robust tech stack, this app is responsive, scalable, and ready for deployment.

✨ Features

  • ? User-Friendly Registration Form: Built with Angular Material for a sleek, modern UI.


  • ? Backend API Integration: Securely sends form data to a Node.js/Express backend.


  • ? Email Notifications: Sends confirmation emails via Gmail using Nodemailer.


  • ?️ PostgreSQL Database: Stores registration data reliably with Neon.tech or local PostgreSQL.


  • ✅ Real-Time Feedback: Displays toast messages for form submission success or errors.


  • ? Responsive Design: Optimized for mobile and desktop devices.


  • ? Deployment-Ready: Configured for easy deployment on popular platforms, including Docker and AWS.


  • ? Modular Architecture: Standalone Angular components for easy customization.
? Tech Stack
LayerTechnologies
FrontendAngular, Angular Material
BackendNode.js, Express.js
DatabasePostgreSQL (Neon.tech


Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.


? What is this app?


The Event Registration App is a full-stack web application that allows users to register for events via a responsive form. It handles form submissions, sends confirmation emails, and stores data securely using PostgreSQL.

? Tech Stack

LayerTech
FrontendAngular + Angular Material
BackendNode.js + Express.js
DatabasePostgreSQL (via Neon.tech or RDS)
EmailNodemailer (Gmail SMTP)
✨ Key Features


✅ Beautiful, responsive registration form
✅ Instant email confirmations via Nodemailer
✅ PostgreSQL integration for data persistence
✅ Docker support for containerized deployment
✅ Full AWS ECS deployment guide using ECR & Fargate
✅ Modular codebase with clean architecture

? Project Structure


event-booking/
├── backend/ # Node.js API
│ ├── controllers/
│ ├── routes/
│ ├── mailer.js
│ ├── db.js
│ ├── server.js
│ └── Dockerfile
├── frontend/ # Angular App
│ ├── src/app/
│ ├── styles.css
│ ├── index.html
│ └── Dockerfile
├── docker-compose.yml
└── README.md
? Local Setup in 5 Minutes


1. Clone the repo


git clone

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.


cd event-booking

2. Set up environment variables

Create a .env file inside /backend:


PORT=5000
DB_URL=your_postgres_connection_string
EMAIL_USER=your_gmail@gmail.com
EMAIL_PASS=your_gmail_app_password

3. Run with Docker Compose


docker-compose up --build

Now visit:

? Containerized Deployment with Docker


Dockerfiles are provided for both backend and frontend. You can build and run containers locally, or push them to AWS ECR for deployment.


docker build -t event-booking-backend ./backend
docker build -t event-booking-frontend ./frontend
☁ Deploying on AWS (ECS Fargate)


The repo includes a step-by-step guide to deploy the app on AWS:

  1. Push Docker images to Amazon ECR
  2. Use AWS ECS (Fargate) to run frontend & backend tasks
  3. Set up a Load Balancer
  4. Configure your environment variables
  5. Connect to PostgreSQL (RDS or Neon.tech)

The guide also includes JSON examples for task definitions, troubleshooting tips, and API integration steps.

? Email Confirmation via Gmail


Use Nodemailer + Gmail SMTP to send confirmation emails. Be sure to use an App Password and not your main Gmail password.


const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASS,
},
});
? Want to Customize?


Change the form fields in:


frontend/src/app/app.component.html

Update backend logic in:


backend/controllers/registerUser.js

Modify email templates in:


backend/mailer.js
? Troubleshooting Tips

  • Emails not sending? Double-check your Gmail App Password.
  • Database not connecting? Verify your DB_URL and access settings.
  • Frontend can't reach API? Update the frontend API URL to match your backend's public DNS (especially in production).
?‍? Contributing


Contributions are welcome!
Fork the repo → Create a branch → Submit a PR ?

⭐ Give It a Star


If you like this project or found it helpful, please give it a ⭐ on GitHub. It motivates others and helps them find it, too!

? Links


Thanks for reading! Let me know if you deploy it or have any cool feature suggestions. ?

Follow for more!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

who ❤ React.jsx!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

 
Вверх Снизу