DEV Community: Elena Diaz

My First Hackathon: A Journey of Collaboration and Learning

Elena Diaz — Tue, 07 Nov 2023 00:34:51 +0000

Have you ever wondered what it’s like to participate in a hackathon? Well, let me share my experience from the Women Who Code Hackathon for Social Good 2023. Lasting 9 days, this exhilarating event brought together women from different corners of the globe, creating a supportive and inspiring environment for beginners and experts alike.

Introduction: Overcoming Initial Hesitations and Regrets

Joining the hackathon was an exciting adventure, filled with new experiences and collaborative learning. For someone new to the world of hackathons, the initial steps might seem daunting, but with the right support and enthusiasm, it can turn into a rewarding learning experience.

As someone who has been working as a frontend developer for over five years, I recently embarked on my first hackathon experience at the Women Who Code Hackathon for Social Good 2023. I'll be honest – during my college years, the idea of participating in a hackathon terrified me. I often second-guessed my abilities and were super competitive. Looking back, I regret not taking the leap sooner. I realize now that the learning and growth that come from such experiences are invaluable. This experience taught me that stepping out of your comfort zone brings incredible growth and learning. So, if you are feeling hesitant like I was, trust me, it's never too late to embrace new challenges and opportunities for personal and professional development.

Getting Started: The Joy of Teaming Up

Discovering the hackathon through Women Who Code social groups, I initially planned to go solo. However, a friend from another group reached out, and we decided to team up. We pitched our ideas to the Women Who Code community, and before we knew it, we had an enthusiastic squad of members on board, each contributing their distinct skills and perspectives to the table. With specialists focusing on backend development, UI/UX design, and project research, our team was a powerhouse of diverse skills and perspectives.

The Hackathon Experience

The nine-day hackathon commenced with an energized meet-up, allowing us to strategize and outline our project's key milestones. With our team spread across different time zones, from New York, Italy, London, and Texas, we leveraged digital tools such as Google Meet, Slack to ensure seamless communication and coordinated efforts. Additionally, we used Figma for prototyping designs and Trello helped us stay organized with tasks.

Balancing the intensity of the hackathon, we put in some serious hours while making sure no one burned out. Whenever roadblocks arose, we fostered open communication through Slack, readily sharing resources and helping overcome any challenges hindering our progress.

Despite the short deadline and logistical complexities, the collaborative spirit among like-minded women in the field fostered an enriching environment, creating a supportive space where we could learn and thrive together. This positive vibe and teamwork truly powered our journey, bringing us closer to project completion.

Embracing New Technologies and User-Centric Designs

During the hackathon, my teammate and I focused on frontend development using React Native for Web, uncovering its immense potential for our project. While we were well-versed in React, our knowledge of React Native for Web was initially limited. Nevertheless, with the unwavering support of our team, we eagerly immersed ourselves in the world of frontend development, leading to a series of challenges and victories. I explored the integration of a barcode scanner using JavaScript libraries, adding depth to our project and enhancing its user appeal. Alongside managing authentication and secure routes, my focus extended to refining responsive design, incorporating user interfaces via Material UI, and seamlessly implementing API calls for efficient database access. Each step bolstered my understanding of the dynamic web development landscape.

Reflecting on the Journey

Despite our team not securing the top position and not being able to build all the functionality we had initially planned, the wealth of knowledge and skills gained in such a short span was truly remarkable. The hackathon not only highlighted the potential of rapid application development but also underscored the vital role of teamwork, communication, and adaptability in achieving collective success. Navigating new technologies, troubleshooting in real-time, and collaborating with a diverse group of like-minded individuals provided a profound perspective on the world of coding and development. Overall, this experience has undeniably sparked a newfound enthusiasm for future hackathons and collaborative endeavors.

If you are considering joining a hackathon, my advice is simple: dive in with an open mind, embrace the challenges, and relish every moment of the learning journey. You will be amazed at what you can accomplish when surrounded by a supportive and empowering community of fellow coders and innovators.

Happy coding! 👩🏻‍💻💖

If you found this helpful, support my work by sharing this article, referring me for frontend jobs, or if inclined Buy Me A Coffee, Ko-fi, or Paypal. Your support keeps me going – thank you!

Part 3 - Building a Full Stack Contact Form: Deployment 2023

Elena Diaz — Sun, 20 Aug 2023 01:29:59 +0000

Welcome to Part 3 of our comprehensive full-stack contact form series! In this installment, your final dive will go into the deployment, taking the impressive groundwork you've laid so far and transforming it into a fully functional and hosted communication tool online.

Preparing for Deployment
- Backend Enhancement: Transitioning to HTTPS
- Frontend Refinement: Transitioning to HTTPS and Production Build
Deployment: GitHub and CyberPanel
- Backend Deployment
- Keeping the Backend Server Running: PM2
- Frontend Deployment
Troubleshooting
Conclusion

Preparing for Deployment

In this phase, we'll be focusing on the crucial steps to get your contact form ready for deployment. This will involve making the necessary adjustments, including the conversion of your backend from HTTP to HTTPS to ensure seamless POST requests.

Backend Enhancement: Transitioning to HTTPS

In order to ensure secure communication between your frontend and backend, it's important to convert your backend from using HTTP to HTTPS. This transition guarantees the secure transfer of data through your full-stack contact form. SSL certificates will be needed to complete this part.

Resource and Reference: A valuable resource that provides detailed insights into configuring SSL certificates for Node.js HTTPS can be found at https://adamtheautomator.com/https-nodejs/

Install HTTPS Package: Start by installing the https package using the following command in your terminal:

npm i https

Import HTTPS Module: At the top of your server.js file, import the https module as follows:

const https = require('https');

Update Server Creation: Modify the server creation process. You'll now create an HTTPS server instance using the https.createServer method which will replace the app.listen method going forward. This involves specifying the paths to your SSL certificate and private key files.

const httpsServer = https.createServer(
    {
        key: fs.readFileSync(
            'path-to-privkey.pem'
        ),
        cert: fs.readFileSync(
            'path-to-cert.pem'
        ),
    },
    app
);

httpsServer.listen(serverPort, () =>
    console.log(`backend is running on port ${serverPort}`)
);

Don't forget to comment out or remove the app.listen line.

With these updates, your backend is now transitioned to use HTTPS. In the next step, we'll make a small change in the frontend to ensure that the fetch URL points to the HTTPS backend, completing the circle of secure communication between your frontend and backend.

Frontend Refinement: Transitioning to HTTPS and Production Build

HTTPS: The HyperText Transfer Protocol Secure (HTTPS) guarantees secure data exchange over the internet by encrypting information exchanged between the server and the client. ==HTTPS will be used and discussed in part 3 of the series before deployment.==

With the backend now utilizing HTTPS for secure communication, it's essential to ensure that the frontend also points to the updated secure API endpoint. Let's make this crucial update:

Update API Endpoint URLs: Open your frontend codebase and find the sections where you make API calls to the backend. If you've transitioned your backend to use HTTPS, simply add the letter "s" to the URL to switch from HTTP to HTTPS.

let response = await fetch('https://localhost:5000/send', {

Build the React application for production. I made a production specific folder outside from the dev folder. On package.json, add the build script. This script builds the react application, saves the build to the prod folder and removes it from the dev folder.

Build for Production: To get your React application ready to be deployed, it needs to undergo a special process called "building for production." This process is like packaging your app in a way that makes it suitable for sharing over the internet. To make things organized, I've created a separate folder specifically for the production version of your app. This makes it super easy when it comes to uploading the production version to GitHub.

Here's how to do it:

Creating a Production Folder: I've set up a special folder outside of your development workspace. This is where the final version of your app that's ready for deployment will be placed.
Build Script in package.json: I've added a special script to the package.json file. This script automates the process. First, it builds the React app in the development folder. Then, it copies the built files to the production folder. Finally, it tidies up the development folder by removing the unnecessary build files.

If you're using create-react-app, the build script will be:

"build": "react-scripts build && XCOPY C:\\Dev\\contactform\\build\\\* C:\\Prod\\contactform_prod /s /y && RMDIR /s /q C:\\Dev\\contactform\\build",

If you're using nano-react-app, the build script will be:

"build": "vite build && XCOPY C:\\Dev\\contactform\\build\\\* C:\\Prod\\contactform_prod /s /y && RMDIR /s /q C:\\Dev\\contactform\\build",

Run the Build Script: Save the changes in your package.json file then run the following command to initiate the production build in your terminal:

npm run build

Publish to GitHub: Open the production build folder using VSCode. Go to the source control section and select publish to github as a private repo.

This will make your production-ready frontend code ready for Cyberpanel.

Deployment: GitHub and CyberPanel

Backend Deployment

When it comes to deploying your backend to the server, the process is smooth and straightforward. Here's how you do it:

Remote Connection: Connect remotely to your CyberPanel server, where your portfolio website is stored. Go to the directory location where your websites public_html is located. Just outside the public_html folder, create a folder named emailsvc.

The necessary backend files will go inside this folder, which are:

config.js
package.json
server.js

Remember, there's no need to import the node_modules folder; it's already in your package.json.

Install Packages: In the terminal, navigate to the location of your backend files on the server. Install the required packages. You can do this by running either of the following commands:

npm install

npm install express nodemailer cors https --save

This step ensures that your backend has all the necessary dependencies to run smoothly.

Test Backend: To ensure that your backend is working correctly on the server, log in to your host service through a terminal, and run the command:

npm run mailstart

This test run is crucial to confirm that everything is set up and ready for action.

With your backend deployed and successfully tested, you've achieved a significant milestone in bringing your full-stack contact form to life in a live environment.

It's important to note that if you close your terminal that is logged into your host service, the backend could stop running. To ensure continuous operation, follow the upcoming steps that will help you keep your backend running reliably.

Keeping the Backend Server Running: PM2

To ensure the continuous operation of your backend, we'll use a tool called PM2. PM2 allows you to manage various backend services and keep them running efficiently. To get more information about PM2 go to: https://pm2.keymetrics.io/docs/usage/process-management/

Install PM2: In your terminal, run the following command to install PM2 globally:

npm install pm2 -g

This command will make PM2 available for managing your backend services.

Unique Start Scripts: Ensure that each of your backend services has a distinct start script name. For example, in our case, we named our script mailstart.
Start the Service: To initiate a backend service using PM2, execute the following command:

pm2 start "npm run mailstart"

This command tells PM2 to manage the execution of your backend service.

Stop the Service: If you need to halt the service, you have two options:

To stop all backend services simultaneously, run:

pm2 stop all

To stop a specific service, provide its unique identifier (ID):

pm2 stop <id>

By using PM2, you can ensure that your backend services stay active. This is a crucial step in making sure your full-stack contact form remains operational and accessible at all times.

Frontend Deployment

Deploying the frontend of your application using CyberPanel's Git management feature is the final step towards making your full-stack contact form accessible to users.

Log in to your CyberPanel dashboard and navigate to the "Websites" section, then "List Websites" sub-section.
Go to the "Manage" section of your website in this list, then look for the "Manage Git" button and click on it.
Choose the folder where your portfolio website is deployed in the drop-down list.
Look for the "Pull" button and click on it. This action will retrieve the latest changes from your GitHub repository and deploy them to the selected folder.

🥳Congratulations, your contact form is deployed! 🏆🎉

Troubleshooting

During the process of creating and deploying your full-stack contact form, you might encounter a few issues. Here are a couple of common challenges and their solutions that I came across:

Permission Denied Error with SSL Certificate: If you encounter an EACCES (permission denied) error while using the SSL certificate, it's likely a file permission issue. To resolve this, navigate to the location of the key file (privkey.pem), and change its permissions using the following command:

CHMOD 744 privkey.pem

Auto-Reply Emails Going to Spam: Sometimes, auto-reply messages can end up in recipients' spam folders. I resolved this by including an HTML version of the message (converted from the text version).

These resources really helped figure it out:

Text to HMTL converter helped with emails ending up in spam folder
This stack overflow really helped with a nodemailer issue
Test-mailer to see what security issues could appear

Conclusion

🌟You've now gone through the entire process of creating, deploying, and troubleshooting your full-stack contact form!🌟

Let's recap:

Tutorial Recap: You started by creating a sleek and functional frontend contact form using React and then moved on to setting up the backend using Node.js. The form's data is sent via a secure POST request to your backend, and finally an auto-reply message is sent to the user.
Error Handling and Security: Throughout this journey, we've emphasized the importance of handling errors gracefully and prioritizing security. Properly handling errors and ensuring the secure transmission of data are critical aspects of any web application.
Experiment and Customize: While this tutorial provides a solid foundation, don't hesitate to experiment and customize the code to match your specific needs. Every project is unique, and exploring different functionalities can be a great learning experience.

With your full-stack contact form up and running, you're now better equipped to handle communication with visitors to your website or portfolio. As you continue to develop your skills, you'll find even more ways to leverage the power of full-stack development for creating engaging and dynamic web applications.

If you have any questions or if there are additional steps you'd like me to cover, please feel free to let me know.

Happy coding! 🚀🌌🌝

If you found this helpful, support my work by sharing this article, referring me for frontend jobs, or if inclined Buy Me A Coffee, Ko-fi, or Paypal. Your support keeps me going – thank you!

Part 2 - Building a Full Stack Contact Form: Node.js Backend 2023

Elena Diaz — Sun, 20 Aug 2023 01:29:16 +0000

Welcome to Part 2 of our Full Stack Contact Form Series! We're about to unlock the world of backend development to enable the actual sending of emails. Get ready to harness the power of Node.js, Express, Nodemailer, CORS, and HTTPS to create a seamless communication experience. By the end of this guide, you'll have hands-on experience on how these technologies work together to bring your contact form to life.

Backend Development
- Creating Your Node.js Project with npm
- Installing Essential Dependencies (Express, Nodemailer)
- Storing Data Constants in config.js
- Setting Up Your server.js Backend File
- Creating Nodemailer Functions for Email Sending
- Crafting API Routes for Email Handling
- Testing Your Full-Stack Contact Form Locally
GitHub Repository for Backend Code

Backend Development

Our journey into the backend realm begins with Node.js (I'm using version 18.13.0) and the npm package manager. These tools will be your trusty companions as we embark on building the backbone of our email-sending mechanism. So, let's roll up our sleeves and get started on creating a backend that ensures your contact form is not just eye-catching, but fully functional too.

Creating Your Node.js Project with npm

Let's kick off our backend development by setting up a Node.js project using npm. This will provide the foundation for building the functionalities that power your email-sending mechanism.

Create a Dedicated Backend Folder: Begin by creating a folder specifically for your backend code. Open this folder in your preferred code editor, like VSCode.
Initialize the Project: In the terminal within your backend folder, enter the following command to generate a basic package.json template file:

npm create -y

This will initialize your Node.js project and set up the essential package.json file.

Structure Your Files: Create two important files within your backend folder:

server.js: This is where you'll write the core functionality code for your backend.
config.js: Utilize this file to store email configuration details.

Here's how your project folder might be structured:

/contactform_backend
    ├── package.json
    ├── server.js
    ├── config.js

With these foundational steps complete, you've set the stage for your backend development journey. The package.json file will hold key information about your project, and the server.js file will become the heart of your email-sending mechanism. The config.js file will be where we store our constant variables. In the next section, we'll dive into creating the server and setting up the functionalities that bring your contact form to life.

Installing Essential Dependencies (Express, Nodemailer)

Now, let's equip your backend with the necessary tools to bring your email-sending mechanism to life.

Technologies utilized in this project are:

Node.js: A runtime environment enabling the execution of JavaScript code on the server-side.
Express: A streamlined and versatile web application framework built for Node.js, optimized for routing and middleware management.
Nodemailer: A specialized Node.js module designed to simplify the process of sending emails within applications.
CORS: An Express middleware that facilitates Cross-Origin Resource Sharing, allowing seamless handling of HTTP requests across varying origins.

Let's install the required dependencies that make the magic happen.

Installing Dependencies: In your terminal, navigate to your backend folder and install the required dependencies using the following commands:

   npm install express nodemailer cors --save

This will add express, nodemailer, and cors to your project, enabling you to create a functional server and send emails.

Updating Your package.json: Open your package.json file and add the following mailstart entry to your scripts section:

"scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "mailstart": "node server.js"
        },

and change the main field from config.js to server.js.

"main": "server.js",

The full package.json should look like this:

    {
        "name": "contactform_backend",
        "version": "1.0.0",
        "description": "",
        "main": "server.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "mailstart": "node server.js"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "cors": "^2.8.5",
            "express": "^4.18.2",
            "nodemailer": "^6.9.4"
        }
}

This updated package.json includes scripts to start your server and lists the dependencies your backend relies on. With these dependencies installed and your package.json updated, your backend is armed with the tools it needs to function effectively.

Storing Data Constants in config.js

The config.js file is where you'll store the email configuration details, such as credentials for sending emails and predefined messages.

Populate with Credentials: In config.js, insert the following code:

// change the following details with your information
    module.exports = {
        USER: 'NewEmail@domain.com',
        PASS: 'password',
        EMAIL: 'NewEmail@domain.com',
        HOST: 'smtp.mailhost.com',
        MAILPORT: 555,
        YOURNAME: 'Your Name',
        YOURSITE: 'www.yoursite.com',
    };

Replace the placeholders with the actual credentials and information that correspond to the domain email account created on Whois.com (see part 1). These details are essential for successfully sending emails using Nodemailer.

USER: Username of email account (domain email address set up in part 1)
PASS: Password of email account
EMAIL: Email address
HOST: SMTP host
MAILPORT: STMP port, usually 587
YOURNAME: Your full name for the sender and auto reply message
YOURSITE: Your portfolio website

Example of domain email credentials:

Setting Up Your server.js Backend File

Your server.js file is the heart of your backend. Here you'll configure routes, send emails, and make sure everything runs smoothly. Let's dive in and set up the initial structure.

Importing Required Packages and Initial Setup: Start by importing the necessary packages and setting up the initial configuration:

var express = require('express');
var router = express.Router();
var nodemailer = require('nodemailer');
var cors = require('cors');
const fs = require('fs');
const creds = require('./config');

const app = express();
app.use(cors());
app.use(express.json());
app.use('/', router);

Creating a Test Route: Let's create a basic test route to ensure your backend is up and running:

app.get('/', (req, res) => {
    res.json('hi');
});

Listening to the Port: Finally, set your backend to listen on a specific port (in this case, port 5000):

app.listen(serverPort, () => console.log(`backend is running on port ${serverPort}`));

Testing the Backend: To test your backend, run the following command in your terminal:

npm run mailstart

A successful start of your backend will be indicated in the terminal. You can also open your browser and navigate to http://localhost:5000 to see the "hi" message.

With your server.js file set up and now listening on port 5000, your backend is ready to go to respond to requests!

As we make updates to the backend, it's important to note that we'll need to stop and start it for the changes to take effect.

To turn off the backend, press Ctrl + C in the terminal where the backend is currently running.

To turn on the backend, run this command again:

npm run mailstart

Creating Nodemailer Functions for Email Sending

Let's bring the power of Nodemailer into your backend to enable the actual sending of emails. We'll start by configuring Nodemailer using the details from your Whois email information.

Setting Up Transport Configuration: Create the transport object, which holds the configuration for sending emails. Replace the fields with the details from your Whois email information. This includes the SMTP host, port, user, password, and the email address from which the emails will be sent:

var transport = {
    host: creds.HOST,
    port: creds.MAILPORT,
    auth: {
        user: creds.USER,
        pass: creds.PASS,
    },
    from: creds.EMAIL,
};

Creating the Nodemailer Transporter: Next, utilize the transport configuration to create a Nodemailer transporter. This transporter is responsible for sending emails. We'll also use the verify method to ensure that the server is ready to accept messages:

var transporter = nodemailer.createTransport(transport);
transporter.verify((error, success) => {
    if (error) {
        console.log(error);
    } else {
        console.log('Server is ready to take messages');
    }
});

Let's start the backend server. In case of any issues, the terminal will show an error message, usually due to incorrect SMTP settings.

Crafting API Routes for Email Handling

Now, we're about to tie everything together by creating API routes that handle email sending requests. These routes will enable your backend to receive data from your frontend, send the message to your email, and even respond with an automated acknowledgment. Exciting, isn't it?

router.post('/send', (req, res, next) => {
    var name = req.body.name;
    var email = req.body.email;
    var message = req.body.message;
    var senderEmail = `${name} <${creds.EMAIL}>`;
    var yourEmail = `${creds.YOURNAME} <${creds.EMAIL}>`;
    var content = `name: ${name} \n email: ${email} \n message: ${message} `;
    var mail = {
        from: senderEmail,
        to: creds.EMAIL,
        subject: `New Portfolio Message from ${name}`,
        text: content,
    };

//Deliver message from your portfolio to your email address
    transporter.sendMail(mail, (err, data) => {
        console.log(err);
        console.log(data);
        if (err) {
            res.json({
                status: 'fail',
            });
        } else {
            res.json({
                status: 'success',
            });

            //If Success, send Auto Reply email
            transporter.sendMail(
                {
                    from: yourEmail,
                    to: email,
                    subject: 'Message received',
                    text: `Hi ${name},\nThank you for sending me a message. I will get back to you soon.\n\nBest Regards,\n${creds.YOURNAME}\n${creds.YOURSITE}\n\n\nMessage Details\nName: ${name}\n Email: ${email}\n Message: ${message}`,
                    html: `<p>Hi ${name},<br>Thank you for sending me a message. I will get back to you soon.<br><br>Best Regards,<br>${creds.YOURNAME}<br>${creds.YOURSITE}<br><br><br>Message Details<br>Name: ${name}<br> Email: ${email}<br> Message: ${message}</p>`,
                },
                function (error, info) {
                    if (error) {
                        console.log(error);
                    } else {
                        console.log('Message sent: ' + info.response);
                    }
                }
            );
        }
    });
});

In this code, the /send route is created to handle POST requests from your frontend. It extracts the name, email, and message from the request body and constructs an email to send to your specified email address. It also sends an auto-reply to the sender using the provided data.

With this code, your backend is now fully equipped to handle email sending requests. The message data will be extracted from the request and sent to your designated email address, while an automatic acknowledgment will be sent back to the sender. Your backend is primed and ready to test.

Testing Your Full-Stack Contact Form Locally

Great job! You're now at the exciting stage of testing your full-stack contact form locally. Follow these steps to see your creation in action:

Start the Backend: Open a terminal window, navigate to the backend folder and run:

npm run mailstart

This command will fire up your backend server.

Start the Frontend: Open another terminal window, navigate to the frontend folder, and run:

npm run start

This will start your frontend development server.

Test the Form: With both the backend and frontend servers up and running, open your browser and navigate to the localhost for the frontend. Mine defaults to http://localhost:3000 (use the appropriate port for your frontend server).

Fill out the contact form with some test data with a valid return email and hit the submit button.

You should see a successful message on the frontend, indicating that the message was sent.

Try testing the form for issues:

These are covered on the client-side.

missing data
using an invalid email format

You should see the following error message on the frontend when the form is unable to send the message with:

incorrect credentials
backend server is turned off

Check Emails: Now, check your email inbox. You should receive an email from the tester's name containing the message details. The sender will also receive an auto-reply acknowledging the message.

Your contact form's mailbox will show the following:

The sender will receive this auto-reply message:

With these steps, you've successfully tested your full-stack contact form locally! 🎇 The messages are being sent from your frontend, processed by your backend, and received in your email inbox. It's a satisfying moment when everything comes together seamlessly.

GitHub Repository for Backend Code

You can find the complete backend code on GitHub.

In the upcoming and final part of this series, we'll delve into the exciting realm of deploying your full-stack contact form, making it accessible online. This step is pivotal as it enables you to amplify your communication capabilities with visitors to your website. Stay tuned for a wealth of valuable insights and practical guidance that will take your project to its grand finale.

As a quick recap, if you haven't already, make sure to catch Part 1: Getting Started & React Frontend Development of this series where we ventured into creating the frontend contact form, skillfully integrating the POST request that seamlessly connects to the backend. Your journey is nearly complete, and the culmination promises to be both enlightening and rewarding. Part 3: Deployment will be the final touches and getting everything ready for deployment.

Happy coding! 🚀🌠

If you found this helpful, support my work by sharing this article, referring me for frontend jobs, or if inclined Buy Me A Coffee, Ko-fi, or Paypal. Your support keeps me going – thank you!

Part 1 - Full Stack Contact Form: Getting Started & React Frontend 2023

Elena Diaz — Sun, 20 Aug 2023 01:28:14 +0000

Have you ever followed a tutorial to create a contact form, only to hit a roadblock when it comes to moving beyond your local environment? If that frustration sounds familiar, you're in good company. As I worked on refining my portfolio site and adding more functionalities, I realized the vital role that backend processes play in achieving a truly flawless user experience. This insight prompted me to put together a comprehensive tutorial that leaves no stone unturned – from initial form creation to the final deployment steps.

Throughout this series, we'll delve deep into the realm of web development, crafting a polished and fully functional contact form that enhances your website's communication capabilities. By the time you reach the end of this guide, you'll possess the skills needed to elevate your website with a truly seamless communication channel.

Getting Started
- What You'll Accomplish
- Prerequisites and Tools
Setting Up a Domain Email with Whois.com
Setting Up the Frontend (React)
- Creating a New React Application
- Crafting a User-Friendly Contact Form Interface with Inputs and Messages
- Elevating the Form's Aesthetics with CSS Styling
- Enabling Form Data Management with State
- Implementing Client-Side Validation for Email Input
- Creating the Email Sending Function and Integrating Backend Communication
GitHub Repository for Frontend Code

Getting Started

Welcome to Part 1 of this 3 part comprehensive guide, where we'll embark on a journey to create a full stack contact form using the power of React and Node.js.

What You'll Accomplish

In this multi-part tutorial, I'll guide you through the process of building a robust full-stack contact form using React and Node.js. By following along, you'll:

Integrate Domain Email: Learn how to create and integrate a personalized email address associated with your domain, elevating your website's professionalism.
Create a User-Friendly Frontend: Design an intuitive and visually appealing contact form interface using React, ensuring your users have a smooth interaction.
Set Up a Powerful Backend: Build a Node.js backend to process and manage incoming contact form submissions, making sure no messages slip through the cracks.
Achieve Seamless Deployment: Deploy your completed full-stack contact form project online, allowing visitors to your website to access and utilize the contact form efficiently.

Prerequisites and Tools

Before we take the plunge into creating our full-stack contact form, let's make sure you're equipped with the right skills and tools. Here's what you'll need:

Solid Foundation: It's essential to have a strong grasp of React, JavaScript, HTML, CSS, and Node.js. These form the backbone of our development journey. Additionally, a familiarity with NPM (Node Package Manager) for handling dependencies will prove advantageous.
Code Editor: I highly recommend working with Visual Studio Code (VsCode). Its user-friendly interface and powerful features will make your coding experience smoother.
Domain Email Setup: To achieve a professional touch, we'll utilize Whois.com for configuring email addresses within your domain. This will enable automatic replies to those who reach out through the contact form.
GitHub Repository: Ensure you have a GitHub repository ready for version control and collaboration. This will be our launchpad for deploying the contact form.
Hosting Exploration: We'll explore the use of CyberPanel for hosting. Its streamlined approach will simplify the deployment process, ensuring your contact form is up and running efficiently.

Now, let's roll up our sleeves and get started on this exciting journey!

Setting Up a Domain Email with Whois.com

If you're ready to elevate the professionalism of your website, configuring a personalized domain email can be a significant step. While this guide focuses on setting up a domain email through Whois.com, it's important to note that you can achieve similar results if you have access to the necessary SMTP (Simple Mail Transfer Protocol) data from your domain provider. Here's a step-by-step guide to help you create an email address associated with your domain:

Accessing the "Manage Email" Section: Head over to Whois.com and after logging into your account and going into your domain, navigate to the "Manage Email" section. This is where you'll be orchestrating the creation of your domain-based email address.
Creating a New User: Look for the "Add User" option – this will be your gateway to establishing an email address that's intricately tied to your domain.
Form Completion: A form will pop up, fill it out with all the necessary information required for the new email address. This will include the email prefix (the part before the "@" symbol), alternate email, and other pertinent details.
User Addition and Essential Details: After successfully adding the user, a collection of essential details will be displayed. Keep these close, as they'll be integral to the backend setup.

This process ensures a personalized email address linked to your domain, enhancing your professional communication capabilities.

Setting Up the Frontend (React)

Now that we've laid the groundwork, it's time to tackle the frontend using the power of React.

Creating a New React Application

Prepare the Workspace: Begin by creating a dedicated folder for your project and open it in your preferred code editor, such as Visual Studio Code (VSCode).
Initialize the React App: Open the Terminal within your project folder and choose one of the following commands to initiate a React app template:

For a comprehensive React template:



npx create-react-app .

For a simplified minimalist React template:



npx nano-react-app .

Launching the App Locally: To run your newly created React application on your local machine, execute the following command:

If you opted for the comprehensive template:



npm start

If you went with the minimalist template, perform these two commands:



npm install
npm start

Crafting a User-Friendly Contact Form Interface with Inputs and Messages

Selecting App.js for Efficiency: To expedite development, we'll employ the App.js file for constructing the contact form. If you don't already have an App.css file, create one within the same location as App.js.



/contactform
    /src
        ├── App.css
        ├── App.jsx
        ├── index.jsx

Initial Page Structure:

The starting configuration of your page will resemble this:



import React from 'react';
import './App.css';

function App() {
    return (
        <div>
        </div>
    );
}

export default App;

Enhancing with Form Elements:

Populate your App.jsx file with the following code to build the foundation of the contact form interface:



import React from 'react';
import './App.css';

function App() {
    return (
        <div className='app'>
            <h1>Contact Me</h1>
            <form
                id='contact-form'
                className='contact-form'>
                <input
                    placeholder='name*'
                    type='text'
                    name='name'
                    required={true}
                />
                <input
                    placeholder='email address*'
                    type='email'
                    name='email'
                    required={true}
                />
                <textarea
                    maxLength={300}
                    placeholder='message (max 300 characters)*'
                    name='message'
                    required={true}
                />
                <button type='submit'>Submit</button>
            </form>
        </div>
    );
}

export default App;

Elevating the Form's Aesthetics with CSS Styling

To create a simple and user-friendly form, let's enhance its visual appeal with some CSS styling.

Defining Color Variables:

Start by setting up color variables in your :root selector:



:root {
    --maincolor: #ffcdb2;
    --basecolor: #6d6875;
    --accentcolor1: #ffb4a2;
    --accentcolor2: #e5989b;
    --accentcolor3: #b5838d;
    --whitecolor: #ffffff;
}

Structuring the App Container:

Implement styling for the main container holding the form:



.app {
    font-family: Helvetica, sans-serif;
    background-color: var(--maincolor);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--basecolor);
}

Formatting the Contact Form:

Craft styling rules for the contact form and its elements:



.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 50%;
}

.contact-form > input {
    height: 2.5rem;
    border: none;
    border-radius: 2px;
    background-color: var(--accentcolor1);
    font-size: 1.4rem;
    color: var(--basecolor);
    padding: 0.5rem;
}

.contact-form > textarea {
    height: 7rem;
    border: none;
    border-radius: 2px;
    background-color: var(--accentcolor2);
    font-size: 1.4rem;
    color: var(--basecolor);
    padding: 0.5rem;
    resize: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--basecolor);
}

.contact-form > button {
    height: 3rem;
    border: none;
    border-radius: 2px;
    background-color: var(--accentcolor3);
    font-size: 1.4rem;
    color: var(--whitecolor);
    padding: 0.5rem;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}

.contact-form > button:hover {
    transition: 0.4s ease-in-out;
    background-color: var(--basecolor);
}

Here is the final look:

Enabling Form Data Management with State

Let's delve into the realm of functionality. To streamline the process, we'll harness the power of state management, ensuring smoother data storage and updates in tandem with the backend.

Importing useState: Begin by importing the useState hook from React:



import React, { useState } from 'react';

Implementing State Instances: Set up instances for managing different aspects of the form's state:



function App() {
    //Email form
    const [emailForm, setEmailForm] = useState({
        name: '',
        email: '',
        message: '',
    });

    //Result if message was sent or not
    const [result, setResult] = useState('');

    //Status of while message is being sent
    const [status, setStatus] = useState('Submit');

    // Rest of the JSX and form components...
}

Binding State to Form Inputs: Bind the state values to the respective input fields:



    <input
        placeholder='name*'
        type='text'
        name='name'
        required={true}
        value={emailForm.name}
    />
    <input
        placeholder='email address*'
        type='email'
        name='email'
        required={true}
        value={emailForm.email}
    />
    <textarea
        maxLength={300}
        placeholder='message (max 300 characters)*'
        name='message'
        required={true}
        value={emailForm.message}
    />

Updating Submit Button and Result Display: Adjust the button text to display the sending status, and include an 'h3' element to showcase the result, bound to the 'result' state:



<button type='submit'>{status}</button>
<h3>{result}</h3>

By incorporating useState, you're effectively enhancing the management of your form's data. This dynamic approach ensures that data is stored and updated seamlessly, creating a user-friendly interaction. With these elements in place, your contact form is poised to become a dynamic communication tool.

Implementing Client-Side Validation for Email Input

Enhance your form's interactivity by incorporating client-side validation. This step will ensure smoother handling of user input and improve the overall user experience.

Function to Reset the Form: Let's begin by creating a function that clears the emailForm values once the submission is complete:



function resetEmailForm() {
        setEmailForm({ name: '', email: '', message: '' });
    }

Function to Handle Form Changes: Next, develop a function that updates the emailForm values as changes occur in the input fields. Additionally, if there's a result message displayed, it will be cleared:



function handleEmailFormChange(event) {
        setEmailForm((prevEmailData) => {
            return {
                ...prevEmailData,
                [event.target.name]: event.target.value,
            };
        });

        if (result.length > 0) {
            setResult('');
        }
    }

Applying Function to Input Fields: Implement the 'handleEmailFormChange' function to each input field using the 'onChange' event:



<input
    placeholder='name*'
    type='text'
    name='name'
    required={true}
    value={emailForm.name}
    onChange={handleEmailFormChange}
/>
<input
    placeholder='email address*'
    type='email'
    name='email'
    required={true}
    value={emailForm.email}
    onChange={handleEmailFormChange}
/>
<textarea
    maxLength={300}
    placeholder='message (max 300 characters)*'
    name='message'
    required={true}
    value={emailForm.message}
    onChange={handleEmailFormChange}
/>

Creating the Email Sending Function and Integrating Backend Communication

Now it's time to bring your contact form to life by crafting the function responsible for initiating the email sending process and integrating communication with the backend. This step will enable the dynamic interaction between your frontend and backend systems.

Adding the Form Submission Functionality: Integrate the 'handleSubmit' function with your form using the 'onSubmit' event handler:



<Form
    id='contact-form'
    onSubmit={handleSubmit}
    method='POST'>

Implementing the handleSubmit Function:

The handleSubmit function orchestrates the entire email sending process. It extracts data from the form, initiates a POST request to the backend, and handles response messages accordingly:



const handleSubmit = async (e) => {
        setResult('');
        e.preventDefault();
        setStatus('Sending...');

        const { name, email, message } = e.target.elements;

        let details = {
            name: name.value,
            email: email.value,
            message: message.value,
        };

        try {
            let response = await fetch('http://localhost:5000/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8',
                },
                body: JSON.stringify(details),
            });
            setStatus('Submit');
            let result = await response.json();

            if (result.status === 'success') {
                setResult('Message Sent!');
                resetEmailForm();
            } else if (result.status === 'fail') {
                alert('Uh oh! Message failed to send.');
            }
        } catch (error) {
            console.error(error);
            setStatus('Submit');
            setResult('Uh oh! Issues with submitting message.');
        }
    };

🎆Yay, frontend has been completed!🎆

GitHub Repository for Frontend Code

You can find the complete frontend code on GitHub.

Note: When you attempt to submit the form, you will encounter an issue as the backend has not been created yet.

With the frontend development phase successfully completed, our next step is to dive into crafting the backend. Get ready for Part 2: Node.js Backend Development, where we'll explore the backend creation process and ensure the full-stack contact form is up and running flawlessly.

Happy coding! 🚀🪐

If you found this helpful, support my work by sharing this article, referring me for frontend jobs, or if inclined Buy Me A Coffee, Ko-fi, or Paypal. Your support keeps me going – thank you!

DEV Community: Elena Diaz

My First Hackathon: A Journey of Collaboration and Learning

Introduction: Overcoming Initial Hesitations and Regrets

Getting Started: The Joy of Teaming Up

The Hackathon Experience

Embracing New Technologies and User-Centric Designs

Reflecting on the Journey

Part 3 - Building a Full Stack Contact Form: Deployment 2023

Contents

Preparing for Deployment

Backend Enhancement: Transitioning to HTTPS

Frontend Refinement: Transitioning to HTTPS and Production Build

Deployment: GitHub and CyberPanel

Backend Deployment

Keeping the Backend Server Running: PM2

Frontend Deployment

Troubleshooting

Conclusion

Part 2 - Building a Full Stack Contact Form: Node.js Backend 2023

Contents

Backend Development

Creating Your Node.js Project with npm

Installing Essential Dependencies (Express, Nodemailer)

Storing Data Constants in config.js

Setting Up Your server.js Backend File

Creating Nodemailer Functions for Email Sending

Crafting API Routes for Email Handling

Testing Your Full-Stack Contact Form Locally

GitHub Repository for Backend Code

Part 1 - Full Stack Contact Form: Getting Started & React Frontend 2023

Contents

Getting Started

What You'll Accomplish

Prerequisites and Tools

Setting Up a Domain Email with Whois.com

Setting Up the Frontend (React)

Creating a New React Application

Crafting a User-Friendly Contact Form Interface with Inputs and Messages

Elevating the Form's Aesthetics with CSS Styling

Enabling Form Data Management with State

Implementing Client-Side Validation for Email Input

Creating the Email Sending Function and Integrating Backend Communication

GitHub Repository for Frontend Code