{"id":20236137,"url":"https://github.com/itsvaibhavk/swimlogwebapp","last_synced_at":"2026-04-09T15:54:04.032Z","repository":{"id":203300897,"uuid":"709283409","full_name":"ItsVaibhavK/SwimLogWebApp","owner":"ItsVaibhavK","description":"Web app version of Swim Log using Python, Flask, Jinja, HTML, CSS, Bootstrap, JavaScript. Final project submission for CS50X (2023), Harvard's online course on computer science (on the edX platform).","archived":false,"fork":false,"pushed_at":"2024-01-08T09:58:11.000Z","size":222,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T14:25:47.534Z","etag":null,"topics":["bootstrap","cs50","cs50x","css","database","dbms","edx","flask","harvardcs50","html","html-css-javascript","javascript","jinja","python","python3","sqlite","sqlite3","webapp"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItsVaibhavK.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-10-24T12:07:03.000Z","updated_at":"2023-11-30T15:37:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdb9eafd-393f-4e8b-bac9-b229e9a832f3","html_url":"https://github.com/ItsVaibhavK/SwimLogWebApp","commit_stats":null,"previous_names":["itsvaibhavk/swimlogwebapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ItsVaibhavK/SwimLogWebApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsVaibhavK%2FSwimLogWebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsVaibhavK%2FSwimLogWebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsVaibhavK%2FSwimLogWebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsVaibhavK%2FSwimLogWebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsVaibhavK","download_url":"https://codeload.github.com/ItsVaibhavK/SwimLogWebApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsVaibhavK%2FSwimLogWebApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266890379,"owners_count":24001538,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","cs50","cs50x","css","database","dbms","edx","flask","harvardcs50","html","html-css-javascript","javascript","jinja","python","python3","sqlite","sqlite3","webapp"],"created_at":"2024-11-14T08:19:14.424Z","updated_at":"2025-12-30T20:06:40.834Z","avatar_url":"https://github.com/ItsVaibhavK.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SWIM LOG WEB APP\n[Demo video on Youtube](https://youtu.be/vedY6Kmvq5M)\n#### Description:\n## IDEA BEHIND SWIMLOG AS A WEB APP\nThe basic command-line version of this program was originally written for my final project for [CS50P (2023)](https://cs50.harvard.edu/python/2022/).\u003cbr\u003eI decided to take that basic Python program, and elevate it to a web app using the various tools and technologies I learnt in [CS50X (2023)](https://cs50.harvard.edu/x/2023/).\n\n_Note:_ This README file contains common sections borrowed from the original [Swim Log](https://github.com/ItsVaibhavK/SwimLog.git) project as some of the explanation remains the same,\u003cbr\u003elike the inspiration behind it, thought process, etc.\n\n\nAs a person who swims fairly regularly for exercise, I wanted to track my basic swimming data, like:\n- Distance swam in a session\n- Pool length\n- Duration of a session\n\nAnd to be able to analyze the data, with parameters such as:\n- Total distance swam\n- Total time spent swimming\n- Average distance swam per session\n- Average duration of a session\n\nBefore I decided to turn this idea into my final project for [CS50P (2023)](https://cs50.harvard.edu/python/2022/) and [CS50X (2023)](https://cs50.harvard.edu/x/2023/), I was trying out various swim-tracking apps on my phone,\u003cbr\u003ebut they were all invariably too cluttered for my taste. More often than not, it was about pushing the user to sign up for swimming lessons,\u003cbr\u003eor to connect a smart watch that would share your swimming session data to the app for you.\n\nMost of the apps had the option to manually update your swimming session data, but it was almost always without fail locked behind a paywall.\u003cbr\u003eThis is what ultimately led me to utilize what I have been learning through [CS50P (2023)](https://cs50.harvard.edu/python/2022/) and [CS50X (2023)](https://cs50.harvard.edu/x/2023/) and create a Python program\u003cbr\u003eto allow me to log/track the data from my swimming sessions.\n\nFrom the initial command-line Python program version of [Swim Log](https://github.com/ItsVaibhavK/SwimLog.git), I decided to turn it into a web app utilizing Flask, Python, SQL, Bootstrap, and more.\n\n## HOW SWIM LOG WORKS\n### Libraries used:\n- **cs50** - Using `from cs50 import SQL` enables the program to talk to the SQLite3 database, so that SQL queries can be executed within Python code.\n\n- **flask** - Light web framework written in Python that enables Python code to run within HTML using Jinja, a templating langauge.\n\n- **werkzeug.security** - Library that helps keep user passwords encrypted.\n\n- **flask_session** - To keep track of user's session data.\n\n### Files in this project:\n- **app.py** - Contains the main code that makes this project run.\n\n- **swimlog.db** - The SQLite3 database that stores user data in two tables, `users` and `swim_data`.\n\n- **helpers.py** - Helper functions for **app.py**.\n\n- **requirements.txt** - Lists all the pip-installable modules used.\n\n- **README.md** - The current file.\n\n- **add.html** - HTML file for the page that allows the user to add new data.\n\n- **apology.html** - HTML file for the page that displays an error code and message.\n\n- **change.html** - HTML file for the page that allows the user to change their password.\n\n- **delete.html** - HTML file for the page that allows th user to delete data from `swim_data`.\n\n- **index.html** - HTML file for the home page.\n\n- **layout.html** - HTML file for the base template page.\n\n- **login.html** - HTML file for the page that allows the user to log in.\n\n- **modify.html** - HTML file for the page that allows the user to modify existing data.\n\n- **register.html** - HTML file for the page that allows a new user to register.\n\n- **styles.css** - CSS file/stylesheet.\n\n- **favicon.ico** - Branding image for the web app.\n\n- **logo.png** - Branding image for the web app.\n\n### Schema for data tables:\nThese were the **SQL commands** run to create the data tables:\n\nCREATE TABLE users (\u003cbr\u003eid INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,\u003cbr\u003eusername TEXT NOT NULL,\u003cbr\u003ehash TEXT NOT NULL\u003cbr\u003e);\n\nCREATE UNIQUE INDEX username ON users (username);\n\nCREATE TABLE swim_data (\u003cbr\u003esession INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,\u003cbr\u003euser_id INTEGER NOT NULL,\u003cbr\u003edate DATETIME DEFAULT CURRENT_TIMESTAMP,\u003cbr\u003edistance INTEGER NOT NULL,\u003cbr\u003epool INTEGER NOT NULL,\u003cbr\u003eduration INTEGER NOT NULL,\u003cbr\u003eFOREIGN KEY (user_id) REFERENCES users(id)\u003cbr\u003e);\n\n### Operations:\n\nThe web app takes the user to the `login` page by default. No other page can be accessed without logging in, thanks to the decorator `@login_required`.\u003cbr\u003eWhile logged out, the only navbar options are `Register` and `Log in`.\n\nOnce logged in, the web app goes to the `home` page. The user is greeted with a welcome message.\u003cbr\u003eHere, the user's existing swim data is displayed as a table, with the following analytics under it:\n- Total distance swam: in meters if under a kilometer, in kilometers otherwise.\n- Average distance swam per session: in meters if under a kilometer, in kilometers otherwise.\n- Total time spent swimming: in minutes if under an hour, in hour(s) and minute(s) otherwise.\n- Average time spent swimming per session: in minutes if under an hour, in hour(s) and minute(s) otherwise.\n\nSince a first-time user would not have any existing swimming data to display, they are taken to the `Add New Data` page by default.\u003cbr\u003eOnce data is added, they are taken to the `home` page.\n\nThe `home` page navbar presents the user with the options to `Change Password` and `Log Out`.\n\nUnder all this info, the user is presented with three buttons:\n- **Add New Data** - Add new data to their `swim_data` table.\n- **Modify Existing Data** - Modify existing data from their `swim_data` table using `session` number.\n- **Delete Data** - Delete data from their `swim_data` table using `session` number.\n\n\n\n\n## DESIGN THOUGHTS AND FUTURE IDEAS:\n1. [Bootstrap](https://getbootstrap.com/) is utilized quite heavily throughout this project to beautify the web app.\n\n2. [CS50X (2023)](https://cs50.harvard.edu/x/2023/)'s Week 9 problem, [C$50 Finance](https://cs50.harvard.edu/x/2023/psets/9/finance/), was used as a base to build this web app, especially to figure out user-related data\u003cbr\u003eand features such as logging in, logging out, helper functions, etc.\n\n3. Distance covered in a session, pool length, and the duration of a session are the current parameters that are the focus of Swim Log\u003cbr\u003esince these are the main parameters I care about for my personal data. I would, however, like to also consider adding parameters\u003cbr\u003esuch as number of laps and swim pace.\n\n4. The program currently only stores/calculates distance data under the metric system. An idea for a future version of Swim Log could be to\u003cbr\u003eprovide the option of selecting what system of measurement the user would like to implement.\n\n5. Currently, the date/timestamp data is not used in any way apart from a form of record-keeping.\u003cbr\u003eUtilizing the date/timestamp data to see milestones like start date, year, etc. can also be considered.\n\n## CREDITS, CONCLUSION:\nI cannot express my gratitude and admiration of the staff and team at CS50 enough for sharing their knowledge with students like me,\u003cbr\u003eand for their time, effort and dedication behind the plethora of courses offered by Harvard's CS50 on [edX.](https://www.edx.org/) I went from not knowing anything about programming at all\u003cbr\u003eto writing my own programs and web apps in these last few months.\u003cbr\u003eThank you from the bottom of my heart for instilling in me the love of all things programming!\n\n_To quote [Professor Malan](https://cs.harvard.edu/malan/):_\n\u003e This was CS50!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsvaibhavk%2Fswimlogwebapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsvaibhavk%2Fswimlogwebapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsvaibhavk%2Fswimlogwebapp/lists"}