Inspiration
We were very happy to see that the club was gaining activity. Consequentially we were inspired to create a website that would be great to use for the club members and contribute to the club. We are all passionate about software development and this seemed like a great opportunity to showcase our skills while contributing to something meaningful to the Seneca community.
What it does
For our website, we focused on simplicity and effectiveness. We believe that websites need to focus on being useful to the users. The users in this case are the students so we discussed what is the most important information for the students and we can best meet their needs. We decided that it is of utmost importance to provide the students with information about any upcoming club events such as hackathons to improve participation. Another thing we decided was important is club news. We knew that is very important to make it easy to add new events and news so we implemented a database system that takes care of it and provided a great interface for the admin to add new events and news. But we wanted to provide more value to the students. So we also created a chatbot that can answer user queries regarding the club.
How we built it
We built it using Next.js, which is a React framework. We created a flask application for the chatbot which communicates with the main application. We used Material Design (MDB) to create a responsive and user-centric UI. We chose to use Next.js because of prior experience and all of its functionalities which help make our website more scalable with the help of server-side rendering and more. For creating the chatbot, we used the Phi3 LLM by Microsoft that we ran locally with Ollama. We communicate with the LLM with the help of Langchain. The reason we chose phi3:mini was because of its quick responses and small size. This would greatly improve user experience by replying quickly to any user queries.
Challenges we ran into
We were originally using Llama3 which is a very large and computation-intensive model. This led to significant response times. The workaround we figured out was to use a smaller model. We went with Phi3:mini because it was a significantly small model while being better than some of the larger models such as Mistral. We also had to provide club context to the model so we connected it with the database. We also had to develop CRUD operations for news and events and the related frontend pages. This was a time-consuming task but manageable.
Accomplishments that we're proud of
We are proud of the work we did and how we were all able to come together to create this product. Everybody took responsibility and did their part to their utmost capability. We are proud of the features such as the UI, the chatbot, and the database. We also made it very simple and robust to manage the club events and news. You can simply go to the admin route and add or delete any events and news. It would have been very difficult having to manually change the html and such to add or remove events and news. It would also have been tedious having to deal directly with the database so we provided a clean and efficient interface.
What we learned
We learned how to work together and manage the work. We also learned several skills such as LLMs, Material Design, PyMongo, and other tools that we weren't familiar with. We also learned to adapt to other people's work i.e. understand other people's code and learn new things to contribute to it.
What's next for SSDC-Website
We want to improve the experience of creating news and events even further. We want to implement a proper blogging system that allows you to change the style of the text, add more images, etc. We also want to connect the chatbot with more information regarding the club to provide better service to the students.
Built With
- flask
- javascript
- langchain
- mdb
- next.js
- ollama
- pymongo
- react
Log in or sign up for Devpost to join the conversation.