Coders-Evoke-Community / CodersEvoke_website

A Website for codersEvoke
https://coders-evoke-community.github.io/CodersEvoke_website
MIT License
37 stars 75 forks source link

Backend Functionality for the contact us form. #126

Open AuraOfDivinity opened 3 years ago

AuraOfDivinity commented 3 years ago

Description

This PR implements the backend functionality requested for the contact us form. When the contact us form is submitted an email is sent to the email addresses that have been added to the subscribers list on admin panel. ( Please check the attached images below.)

The PR mainly consists of 2 main sub projects.

  1. A node/express/mongodb based server (contact-us/contact-us-server) -This server handles all the following logic,

    • [x] Sending a notification email to specified emails when the contact us form is submitted.
    • [x] Handling admin registration and login for the admin dashboard.
    • [x] Handling the receivers list for email updates. (i.e adding and removing emails from the receivers list)
  2. A react/redux based simple admin panel - This admin panel handles the following tasks

    • [x] Displaying all the past contact us submissions in a single place.
    • [x] Displaying the set of subscribed email addresses and allowing the user to add/remove them using the UI.
    • [x] Providing the UI for the admin registration.

Frontend deployed at - https://fervent-payne-44a282.netlify.app Backend deployed at - https://coders-evoke-contactus.herokuapp.com Postman collection containing the set of endpoints used - https://documenter.getpostman.com/view/7312043/TzsZrTnt

Both the frontend and the backend is currently being deployed off of my origin repositories main branch(https://github.com/AuraOfDivinity/CodersEvoke_website). You will have to separately deploy it from the main branch of the coders evoke remote repository for the changes from other contributors to be reflected.

Fixes # (issue no.)

103

Type of change

Explain the Testing instructions

Make sure to pull all the changes before testing. Testing the backend server locally

  1. Open the terminal and navigate into (contact-us/contact-us-server)
  2. Install the required dependencies using the npm install command
    npm install
  3. Create a .env file and add the following 3 environment variables to it.
    SMTP_EMAIL=<<valid gmail account here>>
    SMTP_EMAIL_PASSWORD=<<valid gmail account password here>>
    MONGODB_URI=<<Mongodb connection string>>
  4. Run the project using the npm run dev command.
    npm run dev

Testing the frontend locally

  1. Open the terminal and navigate into (contact-us/react-login)
  2. Install the required dependencies using the npm install command
    npm install
  3. Run the project using npm start command.
    npm run start

    Note - By default the base url of all the endpoints are hardcoded to fetch from the backend deployed at(https://coders-evoke-contactus.herokuapp.com) To change this update the endpoints that are found under the /services folder.

Test Configuration:

Checklist:

ATTACH SCREEN-SHOTS / DEPLOYMENT LINK

Frontend deployed at - https://fervent-payne-44a282.netlify.app Backend deployed at - https://coders-evoke-contactus.herokuapp.com

Admin credentials for frontend- Email - admin@codersevoke.com password - Admin123

  1. Logging into the admin panel and adding new email to the receiver's list. admin1

  2. Creating a new contact us submission.(Note that the email is sent to the addresses we added to the current subscriptions list in the previous step. The content of the submission is also visible in the dashboard) admin2