Project Name
Event Spin
Role
Research, Design, Development
Tools
VS Code, Terminal, GitHub, Figma, Postman
Event Spin is a modern and engaging web application designed to enhance user interaction with event discovery. The project aimed to create a fun and intuitive experience for users by allowing them to spin a virtual wheel to randomly select an event to attend. Users could then view event details in a popup window, making event exploration exciting and interactive.
Local event data will come from the Google Events API, with the app requesting to retrieve event information based on the user’s locations. This API provides a comprehensive database of events which will enable the app to provide a wide selection of local activities for the user to choose from.
The primary objective of the app is to promote local events, increase user engagement, and encourage participation in community activities.
Project Requirements
Implement a spinning wheel animation triggered by a “Spin” button click
Develop a visually appealing and user-friendly interface
Integrate event data from an external API
Create a responsive event popup to display event details
Use modern styling, colors and typography to convey a professional yet engaging design
Design Goals
Modern and Engaging Interface
The app should have a modern and visually appealing interface to attract and engage users. The use of dark and vibrant colors will create a dynamic and immersive user experience.
Clear Call-to-Action
The spinning wheel and “Spin” button should be prominent and visually compelling to encourage users to engage with the app actively.
Intuitive User Experience
The app should be easy to navigate and event details should be presented in a clear and concise manner. Users should be able to quickly understand how to use the spinning wheel and view event information.
Target Audience
The target audience for the Event Spin app includes individuals who enjoy exploring and attending various events in their local area. The app aims to cater to a diverse group of users interested in a wide range of events, such as concerts, festivals, workshops, and community gatherings.
Project Approach
Frontend Development
React was chosen as the frontend framework to build the interactive user interface. Components were structured to accommodate the spinning wheel, spin button, and event popup.
Backend Development
- Flask was used to create the backend server. The Flask app was configured with necessary settings such as database connection, routes, and API endpoints.
Database Models
- SQLAlchemy, a SQL toolkit and Object-Relational Mapping (ORM) library for Python, was used to define and manage the database models.
API Integration
Axios was utilized in the frontend to make HTTP requests to the backend API, fetching event data. In the backend, API routes were set up to handle requests and respond with the appropriate event information.
Routing & Serving
Flask’s routing capabilities were used to define endpoints for serving the React frontend, handling spin requests, and serving static assets.
Event Handling
Event listeners and state management were implemented to trigger animations and handle data updates upon user interactions.
Styling & Design
- CSS was extensively used to create a visually appealing design, incorporating gradients, shadows, and typography to achieve the desired modern and engaging look.
Animations
Keyframes and transitions were employed to create smooth and eye-catching animations for the spinning wheel and color-changing text.
Challenges & Solutions
Spinning Animation
Creating a smooth and visually appealing spinning animation for the wheel required fine-tuning the rotation and timing. The use of keyframes and transitions, along with iterative testing, helped achieve the desired effect.
Responsive Design
- Ensuring the application worked well across various screen sizes and devices required careful consideration of responsive design principles and thorough testing on different devices.
Color Change Animation
- Implementing the color-changing animation for the text involved coordinating the timing with the spinning animation. This was achieved by using separate keyframes and synchronizing their durations.
Animations
Keyframes and transitions were employed to create smooth and eye-catching animations for the spinning wheel and color-changing text.
Integration
Integrating a React frontend with a Flask backend required proper configuration of endpoints, static file serving, and ensuring communication between the two.
Error Handling
- Debugging and resolving errors related to unexpected token '<' in JavaScript files required validating the file serving configuration, MIME types, and ensuring the correct files were being loaded.
External API Handling
- Fetching and displaying data from an external API involved handling asynchronous operations, error handling, and ensuring data is displayed accurately.
Animations
Keyframes and transitions were employed to create smooth and eye-catching animations for the spinning wheel and color-changing text.
Libraries & Frameworks
Database Management
JSON output includes structured data for event results and more.
The Google Event Results API allows a user to scrape event results from a Google Events page. SerpAPI is able to make sense of this information and extract the following data:
thumbnail, title, address, date, and link,
Database Schema
Style Guide
User Flow & Interaction
The user flow is straightforward and intuitive. Users should easily understand the purpose of the app, how to input their location, and initiate the spinning wheel game. The spinning animation should be smooth and visually captivating, enticing users to interact with the app repeatedly.
Project Conclusion
The Event Spin app’s design will captivate users with its modern and playful interface while offering a clean and intuitive experience. The spinning wheel and event popup will be the central elements that provide an interactive way for users to discover and explore events in their preferred location. With its visually appealing design and user-friendly features, the Event Spin app will attract a wide audience of event enthusiasts.