Chatroom

Login page
Main
Main (dark mode)
Create/Add chatroom
Chatroom page
Chatroom page 2
Multiple chatroom supported
Expanded sidebar

Inspiration

We got the idea of creating a group chat platform when shareing our problems encountered during daily life. One of our group member has many groupwork activities during lectures. Most of the times, the teammates might not be familiar with each other. He need to record their email address, phone number or other communicate methods to share files work results with them. Most of these information is never used afterwards. So our team came up with an idea to create a temporary online group chat platform so that any team can just start-and-go with their discussion.

What it does

Since we are new to this topic, our project is still unmatured and lacks many expected functionalities. We finished the basic framework of the platform, that is, user can create temporary username and join a group with their partner as long as they entered a same string of characters. The group has unlimited size, and members can chat with each other in real time. Users can join many groups at once and switch between them at any time. Only pure text is supported, but the system can support more data format if we continue developing. The temporary user and group storage will be cleared after 1 day.

How we built it

We choose to use Spring Boot and Redis as the backend solution, and Vue.js as front-end framework to create the web page. We also use libraries such as layui, axios to assist in development. Most of our team members is new to backend & frontend developing, and we encountered many problems during the process. Initially, we want to use React as the web framework, but soon give up due to its complexity. Then we switched to Vue.js and quickly get familiar with the concepts on day one.

We first disscussed about the API we want to use, and started backend and frontend programming simultaneously in groups of two. After one day of hard working, we finished standalone parts for each end, and then we integrated the server and web page together for final adjustments. We spent a full 36 hours in this projects, and everyone put their effort in it. We all learnt a lot from this experience.

Challenges we ran into

Since we don't have the experience with full-stack project before, it is a great challenge to each individual. At first, we are not familiar with other people's strengths, and our coding style and environment are also very different. It takes a few hours to finially setup the unified environment that we can cooperate.

We also faced many technical difficulty during developing. It is really stressful especially when there is a tight time limit. We asked other groups and also the sponsors for their advice, and they gave great help to our project.

Accomplishments that we're proud of

We succeed in completing a full-stack project, as it is the first time for most of the members in our group. The project successfully finishes its job, and it also has potential ful future development.

What we learned

We learnt practical knowledge about Java, JavaScript, Spring Boot, Vue.js, and many other useful libraries. We also gained a lot of experience with group working and time management for a large project.

What's next for Chatroom

Our blueprint for this project will have much more functionalities. Including support for multiple media types and AI assistant. People can share temporary files within this group without worrying about them taking away their storage. Also import AI and LLM will enable more possibilities for group chat, such as giving a summary of all the group activities. We also need to add more test cases and security checks to make our platmore more robust.