The First few ideas that came to mind for me were:
1. Community Notice Board for letting people post and view announcements, lost and found items and more.
2. Community favourite ingredient combos for ordering at the cuppa or cantee using statistics to determine the most liked combo.
3. Coolmine CoolFM Music polls and suggestions to determine what songs or genre people would rather listen to in the canteen using statistics.
4. Student Note Topics for sharing their notes on the subject that they are studying on for others to use and improve on the subject in their own understanding
5. Computer Upgrade Recommender for when peoples PC's, laptops and other electronics are starting to become slow, this database will help determine if you need to upgrade or keep depending on the specifications of your computer.
I had chosen the Computer Upgrade Recommender idea since it would be of most use to people nowadays since technology is all around us and we can easily be able to determine if an upgrade is needed with a few submissions. this is also useful for showing a database which shows community best picked brands and hardware.
Planning the Computer Upgrade Recommender:
To make it easier and more accessible for users to put in info and get a submission, nstead of overwhelming users with open-ended input fields, the website will use dropdown lists for easy selection. For example, when specifying their graphics card, users will first choose the brand (e.g., NVIDIA, AMD) from a dropdown list. Based on their selection, a second dropdown will populate with relevant GPU models (e.g., RTX 3080, RX 6800 XT).
This approach will be replicated for other components like RAM, where users can select the amount (e.g., 8GB, 16GB) and generation (e.g., DDR4, DDR5) from separate dropdown lists. Similarly, CPU, storage type, and other relevant hardware will follow the same user-friendly selection process.
The website will also include graphs to show the statistics for what people have inputted for their system specifications to make it easier for people to determine what are the most chosen parts of their system.
The design will prioritize a clean, modern aesthetic with a focus on user-friendliness. A washed-out blue color scheme with rounded edges will be used throughout the interface to create a visually appealing experience.
1. Clear Section Headers: Each hardware category (CPU, GPU, RAM, etc.) will be clearly labeled with nice headers, guiding the user through the process.
2. Vertically Stacked Dropdown Lists: Dropdown lists will be used for each selection, offering a clean and compact way to present options. These will be vertically stacked within each category, allowing users to easily progress from one choice to the next.
3. Visual Feedback: Upon selecting an option, a subtle visual cue (like a color change or a checkmark) will confirm the user's choice.
Data Visualization:
To present the collected hardware data in a useful and informative way, I'll use Chart.js to create visually appealing graphs whilst being easily able to create charts based on the database we already have:
This way, we will be able to use the firebase database with the submitted information to our benefit in real time
The Creating stage was more of a creative process where I would end up trying the new things, implementing them one by one and progressing through the website step by step.
the first step was to create and structure the website to its testing phase where i can easily manage the database first when trying out new methods for the website
the second step was to implement each script and function needed to make sure everything works in place like being able to clear the database instantly with a button and testing out chart.js with the database we already have to start using it when we fully understand how to utilize the script
the third step was to make sure that any bugs were solved already like being able to submit data with no data inside the submission form
once we have implemented all the necessary features and tested that they work right with no bugs, we can edit the firebase API to be in its secure phase so that people can't just take the info and mess with the databse.
This solution was the best idea for me to work on since it was what i was experienced with the most, it was very flexible with how i could have achieved this along with what I could have stylized the page to look like.
The styling of the page was what worked pretty well, the functions that i had struggled to implement worked as it should after proper configuring and chart.js was also working as it should when i had decided to link the text to it using a custom made function that determines how many times the word appears in the text.
I would simply have allocated a lot more time to this if there were no other projects in the way that were taking up the time to do this project.
I had learned how useful JavaScript can be when making a website funtional along with being able to link it to a realtime database like firebase and have the chart update instantly.