Floresca Threads

The Brains behind the Beauty

What is it

Floresca Threads is a custom garment company that prides itself on customization of garments and the sale of custom accessories. This page is a storefront for the business complete with a working shopping cart and a way to send an email through a form to the business

To find the face of this project (The Frontend) please go here: GitHub Repo

Technologies used

bcryptjs

bcryptjs: A library to help you hash passwords.

passport

passport: Passport is authentication middleware for Node.js. It is designed to do one thing authenticate requests. There are over 500+ strategies used to authenticate a user; however, we will be using one - passport-local Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests

method-override

method-override: Lets you use HTTP verbs such as PUT or DELETE in places where the client doesn't support it.

axios

axios: a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.

NodeMailer

nodemailer: Node.js module that allows for easy email sending. Used in the project to take data from a form and send an email

Passport JWT

passport-jwt: A passport strategy for authenticating with a JSON Web Token

Installation instructions

1. Fork and clone this repo
2. Run npm install in your terminal from within the project directory
3. Create a .env file at the root of your project (do not commit this file)
4. Add MONGO_URI=MONGO URI provided information to .env
5. If using Gmail for email, add SMTP_EMAIL=email@gmail.com and SMTP_PASSWORD=Gmail App Password(See below for this)
   -how to setup gmail app password: Follow these instructions to setup your app password for gmail
6. set SECRET_SESSION=YOUR_KEY_HERE & JWT_SECRET=YOUR_KEY_HERE
   -YOUR_KEY_HERE can be whatever key you want to create
7. run npm run dev here and on the front end and navigate to front end localhost

Models

User Model

Column Name	Data Type	Notes
id	String	Primary Key, generated by MongoDb
username	String
email	String
password	String
firstName	String
lastName	String

Product Model

Column Name	Data Tipe	Notes
id	String	Primary Key, auto incremented by MongoDB
name	String
description	String
price	Number
image	String
category	String

Routes

Method	Path	Location	Purpose
POST	/send	app.js	sends form data from contact form via email
GET	/users/	users.js	shows all users
GET	/users/:id	users.js	finds user by id
GET	/users/email/:email	users.js	jwt auth by email
POST	/users/signup	users.js	creates user
POST	/users/login	users.js	login User and generate JWT token
PUT	/users/:id	users.js	edits a user by id
DELETE	users/:id	user.js	deletes user
GET	/users/profile	users.js	jwt auth
GET	/products/	products.js	show all products
GET	products/search	products.js	searches for a product by query
GET	products/:id	products.js	finds product by id
POST	products/new	products.js	Creates new product
PUT	products/:id	products.js	Updates selected product
DELETE	products/:id	products.js	Deletes selected product

Code Snippets

Send route

The post route to send an email in the app.js folder within the htmo section you are able to change the format that the email takes. If you make changes here make sure they match the changes to the form on the front end so that the email can be sent correctly.

app.post('/send', (req, res) => {
    try {
        console.log(req.body)
        const mailOptions = {
            from: req.body.email, //sender address
            to: 'floresca.threads@gmail.com', // list of receivers
            subject: req.body.subject, // Subject Line
            html: `
            <p>You have a new contact request. </p>
            <h3>Contact Details</h3>
            <ul>
            <li>Name: ${req.body.name}</li>
            <li>Email: ${req.body.email}</li>
            <li>Subject: ${req.body.subject}</li>
            <li>Message: ${req.body.message}</li>
            </ul>
            `
        }
        console.log(`mailOptions ${mailOptions}`)
        transporter.sendMail(mailOptions, function (err, info) {
            console.log('inside the send process')
            if (err) {
                console.error(`there was an error==> ${err}`)
                res.status(500).send({
                    success: false,
                    message: 'Something went wrong. Try again later'
                });
            } else {
                console.log("sent")
                res.send({
                    success: true,
                    message: 'Thanks for contacting us. We will get back to you shortly'
                });
            }
        });
    } catch (error) {
        console.log(`there is an error => ${error}`);
        res.status(500).send({
            success: false,
            message: 'Something went wrong. Try again later'
        });
    }
})

Transporter creation

code creating transporter function for sending message

const nodemailer = require('nodemailer');
const dotenv = require('dotenv');
dotenv.config();

const transporter = nodemailer.createTransport({
    service: "gmail",
    user: "smtp.gmail.com",
    port: 465,
    secure:true,
    auth: {
        type: "login",
        user: process.env.SMTP_EMAIL, // email to send from
        pass: process.env.SMTP_PASSWORD  // password for the above email
    }
});


module.exports = transporter

Team

The Floresca Threads storefront was built by:

• Daniel Floresca
• Susan Stephens
• Darren Gardner