Introduction
In Phase 5 of the software engineering program, I challenged myself and my team to build Ticksy, a full-stack event ticketing and management platform designed to make attending and organizing events easier, faster, and more accessible—especially in regions with local payment needs like MPESA.
This phase was all about applying everything we’ve learned: from backend modeling and validation to frontend routing and global state management. We also explored technologies outside the core curriculum to take our application to the next level.
Technologies Used
Layer Tech Stack
Frontend ReactJS, Redux Toolkit, Axios
Backend Flask, SQLAlchemy, Marshmallow
Database PostgreSQL
Auth JWT with Flask-JWT-Extended
Payment MPESA STK Push API
Design Figma (Mobile-first design)
What I Implemented in Phase 5
Here’s a breakdown of the key features and requirements I addressed during this phase:
1. Flask & SQLAlchemy Backend
The backend was built using Flask, with SQLAlchemy ORM to define models and manage database interactions. I used Marshmallow for serialization and request validation.
2. Many-to-Many Relationships
A key part of the database involved many-to-many relationships, such as:
Users ↔ Events through TicketOrders
Users ↔ Roles (e.g., Admin, Organizer, Attendee)
This allowed flexible access control and event participation tracking.
3. Four or More Models
We implemented several models, including:
User
Event
Ticket
TicketOrder
Review
All models were fully integrated and managed through RESTful endpoints.
4. React Router with 5+ Routes
The frontend uses React Router v6, with clean, role-based navigation:
/login – User Authentication
/events – Upcoming Events Listing
/events/:id – Single Event Details
/dashboard – Organizer/Admin Dashboard
/tickets – My Tickets Page
/admin – Admin-only management panel
5. CRUD Functionality (RESTful)
Full CRUD was implemented for the Event model:
Create: Organizers can create new events.
Read: All users can view events.
Update: Organizers can update their events.
Delete: Organizers can delete events.
CRUD actions followed REST conventions and returned appropriate status codes and messages.
6. Validations and Error Handling
Both the backend and frontend handled validations gracefully:
Schema validation via Marshmallow
Custom error messages for duplicate users, missing fields, bad logins, etc.
User-friendly error alerts in the UI using React Toasts
7. Something New: MPESA STK Push
We explored something not taught in the curriculum: mobile money payments. I integrated MPESA STK Push API to allow users in Kenya to check out securely using mobile money, a feature rarely seen in typical bootcamp projects.
** 8. Global State with Redux Toolkit**
Instead of useContext, we adopted Redux Toolkit for global state:
authSlice: Manages login/signup and role-based UI.
eventsSlice: Handles event fetching, creation, update, and deletion.
ticketsSlice: Manages user ticket history and new orders.
This helped us keep the codebase modular, clean, and scalable.
Lessons Learned
Planning is everything. Starting with a Figma design helped us avoid confusion during component development.
Redux Toolkit simplified global state logic compared to useContext + prop drilling.
Error handling on both frontend and backend is crucial for good UX.
Implementing MPESA payments taught me how to integrate real-world APIs and handle async callbacks.
Working as a team pushed me to use GitHub branches, pull requests, and resolve merge conflicts effectively.
** Future Improvements**
Add Google login for quicker sign-up.
Implement QR-code check-in for event access control.
Push real-time updates using WebSockets.
Make Ticksy a PWA for offline support.
** Final Thought**
Phase 5 was the most challenging but rewarding phase yet. I now feel confident building scalable full-stack applications with modern tools and APIs. The real-world use case of Ticksy has made me more excited to explore the world of software engineering—especially where it intersects with payment systems, event management, and user experience design.
"Build something real. Break things. Fix them. That’s how we grow." – My Phase 5 mantra.
Top comments (0)