{"id":20364805,"url":"https://github.com/fritatina/tw6-calarium","last_synced_at":"2026-04-09T12:02:20.757Z","repository":{"id":206318229,"uuid":"716304724","full_name":"rt2013G/tw6-calarium","owner":"rt2013G","description":"This is a project created for my university course of Web Tecnologies, with the purpose of designing and building a web application in its entirety, including both the front end and the back end","archived":false,"fork":false,"pushed_at":"2023-12-29T12:54:47.000Z","size":11656,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T18:46:25.919Z","etag":null,"topics":["css","figma","flask","gulp","html","javascript","python","scss","three-js","webapp"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rt2013G.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-08T21:23:23.000Z","updated_at":"2023-12-28T19:29:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"5412ad5b-b223-4aa2-9e33-317d286a7818","html_url":"https://github.com/rt2013G/tw6-calarium","commit_stats":null,"previous_names":["rt2013g/tw6-calarium"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rt2013G/tw6-calarium","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2013G%2Ftw6-calarium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2013G%2Ftw6-calarium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2013G%2Ftw6-calarium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2013G%2Ftw6-calarium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rt2013G","download_url":"https://codeload.github.com/rt2013G/tw6-calarium/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2013G%2Ftw6-calarium/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260891087,"owners_count":23077906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","figma","flask","gulp","html","javascript","python","scss","three-js","webapp"],"created_at":"2024-11-15T00:13:35.274Z","updated_at":"2025-12-30T19:58:16.629Z","avatar_url":"https://github.com/rt2013G.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TW6-Calarium\r\nThis is a project created for my university course of _Web Tecnologies_, with the purpose of designing and building\r\na web application in its entirety, including both the front end and the back end, with tools of our choice.\r\n\r\n## Table of contents\r\n\r\n- [Overview](#overview)\r\n- Building the project\r\n  - Tools used\r\n      - [Figma](#figma)\r\n      - [Sass](#sass)\r\n      - [Gulp](#gulp)\r\n      - [HTML](#html)\r\n      - [Javascript](#javascript)\r\n      - [Three.js](#threejs)\r\n      - [PWA](#pwa)\r\n      - [Flask](#flask)\r\n  - [Workflow](#workflow)\r\n- [Deployment](#deployment)\r\n- [What I learned](#what-i-learned)\r\n- [Author](#author)\r\n- [Additional resources and acknowledgements](#additional-resources-and-acknowledgements)\r\n\r\n\r\n## Overview\r\n_Calarium_ itself is a game I made in Unity, which features a procedurally generated planet that\r\nthe user has to survey and analyze.\\\r\nThe purpose of this web application is to provide an additional layer of interactivity with the players: \r\nit serves as an online client where people can not only download the game but also connect with one another through\r\nvarious different provided services, almost as if it were a game on its own.\r\n\r\n\u003cimg src=\"./design/img/home.png\" width=\"700\"/\u003e\r\n\r\n\r\n## Workflow\r\n\r\n\r\n### Figma\r\nThe first step is the UX/UI design.\r\nThis was my first time ever using figma or any website design tool, but I tried my best to put up a half-decent interface.\r\nI used as reference 1366x700 for desktop and 400x700 for mobile.\\\r\nAll design files and images can be found in the _design_ folder.\r\n\r\n### Setting up the project\r\nHaving **Node** installed on the machine, run\\\r\n```npm init -y```\\\r\n```npm install sass```\r\n\r\n### Sass\r\nI first created a folder structure based on the **7:1 pattern**, then added some basic _.scss_ files.\\\r\nThe command\\\r\n```sass --watch app/sass:app/out```\\\r\ncan be used to compile Sass into CSS and tell Sass to watch \r\nthe app/Sass folder for changes.\\\r\nI will be using this command later when setting up a **Gulp** workflow.\r\n\r\n### Gulp\r\n```npm install gulp-cli```\\\r\n```npm install --save-dev gulp gulp-sass browser-sync```\\\r\nGulp is a toolkit to automate development workflow, I haven't tinkered with it much, so I'll just be using it for\r\nauto compiling Sass files and auto updating my browser page.\\\r\n_npm_ signals some vulnerabilities with gulp's dependencies, so I had to add this to my _package.json_:\r\n```\r\n\"overrides\": {\r\n    \"glob-parent\": \"^6.0.2\"\r\n  }\r\n```\r\nand run ```npm upate```\\\r\nNow I can set up a Gulp workflow by creating a _gulpfile.js_ file, then simply run ```gulp watch``` in the command line.\r\n\r\n### HTML\r\nI then created the index.html file, imported the font [_Inter_](https://fonts.google.com/specimen/Inter) and styled the page using only SCSS.\r\n\r\n### Javascript\r\nAfter styling only the home page, I decided to add the first bits of Javascript to include the sound toggle button.\\\r\nTo help making the website interactive, I installed _JQuery_, and then _Three.js_ to add 3D animations.\r\nI imported them as HTML script tags, but they can also be installed with npm as follows:\\\r\n```npm install jquery```\\\r\n```npm install --save three```\r\n\r\n### ThreeJS\r\nI used Three.js to add a three-dimensional background. I added a simple moon and some stars, some of which\r\nmove when moving the mouse on the page. I didn't tinker with Three.js enough to uncover its full potential but\r\noverall I think it looks nice enough.\r\n\r\n### PWA\r\nA Progressive Web App is a web application that can be installed on mobile like a native application.\r\nIn order to achieve this, I have to add a _manifest.json_ file and a _sw.js_ file in my project.\r\nThe _sw_ or _service worker_ is a thread that runs in the background and caches content, so that the app is able\r\nto work even without a connection.\r\n\r\n### Flask\r\nThe backend of the web application uses Python with the microframework _Flask_.\\\r\nI first created a _virtual environment_, then installed flask with ```pip install flask```\r\nand added the files _.flaskenv_, _.env_ and _config.py_ to store configuration and environment variables.\r\nI also installed the extension ```pip install flask_wtf``` to handle forms.\r\nTo manage databases easily, I'm also using ```pip install flask-sqlalchemy``` and ```pip install flask-migrate```.\r\nDuring development, I'm working with a SQLite database as it easier to manage, but I'll be migrating to another\r\nDBMS when the application is closer to being completed.\\\r\nTo initialize a database with flask migrate, I used the flask sub-command ```flask db init```. \r\n```flask db migrate``` provides us with the migration script, then ```flask db upgrade``` applies the changes to \r\nthe database. Meanwhile, to implement the login/logout/user functionalities I also added ```pip install flask-login```.\r\n\r\n\r\n## Deployment\r\nI've deployed the application on [Heroku](https://www.heroku.com/).\r\nIn order to work with heroku, you have to first install the **Heroku CLI** and login with ```heroku login```\\\r\nAfter that, create a new heroku application with ```heroku apps:create YOURAPPNAME``` (change YOURAPPNAME with whatever\r\nname suits you)\\\r\nBecause heroku files are ephemeral, we also need to install a proper database add-on to store our data, I decided\r\nto use **Postgres** for this project:\\\r\n```heroku addons:create heroku-postgresql:mini```\\\r\nThen tell heroku the entry point of the application via a config variable:\r\n```heroku config:set FLASK_APP=calarium.py```\\\r\nThe only thing left to do is to set up a _Procfile_, which tells heroku the command to start the process, then finally\r\ndo a ```git commit``` and a ```git push heroku main```\\\r\nThe app is now running on heroku, you can access the link via ```heroku info```\r\n\r\n\r\n\r\n## What I learned\r\n- Working on this project alone was a massive undertaking, it made me truly understand the phrase\r\n\"two is megl che one\", although for a real-world application two might not be enough anyway.\r\n- I'm not quite sure yet, but working on the presentation (figma, scss, etc...) before the logic (flask, the database)\r\nmight have been a mistake, at least that's how I felt when I started building the flask application.\r\n- I spent more time researching and setting up the project than actually working on it, but that's probably fair because\r\nthis was the first time I ever worked on a complete web application or a more-than-a-few-files project. \r\nNow that I have a basic grasp of the technologies needed, time requirements, folder structure and what the setup \r\nlooks like, getting started on another project will definitely be much easier.\r\n\r\n\r\n## Author\r\nRaffaele Talente, student enrolled at University of Naples \"Parthenope\"\r\n\r\n\r\n## Additional resources and acknowledgements\r\n- [Raffaele Montella](https://github.com/raffmont) - Professor of the course\r\n- [Acerola's epic color palette](https://acerola.gg/colors.html) - For helping me find a color scheme to use\r\n- [Sass website](https://sass-lang.com/guide/) and [Sass guidelines](https://sass-guidelin.es/) - For everything related to Sass\r\n- [SVG Repo](https://www.svgrepo.com/) - For the icons used\r\n- [ArctSound](https://pixabay.com/music/main-title-sci-fi-cyberpunk-trailer-110587/) - For the music theme\r\n- [This codepen](https://codepen.io/sosuke/pen/Pjoqqp) - For changing color of SVG icons\r\n- [Three.js docs](https://threejs.org/docs/)\r\n- [This video](https://www.youtube.com/watch?v=Q7AOvWpIVHU) - For the image assets\r\n- [The Flask Mega-Tutorial](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) - A great course that helped me a lot with Flask","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritatina%2Ftw6-calarium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffritatina%2Ftw6-calarium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritatina%2Ftw6-calarium/lists"}