/KeeperApp

Keeper is a web application used for creating and storing "Post-it" style notes. This was a full stack project built with React, MongoDB, and JavaScript.

Primary LanguageJavaScript

Keeper App stable

The Keeper app is a simple post-it note style web-app built with using React. Users can create notes that are safely stored in a local Mongo database and displayed neatly on the homepage grid.

Take a look at the live project

Table of contents

Prerequisites

  • any HTML code editor of your choice, such as Visual Studio, Atom, etc.
  • install Node.js

Installation

  1. clone the repository to your desired location.

  2. Install the required packages in the command terminal. $ npm install

  3. Start the application. $ npm start

(back to top)

How It Works

app.js

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.

signup.html

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.

success.html

This page is where the user gets sent once they completed the signup process after their information is successfully sent to the MailChimp API.

failure.html

This is the fallback page the user is sent to if an error occurred in their provided data, or within the API request process.

.env file

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).

(back to top)

Directory

/public

styles.css CSS style sheet linked to the main HTML document.

index.html This is the main HTML file connecting the styles to the react app.

/src

Contains react components folder, as well as the index.js file.

index.js Imports React and renders the main keeper app.

/components

App.jsx Imports and controls all components listed below, as well as the "add" and "delete" note functions.

CreateArea React component responsible for displaying and controlling the text entry fields.

Footer Contains the sites footer information

Header Contains the sites Header nav. bar

Note React component created upon user input inside the "CreateArea" text entry component.

(back to top)

Contact

Jake Brunner - jbbrunner10@gmail.com

LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/

This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp

(back to top)

Acknowledgments

(back to top)