People want to send messages: Building the expression web app, a summary
Introduction
A lot more people are online than there were 2 years ago. I personally , in 2020 held a job that required me to teach the android ecosystem to customers purchasing a smart phone for the first time. Most people cared about where to send messages from, transact, make calls and listen to music. Regardless of the age, these 4 user questions came up.
I thought to myself: If people want to send messages, wouldn’t it be great to provide a way for them to better express themselves? Well, I am aware not everyone will use gifs but fortunately, no one is immune from receiving them. It’s slowly becoming a culture and I decided to contribute to that. As it is, I have been immensely touched by the fact that “Happy Birthday” gifs are always trending. In particular, this gif is always top 10.
My partner Fraol and I discussed about the project’s impact online. We laughed knowing we definitely overused gifs in our chats long before we paired up for this project. I got to work on the front-end and he worked on the back-end(sign-up, sign-in, login, database implementation). Together, we did research, designed the database, tested and debugged .
Accomplishments
For the Frontend, we chose to use HTML5, CSS3, jQuery and boostrap. We opted not to use more frameworks because we wanted to dedicate our time deepening our understanding of jQuery.”
For the Back-end, we went with python(flask) for the application and sqlite3 for the database since our project is relatively small.
For hosting, we chose digital ocean and we configured our Ubuntu 20 server with nginx to receive all incoming HTTP traffic and forward them all to gunicorn to serve our dynamic content. For the SSL certificate, we opted for Let’s Encrypt and the Certbot. To monitor, we use digital ocean’s agent that gives us metrics on our server’s health.
Features
- The expression web app is responsive and compatible with mobile.
- Search Button. A user can filter the gifs by using a keyword.
Technical challenge
We noticed that the web app loaded slowly since the graphics can be heavy to render. This is the same problem even with the giphy application. We had the option of rendering fewer items per API call but that really affected the user experience. People expect to see a good number of gifs at a go. We made a bargain and decided to render 50 gifs per API call. Also we leveraged on caching.
Big takeaways…
This project has allowed me to really understand jQuery, flask and deployment. I understood why good practices are withheld especially about running gunicorn on localhost and having nginx act as a proxy. I absolutely got comfortable with working with python virtualenv and saw the full importance of a requirements.txt file. Configuring my virtual machine to develop and test this web app made me realize how powerful Vagrant is. However, I would better design the database.
So, who am I?
I am a full-stack developer currently focusing on front-end web development. I’m also exploring react and firebase and generally having the time of life as a developer. Before tech, I was in Insurance and Risk. Overall, I enjoy writing.
Check my socials and relevant links to this web app:
Github repo — — LinkedIn — — expression.com — — expression/about
