Computer Club

Inspiration

We realized that the computer club at our school, despite being a computer-focused club, did not have a dedicated website. This makes the club coordination, membership, and planning much more difficult.

What it does

Our site allows existing club members to sign in via Google, allows prospective members to explore the different programs that the club offers, and allows members to chat with each other in real time. The site also provides a club event calendar to facilitate club engagement and coordination.

How we built it

We built the site using a flavor of the Flask web framework (WebPy-Framework). For Google account sign in, we used PropelAuth as an authentication service. To enable live chat & a markdown-enabled chat, we used SocketIO and markdown-it. For the callendar, we used a JavaScript library known as FullCalendar. User, message, and calendar data is stored in a SQLite database, and Bootstrap was mainly used to style the site. Finally we used OnRender and our cuz domain to host the completed product.

Challenges we ran into

One challenge we ran into was trying to get the animations on the main page to work. When rendering the cards off screen to prepare for the sliding animation, they would create a horizontal scrollbar. After struggling with different CSS properties, we wrapped the cards and allow the card wrapper to hide x overflow so that the horizontal scrollbar would not be created. Another major difficulty we faced was on deployment and resolving conflicts regarding hosting; however, this was resolved by waiting longer for our domain to be authorized and by fixing some dns settings.

Accomplishments that we're proud of

We are proud of the site’s streamlined appearance, especially the clean calendar, Markdown-enabled chat, and home page. The animations especially on the home page (discussed above) were a simple touch that added a well needed dynamism to the website. Furthermore we are also proud that users can chat with each other in real time making the website responsive, functional, and aesthetically pleasing.

What we learned

We learned how to create and render calendars with FullCalendar and how to make clean CSS animations (notably the scroll animation on the home page.) we also learned how to make better use of the CSS grid system and how to use both Flexbox and Grid to further the aesthetic and structure of the webpage.

What's next for Computer Club

Next, we will create an administrator portal where a club leader can easily update calendar and site info. Furthermore we will continue the styling to match with our high school’s colors and flesh out the styling even more so that the site is more intuitive. We will develop a better forum where people can reply, ask questions, branch out into groups, and get assigned tasks all within the streamlined portal of the website.

Built With

• bootstrap
• flask
• markdown-it
• propelauth
• socket.io
• sqlalchemy
• sqlite
• webpy-framework
• wsgi