Between your IG posts, blue check tweets, and lengthy Facebook rants, it's nearly impossible for your devoted followers to keep up with your every waking breath and shower thought. That is why I created this easy to use web signup, because let's face it - everyone needs a personal mailing list.
Built using Bootstrap along-side basic html and css - this app is simple yet effective. The user is greeted by a standard bootstrap form, allowing them to enter their contact info. When the user submits their data, the express app then uses BodyParser to extract the data in key:value pairs and then packs that into JSON. The JSON data is then stringified for the API, and finally posted to the MailChimp Server. Once a response from the API server is recived, the user is redirected to either a success or failure page depending on the result.
- any HTML code editor of your choice, such as Visual Studio, Atom, Pycharm, etc.
- install Node.js
- Setup a MailChimp account
- clone the repository to your desired location.
- Install the required packages in the terminal
$ npm install
-
Follow the steps provided in the MailChimp API Documentation to obtain an API key and setup a new audience. This step gives the web forms a place to send and store your followers information.
-
Create an
.envfile in the root project folder. -
Inside the
.envfile, add in your endpoint and key to the first two lines as seen below, using your code editor.`MAILCHIMP_API_ENDPOINT= "YourApiEndpoint"` `MAILCHIMP_API_KEY= "YourApiKey"` -
Save the
.envfile
- In a new terminal window, navigate to the project folder
- Start the app from your terminal
$ node app.js - In you browser's address bar, navigate to
http://http://localhost:3000/
Behind the Scenes, this project is pretty simple. We've got 3 html pages, an app.js logic file, and an .env containing keys. Ill give a little breakdown below of what each of these files do, and how they interact.
The app.js file acts as the root starting point for the app, as well as the logic behind the pages interactions. At the top of the file (lines 1-17) are all of the setup commands for the server, package setups, and declarations. Below this are the app's get, post, and API request functions. These functions tell the app what actions were preformed by the user, as well as what to do next.
This is the main view of the website upon load-up. This page contains all of the Bootstrap forms the user interacts with, as well as some In-line CSS styling.
This page is where the user gets sent once they completed the signup process after their information is successfully sent to the MailChimp API.
This is the fallback page the user is sent to if an error occurred in their provided data, or within the API request process.
The .env file will contain your sensitive information, thus it is not included in this repositories starting files. Upon cloning the repository, you'll need to create your own .env file and enter in your personal API key and endpoint. (explained above).
CSS Folder containing CSS style sheet linked to the HTML document
images Contains all image files used in the web page.
Contains all html pages, .env file, and JS logic.
Jake Brunner - jbbrunner10@gmail.com
LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/
This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp