Portfolio Project: EscenApp

EscenApp logo

EscenApp

EscenApp was designed to be a platform for local artists to create a database of their events in order to help centralize location and information for users who engage with the local artistic scene. Our team members are Kevin Ramos, Sergio Vera, and myself. This project is created for artists and users alike. Artists generate the database of events, and users access this database in a simple UX design. Kevin worked on the back-end side of the project. Sergio dabbled in between back-end and front-end and I worked on the front-end.

I’ve had this idea for a while as I myself am part of the artistic community. It often happens that musicians are over represented in the world of tech and many apps and platforms already exist exclusively for music. Albeit, not at a local level. Many artists fall under the radar with more international platforms or established local talent. I had always wanted to be able to provide better access of information for the scene rather than having to hope through 3 different apps or more to achieve the same goal, or to sometimes not even achieve it. As the idea simmered, I didn’t only want it for musicians, I also wanted it for the rest of the artistic community. Painters, actors, comics, theater, photographers, writers. There are other sectors that are unfairly underrepresented on the tech side of things, and I felt this idea would be a step in the right direction. I myself have trouble keeping up so I couldn’t imagine other people are aren’t so directly involved. I felt this idea would be useful and could have long term implications for the artistic scene. As a tourist destination, it is also a great way to expose tourists and visitors to more authentic entertainment scene rather than the usual tourist traps.

App diagram

For the front-end we decided to use HTML, CSS, and Bootstrap (CSS Framework). We had initially planned to use Javascript or Vue.js or React, but due to time constraints we ended up using Jinja as our web template engine. Bootstrap was chosen in order to speed up the process, albeit it had a bit of a learning curve, we were able to implement it’s classes to our favor.
The back end is entirely coded in Python using the Flask web framework. This mixed with SQLAlchemy and SQlite allows us to have a simple database and a ORM structure.

Three things we accomplished are:

  • The website is responsive and can be viewed from mobile.
  • You can create a user profile via email/login with password reset functionality
  • You can create events which will dynamically appear on the user account as they are added

The challenge I struggled most with was understanding the CSS grid and flex box. Coming into this with the most basic HTML and CSS understanding, when trying to try to find a way to style things the way I had in mind became a bit difficult. It was something that I began to understand the more I worked on the front-end portion of the web application. I became familiar with classes and id’s, I became familiar with how HTML tags are used in a more “standard” way, I experimented a lot with different configurations and slowly went from a mess to a more clean and organized page. I was grouping classes better, I was using id’s with intention and not repeating as much CSS blocks. Eventually I found myself with what I assume is a natural hurdle all front-end developers face at some point, and that is creating a dynamic area on a web page. Sure, the dynamic content data will come from the back-end, but as the front-end developer, you have to make sure that the area where that content is going to be delivered won’t break. You can’t have areas of the page overlapping one another, crossing borders, breaking the page, appearing where they shouldn’t, text overflow, hidden elements…you name it. A plethora of nightmares are possible. As a fellow internet user since the olden days of dial-up, I’ve seen webpages react to content before so I knew it was absolutely possible. Anywhere that there was user input, I had to make sure those areas would respond appropriately with said input. I had to make that even the longest of text inputs would be wrapped by my DOM elements. I had two hurdles to jump, making the account page respond to user input and to the dynamically created events. Essentially I had to learn how to make the profile area and the biography area expand depending on what was inputted by the user. If they had the longest name ever, the account info are would respond appropriately, and so it did. Took a bit of fiddling with creating responsive areas within the area and making sure it would only expand in the direction I wanted. This can also be regulated by putting a cap on the text input itself but it still had to be generous. The same for the biography area. Then the real challenge was with the event section of the profile. The events I made are in little boxes with their info. This was when I had to learn how to style flex box. So long story short, there is a flex container (parent) and flex items (child). And that same flex item, then became a flex container for the flex items inside of it. Once everything was styled properly and the events were created successfully, the event boxes fell exactly where they had to.

Takeaways

I went from knowing nothing to understanding HTML and CSS a lot better. From the first page I designed to the last there is a clear advancement in how I organize my pages. I eventually had to go back and refactor a few things after I had finished the last page. So it was interesting to see my own progress in the code as the project went on. Aside from this knowledge, which I enjoyed doing, my main takeaway here is more of demystifying what used to seem like magic. Understanding all the components of a functioning web application, you realize it is a lot of work. I’ve never really got into doing anything back-end, black screens don’t do it for me, but it’s knowledge that is invaluable regardless. Doing this I really enjoy working on front-end and there is still so much left to learn. As mentioned previously I was unable to implement Javascript or any framework due to lack of time so for the future I definitely want to learn and understand Javascript and be able to implement it.

About myself

I started studying in Holberton School in January of 2021. My career path has been that of a musician and it has been my career since 2015 since I was payed for my first gig. During the COVID-19 pandemic I like many musicians found themselves with no work, as most of our work is done in the field and royalties aren’t enough to keep you afloat. During that time I reflected on what other skills I had and could make use of. I’ve always had an interest in computer science and it found it’s way to me after taking a few IT courses. I am first and foremost a musician, and now a programmer. I want to use this knowledge to further myself in music software, which is a niche field I guess, but I want to add my knowledge to a field I enjoy to better a field that I love.

https://github.com/KevinTMO/Escenapp
http://170.187.206.144/

https://www.linkedin.com/in/yatoro/

--

--

--

Programming student from PR

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flutter Music player/Video Player

IceCream Meltdown!

Что такое Shrapnel?

May 2022 Web Server Survey

Advice from a +10 years experienced self-made software engineer

Building a Robust CI Pipeline for Golang With Google Cloud Build

Goodbye, Boredom. — An Activity Suggestion App

Okta — Python Django integration for SSO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yared Torres

Yared Torres

Programming student from PR

More from Medium

#OMC #OMCHAİN

5/18/2022

傀儡 — It’s All For Your Sake (A Personal Translation)

The word 傀儡, stylized.

Project Koii. Nodes. Tasks.