OVERVIEW
Invite friends to frolic in a field, take a stroll through the farm, and discover your new favorite spot.
Challenging fast-paced collegeiate life, Serencity is a web application that allows users to discover serene spots around them and invite their friends to enjoy them. Our goal was to make explore an alternative ‘slow social media’ platform that fosters intimacy between people and the environment around them. Created as a semester project for Fullstack Web Development.
Invite friends to frolic in a field, take a stroll through the farm, and discover your new favorite spot.
Challenging fast-paced collegeiate life, Serencity is a web application that allows users to discover serene spots around them and invite their friends to enjoy them. Our goal was to make explore an alternative ‘slow social media’ platform that fosters intimacy between people and the environment around them. Created as a semester project for Fullstack Web Development.
SKILLS
Python
Web Design
Custom CSS
Python
Web Design
Custom CSS
INSPIRATION
I wanted to make a database of all the secret spots friends have shown you, spots that you have to know someone to find, and that you can keep coming back to when you need a moment of peace and quiet. New Haven is full of these beautiful spots, but they remain largely unknown to students who are too caught up in the demands of college life to visit them.
Also very much inspired by queeringthemap.com and other interactive map websites making the internet feel more intimate.
TECH STACK
The application was written in Python as a Flask app using the Google Maps, Google OATH, and Google Calendar API’s. Our backend consists of a user-populated SQLite database, and frontend was written in Vanilla HTML/CSS an JavaScript using Jinja Templates. Custom CSS by me :)
PROCESS
|
|
MOCKUPS
These are the initial mockups I showed my team when pitching the idea. Needless to say, I was a little ambitious with what 3 students who had never done fullstack before could do, but the visualization was very inspirational and guided us in deciding what features to include in the site.
|
|
|
|
|
MVP
After a lot of running around in the wildnerness, we finally managed to get the backend and Google Maps API + Google OAuth working. At this point, it was very ugly.
|
|
|
|
|
ALPHA
We realized we were going to have to scrap some of our more ambitious features (like a mailbox and liking system) and focus on fine tuning our core features: our map and spot system.
|
|
|
|
|
FINAL
Did some debugging, gave our site a face lift, and called it a wrap after 7 weeks of work. Custom CSS went a long way in making it feel like a finished app!
Features
THE MAP
Users are free to roam the map and explore spots added by the community. We chose a very open-ended interface to encourage exploration and finding beautiful places in your own backyard. Each spot has images, audio, and user written directions/notes associated with them. The idea is that the directions are just vague enough you have to ask whoever uploaded the spot to bring you there themselves :)
ADDING AND SAVING SPOTS
Users add their own spots to the map by clicking anywhere on the map. Users can also save spots to their liked list for future visits!
INVITE YOUR FRIENDS
Users can send invites to their friends to visit spots together using the Google Calenders API, along with a handwritten note.
✿ ✿ ✿