✨ Inspiration

Inspired by other websites such as Investopedia, and building on the theme of RookieHacks II, we were inspired to create an online dictionary site to allow beginners to computer science to look up jargon and terms they may be unfamiliar with.

💻What it does

The main features of the website are the word of the day, search bar and alphabet navigation bar. This allows the user to find the word they're looking for in a variety of ways. It also allows the user to possibly find terms they may have never heard of before.

It was important for us to also display alternative terms. This includes abbreviations and slang to allow for the correct results to be shown to the user. Similarly, we decided to give examples where appropriate, and also links to related/similar terms to allow for further reading.

👷🏻‍♂️How we built it

Backend

Half the team worked on hosting the website on Google Cloud Platform. Being new to GCP, we decided to challenge ourselves and use MySQL for the database and PHP to connect the front end and backend processes. Populating our terms on a google sheet, we attempted to connect the sheet to an SQL database but ran into some problems. Using a Compute Engine VM instance, and connected the front end processes to a Ubuntu server where we ran apache2. We created a domain on godaddy's partner website porkbun.com and linked the DNS to vm

Frontend

Half the team worked on the initial design for the frontend. We chose to work on replit to allow for collaborative coding. We used html, css and js to design the webpage. We started by focusing on the homepage and the elements that needed to appear on every page. These included the logo, search bar and alphabet navigation bar.

We decided the necessary pages were a homepage, error/not found page, alphabetical list page and definition page.

Following coding everything on replit, we uploaded all the files in to a bucket on Google Cloud which we used as the host for the webpage.

💪🏽Challenges we ran into

Due to this being a global hackathon, we ran into the issue of working across time zones. This wasn't too much of a problem but it added a bit of a challenge to working as a team.

With time constraints we would have liked to have made more of our website interactive by linking everything correctly to the database. This would have allowed for more pages to be functioning.

Having no experience with MySQL or PHP it was difficult to code and connect the databases correctly. We also faced difficulty learning how to use the google sheets api to connect the sheet to the database.

📝 What we learned

For frontend we learned a lot about making interactive elements like a search bar and navigation bar. We also learned how to use Flexbox to align the elements of the webpage.

The whole team weren't particularly familiar with Google Cloud so this was a new learning experience for everyone.

For backend, we learned a lot about the various types of commonly used tech stacks and how GCP fits in the modern tech stack. We also learned about the purpose of cloud computing. We were also able to learn about different types of back-end languages like php.

👍🏼What's next for CSJargon

It would be interesting to add a section on the home page that displayed terms that were trending in the news at the current time. This would keep the terms up to date and help the user to understand current technological trends.

References

Computer Hope for the majority of definitions

Share this project:

Updates