{"id":19032639,"url":"https://github.com/bitbravo/flask-demo","last_synced_at":"2026-06-19T08:02:17.969Z","repository":{"id":120974970,"uuid":"605139324","full_name":"BitBravo/flask-demo","owner":"BitBravo","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-22T14:38:58.000Z","size":591,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T20:36:33.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BitBravo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-02-22T14:29:18.000Z","updated_at":"2023-02-22T14:39:02.000Z","dependencies_parsed_at":"2024-02-01T12:43:34.017Z","dependency_job_id":null,"html_url":"https://github.com/BitBravo/flask-demo","commit_stats":null,"previous_names":["bitbravo/flask-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BitBravo/flask-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fflask-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fflask-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fflask-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fflask-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BitBravo","download_url":"https://codeload.github.com/BitBravo/flask-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitBravo%2Fflask-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34522042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"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":[],"created_at":"2024-11-08T21:29:48.381Z","updated_at":"2026-06-19T08:02:17.926Z","avatar_url":"https://github.com/BitBravo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flask Demo\n\n## Application break down\n\nThe application is comprised of 4 parts\n\n1. webapp -\u003e Frontend for the applicaiton (written in React and Typescript)\n2. api.orders -\u003e Backend for the applicaiton (written in flask)\n3. nginx -\u003e The proxy for the requests\n4. db -\u003e mariadb\n\n## Requirements\n\n1. Docker [https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/)\n2. Docker Compose [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)\n3. Node v17.9.1 [https://nodejs.org/fr/blog/release/v17.9.1/](https://nodejs.org/fr/blog/release/v17.9.1/)\n\n## Setup\n\n### webapp\n\nThe client side applicaiton uses node version 17, node 16 should also work as well. From the root of the `webapp` directory install the node dependencies using the command bellow\n\n```Bash\nnpm ci\n```\n\nand build the docker image for the webapp container using the command bellow from the root of the `webapp` directory\n\n```Bash\ndocker build -t webapp:latest .\n```\n\n### api.orders\n\nTo build the docker image for api.orders run the command bellow from the root of the `api.orders` directory\n\n```Bash\ndocker build -t api.orders:latest .\n```\n\n### Starting the application\n\nTo start application run the following command from the root directory\n\n```Bash\ndocker compose up -d\n```\n\nTo connect to the app go to [http://localhost:80](http://localhost:80)\n\nNOTE: If you see an NGINX 502 wait a couple of seconds, then refresh the page. It just means node is not done compiling the application\n\n## Storybook\n\n[Storybook](https://storybook.js.org/) is a frontend workshop for building UI components and pages in isolation.\nTo start storybook run the following command from the root of the `webapp` directory\n\n```Bash\nnpm run storybook\n```\n\nTo view the component library, go to [http://localhost:6006](http://localhost:6006). This will show you all the pages and components that have been built for the application without needing to start the applicaiton.\n\nNOTE: Storybook is configured to run locally\n\n## Testing\n\nBoth webapp and api.orders have tests written, webapp uses jest and api.orders uses pytest.\n\n### Testing webapp\n\nTo run the jest tests run the following command at the root of the `webapp` directory\n\n```Bash\nnpm run test\n```\n\n### Testing api.orders\n\nTo run the pytests from the root directory run the following commands\n\n```Bash\ndocker compose exec -it api-orders bash\npython -m pytest tests/ # from within the container\n```\n\nNOTE: Make sure the api.orders container is running.\n\nYou can also install all the dependencies locally and run the tests using the same command that you run inside the docker container from the bakcend directory. Would recommend setting up a python env under the .venv directory name for this\n\n## Your task\n\nYou must develop the Products page for this application and create a PUBLIC github repo with the implementaion. There will be 3 steps to this task.\n\n### Step 1: Webapp\n\nYou must develop a component to display the product name, product id and the product display image for each image. You can develop this component any way you wish (NOTE the current style system uses tailwind it is STRONGLY advised you use this style system). Then you will use this component to display all the products found in the database that are active. You will implemente this page at `webapp/src/pages/ProductsPage/ProductsPage.tsx`.\n\n### Step 2: api.products\n\nYou must develop a products micro-service containing an endpoint with the following prefix `/api/products/` that returns a json object with the content needed to display the products on the products page. This micro-service MUST run in its own container and the container must be added to the docker compose file, and you must include the instructution on how to setup the new micro-service in this file. You must also modify nginx to direct the traffic to your new endpoint, see `nginx.conf` for details. (You can implement this micro-service however you like, i.e. any language or framework of your choosing).\n\n### Step 3: mariadb\n\nThere are 2 sql init scripts in the db `schema.sql` and `data.sql`. The schema script sets up the the data base schema and the data script initialized the database with mock data.\n\nThe database has the following schema:\n\n```\nDatabase marz -\u003e Table Customer(\n    Column CustomerID = IntegerField(primary_key=True) # Auto-generated\n    Column CustomerFirstName = CharField(100, null=False)\n    Column CustomerLastName = CharField(100, null=False)\n)\n```\n\n```\nDatabase marz -\u003e Table Products(\n    Column ProductID = IntegerField(primary_key=True) # Auto-generated\n    Column ProductName = CharField(100, can_be_null=False)\n    Column ProductPhotoURL = CharField(255, can_be_null=False)\n    Column ProductStatus = EnumField({ 'Active', 'InActive' }, can_be_null=False)\n)\n```\n\n```\nDatabase marz -\u003e Table Orders(\n    Column OrderID = IntegerField(primary_key=True) # Auto-generated\n    Column OrderStatus = EnumField(\n        { 'Queued', 'InProgress', 'QA', 'Cancelled', 'Complete' },\n        can_be_null=False\n    )\n    Column ProductID = ForeignKeyField(\n        Table=Product, field='ProductID', can_be_null=False, column_name='ProductID'\n    )\n    Column CustomerID = ForeignKeyField(\n        Table=Customer, field='CustomerID', can_be_null=False, column_name='CustomerID'\n    )\n)\n```\n\nCurrently the `marz.Product.ProductPhotoURL` column contains no valid urls to for photos \n\n```\nMariaDB [marz]\u003e select * from Product;\n+-----------+-------------+-----------------+---------------+\n| ProductID | ProductName | ProductPhotoURL | ProductStatus |\n+-----------+-------------+-----------------+---------------+\n|         1 | Hat         | t               | Active        |\n|         2 | Shoes       | t               | Active        |\n|         3 | Pants       | t               | Active        |\n|         4 | Shirt       | t               | InActive      |\n|         5 | Coat        | t               | InActive      |\n+-----------+-------------+-----------------+---------------+\n5 rows in set (0.00 sec)\n```\n\nYou must replace all of the product photo urls with real photo urls (you can use any photo url) and modify the data.sql script to use the new urls.\n\n## Submission\n\nTo submit the solution please email `aadeyeye@marzvfx.com` with a link to your github repo with the implemented task. For the email subject please specify your full name (first and last name) as well as the roll you are applying for\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitbravo%2Fflask-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitbravo%2Fflask-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitbravo%2Fflask-demo/lists"}