kongfha / croissant_bonk_community

Website for anonymous chat and fun BONK AREA. An Intro to CEDT Project, Trying to create website with vanilla JS.

Croissant Bonk Community Website

   Explore the Croissant Bonk Community website, developed by Group 26 for the CEDT course. This document provides an overview of the website's features, the team members involved, the technologies employed, and the development process.

Features

1. Home Page
      The website's homepage showcases a captivating image of the Chao Phraya River with parallax scrolling effects. It introduces the website's name and purpose: "Croissant Bonk Community, a small community for CEDT." Navigation can be facilitated using the provided bar.

2. Bonk Area
      Scrolling down takes you to the Bonk area. Here, you can enter your username (or use a pre-generated one) to chat anonymously with fellow CEDT students in the Bonk Chat. The "Croissant" button allows you to increase your score with an expanding effect upon clicking.

3. Bonk Enjoyer
      The Bonk Enjoyer leaderboard features users with the highest consecutive "Croissant" clicks.

4. Bonk Bard
      At the end of the website, the Bonk Bard can generate poems for your enjoyment.

Project Details

Front End:
JavaScript, CSS, HTML for both aesthetics and functionality

Back end:
JavaScript and Node.js for responsiveness and database communication
Hugging Face API for Bonk Bard via Iframe
MongoDB for storing chat messages and users' scores

Development Journey

  The goal was to create a platform for open discussions and anonymous expression among CEDT students. We started with an anonymous open chat feature but expanded the project's scope.

  To enhance the project, we introduced two new features: the "Croissant Clicker" inspired by POPCAT, and the "Bonk Bard," a poem generator. The Croissant Clicker offers an engaging clicker game, while the Bonk Bard adds an artistic dimension to the platform.

  We created a design prototype in Figma, implemented the front end using HTML and CSS, connected the backend to a MongoDB database, wrote JavaScript code for the Bonk Chat and Bonk Enjoyer leaderboard, resolved issues, and refined the front end.

   The website was finally deployed using Amazon EC2.