My Final Fullstack Application Project! On the Road, We Go! Welcome to RoadBros!
Hello and welcome! I would like to discuss the details related to my final project at 4Geeks Academy. The technologies we used were React.js, CSS, Bootstrap, Flask, and SQLAlchemy. The requirements for my final project were creating a full-stack website, including user authentication with the ability to sign-up and log in. You must also use the technologies you learned throughout the course.
As a team, we had to work together by brainstorming what we were going to make and how. Of course, we had an idea of the tech stack but we needed a theme or an idea. So we came up with RoadBros, the roadside assistance app! By putting our heads together, we started discussing the features and went to work. What the app does is helps the customer request roadside assistance! By sending the request of the customer to the Trucker. The trucker responds and fulfills the request based on the customer’s zip code using the filter method. The customer then pays with Stripe and gives the trucker a star rating.
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
#Request Body Data
user_type = db.Column(db.String(120), nullable=True)
full_name = db.Column(db.String(120), nullable=True)
email = db.Column(db.String(120), unique=False, nullable=True)
password = db.Column(db.String(80), unique=False, nullable=True)
phone = db.Column(db.String(120), unique=False, nullable=True)
rating = db.Column(db.String(120), nullable=True)
zip_code = db.Column(db.String(120), nullable=True)
#Relationships
vehicle = db.relationship('Vehicle', backref='user')
request= db.relationship('Request', backref='user')
def __repr__(self):
return '<User %r>' % self.full_name
def serialize(self):
return {
"id": self.id,
"user_type": self.user_type,
"full_name": self.full_name,
"email": self.email,
"phone": self.phone,
"rating": self.rating,
"zip_code": self.zip_code,
"vehicle": [vehicle.serialize() for vehicle in self.vehicle],
"request": [request.serialize() for request in self.request],
# do not serialize the password, its a security breach
}
class Vehicle(db.Model):
id = db.Column(db.Integer, primary_key=True)
#Request Body Data
vehicle_type = db.Column(db.String(80), unique=False, nullable=True)
vehicle_model = db.Column(db.String(80), unique=False, nullable=True)
vehicle_make = db.Column(db.String(80), unique=False, nullable=True)
vehicle_year = db.Column(db.String(80), unique=False, nullable=True)
vehicle_color = db.Column(db.String(80), unique=False, nullable=True)
vehicle_plate = db.Column(db.String(80), unique=False, nullable=True)
#Foreign Keys
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), unique=False, nullable=True)
def __repr__(self):
return '<Vehicle %r>' % self.vehicle_type # add more representations
def serialize(self):
return {
"id": self.id,
"vehicle_type": self.vehicle_type,
"vehicle_model": self.vehicle_model,
"vehicle_make": self.vehicle_make,
"vehicle_year": self.vehicle_year,
"vehicle_color": self.vehicle_color,
"vehicle_plate": self.vehicle_plate,
"user_id": self.user_id,
}
class Request(db.Model):
id = db.Column(db.Integer, primary_key=True)
#Request Body Data
zip_code = db.Column(db.String(120), unique=False, nullable=True)
service = db.Column(db.String(120), unique=False, nullable=True)
vehicle = db.Column(db.String(450), unique=False, nullable=True)
completed = db.Column(db.String(120), unique=False, nullable=True)
trucker_id = db.Column(db.String(120), unique=False, nullable=True)
client_name = db.Column(db.String(120), unique=False, nullable=True)
client_phone = db.Column(db.String(120), unique=False, nullable=True)
#Foreign Keys
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), unique=False, nullable=True)
def __repr__(self):
return '<Request %r>' % self.service # add more representations
def serialize(self):
return {
"id": self.id,
"zip_code": self.zip_code,
"vehicle": self.vehicle,
"service": self.service,
"completed": self.completed,
"trucker_id": self.trucker_id,
"client_name": self.client_name,
"client_phone": self.client_phone,
"usert_id": self.user_id,
}First, we put together our schema which contained 3 tables. The user table, vehicles table, and request table. Next, we used Flask in order to create our REST APIs and test them using Postman. After successfully testing our backend we went to work on the front end. We created routes in our React Router, a navbar, a footer, a sign-up page, login page, and added some Bootstrap, CSS, and cool-themed images. Most importantly we had to make sure our backend connected to our frontend by using fetches. Fetches create HTTP requests in order to make the functionalities of the website such as get, post, put, and delete.
The overall features of the website included 2 user profiles (customer and trucker), the ability to register and delete your vehicles, request roadside assistance, use fake stripe, a star rating, and a filter mode for the trucker to locate the zip code of the customer. My roles were to test our database using Postman, responsible for our React routing by ensuring new pages were added and worked fine, pair-code with teammates to apply CSS and Bootstrap to some of the pages, and create the filter mode for the trucker to locate the customers by their zip code.
We also made touch-ups by fixing any bugs, making our website responsive (mobile view), and making sure time and time again the application ran smoothly. We were able to showcase our final project RoadBros and presented successfully! Afterward, I was able to fork my project, fix bugs, and add touch-ups so I can successfully deploy my web application using Heroku. Here is my GitHub Repository for RoadBros. Thanks for reading! Please comment and follow! Till next time! :)
