DEV Community

dillybunn
dillybunn

Posted on

Final Blog

After 3 months of learning as much about the basics as you can, completing the FlatIron Software Engineering Bootcamp is a great feeling. I was not sure what to expect when I started, but at the end, it is a great feeling. Having a strong foundation for what comes next feels like it sets me up for success in the future.

For my final project, I made a Sales Tracker to help keep you customers organized with a rating system and opportunities. One of the biggest issues when it comes to sales is organization. Knowing where you are at in the process and who you have spoken to is key. To start lets look at some routes.

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { AppProvider } from "./AppContext";
import Dashboard from "./Dashboard";
import Login from "./Login";
import CustomerDetails from "./CustomerDetails";
import SendEmail from "./SendEmail";

function App() {
  return (
    <AppProvider>
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/customers/:id" component={CustomerDetails} />
          <Route path="/send-email" component={SendEmail} />
          <Route path="/" component={Login} />
        </Switch>
      </Router>
    </AppProvider>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

This lays out in a concise and clear way. From log in to your dashboard to being able to send out emails for follow ups.

Being able to keep your data straight by adding or editing is always important.

const handleSalesCallSubmit = (e) => {
    e.preventDefault();

    const url = editSalesCall
      ? `http://localhost:5555/sales_calls/${editSalesCall.id}`
      : `http://localhost:5555/sales_calls`;
    const method = editSalesCall ? "PATCH" : "POST";

    fetch(url, {
      method: method,
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      body: JSON.stringify({
        ...newSalesCall,
        user_id: customer.user.id,
        customer_id: customer.id,
      }),
    })
      .then((r) => {
        if (!r.ok) {
          throw new Error(`Error: ${r.statusText}`);
        }
        return r.json();
      })
      .then((data) => {
        if (editSalesCall) {
          setSalesCalls((prev) =>
            prev.map((call) => (call.id === data.id ? data : call))
          );
          setEditSalesCall(null);
        } else {
          setSalesCalls((prev) => [...prev, data]);
        }
        setNewSalesCall({ date: "", notes: "", rating_id: "", stage_id: "" });
      })
      .catch((error) => console.error("Error:", error));
  };
Enter fullscreen mode Exit fullscreen mode

The above code allows the user to add and edit sales calls, along with all the relevant data.

Finally something new I learned. Implementing email.

@app.route('/send_email', methods=['POST'])
def send_email():
    data = request.get_json()
    if not data or 'email' not in data or 'subject' not in data or 'body' not in data:
        return jsonify({"error": "Invalid request"}), 400

    msg = Message(
        subject=data['subject'],
        recipients=[data['email']],
        body=data['body'],
        sender=app.config['MAIL_DEFAULT_SENDER']
    )
    try:
        mail.send(msg)
        return jsonify({"message": "Email sent"}), 200
    except Exception as e:
        print(f"Error sending email: {e}")  
        return jsonify({"error": str(e)}), 500

Enter fullscreen mode Exit fullscreen mode

The back end is set up to receive the request to email your customer with updates or quick messages to keep the flow going.

This project spoke to me, as I am about to embark on a new sales role for a company that specializes in VR and software training services for construction and engineering firms. I will always look back fondly on my time spent learning and look forward to constantly pushing my comfort zone and trying new things.

Top comments (0)