Building My Trip Journal with Flask and React: A Phase 4 Flatiron Project

For the Phase 4 project of my Flatiron Software Engineering Bootcamp, I developed Trip Journal, an application designed to help users document their travel experiences. The app allows users to record the places they visited, the activities they participated in, and their overall reflections on their trips. This was an exciting opportunity to combine a Flask API backend with a React frontend and explore the intricacies of building a full-stack application.

The Project Goals

This project was guided by a set of specific technical requirements:

• Flask Backend with React Frontend: The app had to use Flask for the API and React for the client.


• Database Models:


• At least three models with two one-to-many relationships and one many-to-many relationship.


• The many-to-many association required an additional user-submittable attribute.


• Full CRUD actions for at least one resource and Create/Read actions for all resources.


• Client-Side Functionality:


• Use Formik for form handling and validation.


• Implement client-side routing with React Router.


• Connect the frontend and backend using fetch().


• User Experience: Provide a responsive and intuitive interface for managing trips, places, and activities.

Database Design

The backend was built using Flask and SQLAlchemy, with three primary models: Trip, Place, and Activity. These models represented the relationships between a trip, the places visited, and the activities undertaken.

Trip: The central model with attributes like name, start_date, end_date, and description. It includes a one-to-many relationship with Activity.

Place: Represents destinations. It shares a one-to-many relationship with Activity.

Activity: A join table connecting trips and places, forming a many-to-many relationship with user-submittable attributes like name and description.

Here’s a snapshot of the models.py file for context:

class Trip(db.Model, SerializerMixin):

    __tablename__ = 'trip'



    id = db.Column(db.Integer, primary_key=True)

    name = db.Column(db.String(100), nullable=False)

    start_date = db.Column(db.Date, nullable=False)

    end_date = db.Column(db.Date, nullable=False)

    description = db.Column(db.Text)



    activities = db.relationship('Activity', back_populates='trip', cascade='all, delete-orphan')

    places = association_proxy('activities', 'place', creator=lambda place_obj: Activity(place=place_obj))





class Place(db.Model, SerializerMixin):

    __tablename__ = 'places'



    id = db.Column(db.Integer, primary_key=True)

    name = db.Column(db.String(100), nullable=False)

    description = db.Column(db.Text)



    activities = db.relationship('Activity', back_populates='place', cascade='all, delete-orphan')

    trips = association_proxy('activity', 'trip', creator = lambda trip_obj : Activity(trip = trip_obj))



class Activity(db.Model, SerializerMixin):

    __tablename__ = 'activity'



    id = db.Column(db.Integer, primary_key=True)

    name = db.Column(db.String(100), nullable=False)

    description = db.Column(db.Text)



    place_id = db.Column(db.Integer, db.ForeignKey('places.id'), nullable=False)

    trip_id = db.Column(db.Integer, db.ForeignKey('trip.id'), nullable=False)



    place = db.relationship('Place', back_populates='activities')

    trip = db.relationship('Trip', back_populates='activities')

API Implementation

The Flask API provided endpoints for managing trips, places, and activities, supporting full CRUD actions. Here’s an example of the API design:

GET /trips: Fetch all trips with associated places and activities.

POST /trips: Create a new trip, ensuring validation for required fields.

PATCH /trips/:id: Update specific fields of a trip.

DELETE /trips/:id: Remove a trip and its related activities.

I used flask-restful to structure the resources, making the code modular and maintainable.

One significant challenge involved ensuring the correct relationships between trips, places, and activities when sending data to the frontend. For example, if Place A belonged to both Trip 1 and Trip 2, the activities list for Place A needed to be filtered based on the trip. My mentor and I worked on the following code in the backend to address this issue:

class TripListResource(Resource):

    def get(self):

        trips = Trip.query.all()



        result = []

        for trip in trips:

            trip_dict = trip.to_dict(only=('places', 'id', 'name', 'description', 'start_date', 'end_date'))

            for place in trip_dict['places']:

                place['activities'] = [

                    activity for activity in place['activities'] if activity['trip_id'] == trip.id

                ]

            result.append(trip_dict)



        return result, 200

This ensured that each trip received the correct set of activities for its associated places.

React Frontend

On the frontend, I used React to create a dynamic and user-friendly interface. The application included the following key features:

Routing: Using React Router, users could navigate between the home page, trip journal entries, and activity logs seamlessly.

Forms and Validation:

    Formik handled form validation with constraints like:

        Data Type Validation: Ensuring date formats (e.g., YYYY-MM-DD) were correct.

        String Validation: Restricting trip names to at least three characters.

Fetching Data: The fetch API connected the React frontend to the Flask backend, enabling data retrieval and manipulation.

Additionally, I implemented responsive layouts using CSS Flexbox and Grid, ensuring the app looked great on both desktop and mobile devices. This was crucial for making Trip Journal intuitive for users who might want to log their travel experiences on the go.

Challenges and Learning Outcomes

Challenges:

Fixing Relationships in API Data: The biggest hurdle was ensuring that the relationships between trips, places, and activities were filtered correctly before sending the data to the frontend. Addressing this issue improved my understanding of how to manage complex relationships in SQLAlchemy.


Data Validation: Implementing robust validation for the models required careful thought, especially for relationships and date constraints.


Client-Server Communication: Debugging fetch calls and handling API error messages taught me the importance of clear and consistent data handling between the frontend and backend.

Lessons Learned:

Building Association Proxies: Working on many-to-many relationships deepened my appreciation for SQLAlchemy’s flexibility.

Formik's Power: Using Formik simplified form handling while ensuring a polished user experience.

Backend-Frontend Synergy: This project underscored the importance of ensuring both the backend and frontend communicate effectively.

Conclusion

Developing Trip Journal was a rewarding experience, merging technical requirements with creativity. It allowed me to apply the concepts I learned throughout the bootcamp to a real-world application. The project not only deepened my knowledge of Flask and React but also strengthened my problem-solving skills in full-stack development.

This project is a testament to how software engineering enables us to create tools that enhance personal experiences—like preserving the memories of a great adventure.