CompSoc Website

As Vice President of The University of Liverpool's Computer Science Society (CompSoc), I discovered that despite being the official CS society, we had no dedicated website beyond an outdated student union page. For a Computer Science society to lack its own online presence seemed unacceptable.

I designed and built a Flask-based website that would serve as a central hub for society information, events, and social media links, with a focus on sustainability and ease of management for future committee members.

The Challenge

The main challenges were:

• Committee Turnover: Students serve only one year, requiring an easy-to-manage system
• Manual Updates: Avoiding the need to manually edit HTML for every event or link change
• Active Society: Frequent events and updates requiring dynamic content management
• Resource Constraints: Limited budget and technical expertise of future committees

The Solution

I built a Python Flask website powered by SQLite database with an API interface connected to Google Sheets for content management. This allows committee members to update website content simply by editing a spreadsheet, with Google Apps Script automatically syncing changes to the website.

The website architecture prioritizes simplicity and maintainability while providing dynamic content management capabilities through integration with familiar tools.

Backend Architecture

• Python Flask: Lightweight web framework for rapid development and deployment
• SQLite Database: File-based database for simple deployment and management
• RESTful API: Endpoints for updating links and event information
• Responsive Design: Mobile-friendly interface for all devices

Google Sheets Integration

The basic admin system uses Google Sheets as a user-friendly interface:

1. Content Spreadsheet: Committee members edit links and event details in familiar Google Sheets
2. Apps Script Automation: Custom JavaScript code monitors sheet changes
3. API Updates: Automated API calls sync spreadsheet data to the website database
4. Real-time Sync: Changes appear on the website within minutes of spreadsheet updates

Key Features

• Social Media Hub: Centralized links to all society social platforms
• Event Management: Dynamic event listings with automatic updates
• Committee Information: Current committee member details and roles
• Contact Integration: Easy access to society contact information
• Mobile Optimization: Responsive design for smartphone and tablet access

The development focused on creating a sustainable solution that future committee members could easily maintain without technical expertise.

Design Philosophy

The website design prioritized functionality and ease of use:

• Simplicity First: Clean, uncluttered interface focusing on essential information
• User-Friendly CMS: Google Sheets as a familiar content management interface
• Sustainable Architecture: Easy hosting and minimal maintenance requirements
• Future-Proof Design: Documentation and handover materials for new committees

Technical Challenges

• API Integration: Seamless connection between Google Sheets and Flask backend
• Error Handling: Robust system to handle API failures and data inconsistencies
• Security Considerations: Protecting API endpoints while maintaining ease of use
• Deployment Strategy: Simple hosting setup for future committee handovers

Frontend Development

The frontend design was built upon an existing template with customizations for CompSoc branding:

• Base Template: Utilized Godswill Ezihe's CodePen template as foundation
• Custom Styling: CompSoc branding and University of Liverpool color scheme
• Responsive Layout: Mobile-first design approach for accessibility
• Performance Optimization: Fast loading times and minimal resource usage

The CompSoc website successfully established the society's online presence and provided a sustainable platform for ongoing content management.

Project Outcomes

• Professional Presence: Established CompSoc's first dedicated website
• Simplified Management: Google Sheets interface eliminated technical barriers
• Increased Engagement: Centralized hub for all society information and events
• Future Sustainability: Easy handover process for incoming committees

Technical Achievements

• Seamless Integration: Successful Google Sheets to Flask API connection
• User-Friendly CMS: Non-technical committee members can update content easily
• Minimal Maintenance: Automated systems reduce ongoing technical requirements
• Scalable Architecture: Foundation for future enhancements and features

Society Impact

The website provided CompSoc with a professional online presence that enhanced the society's credibility and accessibility. Committee members praised the ease of content updates, and the automated Google Sheets integration eliminated the need for technical knowledge in day-to-day management.

Learning Outcomes

This project provided valuable experience in:

• Full-Stack Development: End-to-end web application development
• API Integration: Third-party service integration and automation
• User Experience Design: Creating interfaces for non-technical users
• Project Leadership: Managing a volunteer project with stakeholder requirements
• Sustainable Development: Building systems for long-term maintenance