{"id":20330798,"url":"https://github.com/dking1342/swiggy-clone","last_synced_at":"2026-04-14T04:31:15.727Z","repository":{"id":108787176,"uuid":"465147727","full_name":"dking1342/swiggy-clone","owner":"dking1342","description":"A food ordering app clone using Python/Django on the backend, Vuejs on the frontend and PostgresQL for the database","archived":false,"fork":false,"pushed_at":"2022-08-09T23:41:12.000Z","size":525,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-04T12:26:53.768Z","etag":null,"topics":["css","css3","django","django-application","django-rest-framework","html-css-javascript","postgresql","python","vue","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/dking1342.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,"publiccode":null,"codemeta":null}},"created_at":"2022-03-02T03:49:38.000Z","updated_at":"2025-02-23T09:02:47.000Z","dependencies_parsed_at":"2023-06-05T04:00:15.174Z","dependency_job_id":null,"html_url":"https://github.com/dking1342/swiggy-clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dking1342/swiggy-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dking1342%2Fswiggy-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dking1342%2Fswiggy-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dking1342%2Fswiggy-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dking1342%2Fswiggy-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dking1342","download_url":"https://codeload.github.com/dking1342/swiggy-clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dking1342%2Fswiggy-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31782736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","css3","django","django-application","django-rest-framework","html-css-javascript","postgresql","python","vue","vuejs","vuex"],"created_at":"2024-11-14T20:17:41.746Z","updated_at":"2026-04-14T04:31:15.711Z","avatar_url":"https://github.com/dking1342.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Swiggy clone\n\u003ci\u003eA food ordering app clone using Python/Django on the backend, Vuejs on the frontend and PostgresQL for the database\u003c/i\u003e\n\n## Stack Used\n\u003cul\u003e\n  \u003cli\u003ePython\u003c/li\u003e\n  \u003cli\u003eDjango\u003c/li\u003e\n  \u003cli\u003eVuew\u003c/li\u003e\n  \u003cli\u003ePostgres\u003c/li\u003e\n\u003c/ul\u003e\n\n## Setup\nYou will need to install Python, Django, Vuejs, VueCLI and Postgres on your local computer. The links below will bring you to the respective site to help you get started with the installation. You can use npm or yarn depending on your preference. Please select the installation options that are best suited for your local computer.\n\n### Installation links\n\u003cul\u003e\n  \u003cli\u003e[Node](https://nodejs.org/en/download/) This is if you want to use NPM. You will need to download Nodejs first\u003c/li\u003e\n  \u003cli\u003e[NPM](https://docs.npmjs.com/cli/v8/commands/npm-install)\u003c/li\u003e\n  \u003cli\u003e[Yarn](https://classic.yarnpkg.com/lang/en/docs/cli/install/)\u003c/li\u003e\n  \u003cli\u003e[Python](https://www.python.org/downloads/)\u003c/li\u003e\n  \u003cli\u003e[Django](https://docs.djangoproject.com/en/4.0/topics/install/)\u003c/li\u003e\n  \u003cli\u003e[Vue](https://vuejs.org/guide/quick-start.html) This is for version 3\u003c/li\u003e\n  \u003cli\u003e[Vue CLI](https://cli.vuejs.org/guide/installation.html)\u003c/li\u003e\n  \u003cli\u003e[Postgres](https://www.postgresql.org/download/)\u003c/li\u003e\n  \u003cli\u003e[Visual Studio](https://visualstudio.microsoft.com/downloads/)\u003c/li\u003e\n  \u003cli\u003e[PyCharm](https://www.jetbrains.com/help/pycharm/installation-guide.html)\u003c/li\u003e\n\u003c/ul\u003e\n\n### Folder structure\nThis is a folder structure of how I have put this project together. This is subject to change and you can make it how you see fit depending on modifications or alterations you want to have beyond what I have done.\n\n\u003cul\u003e\n  \u003cli\u003e|--swiggy\u003c/li\u003e\n  \u003cul\u003e\n    \u003cli\u003e|--server\u003c/li\u003e\n      \u003cul\u003e\n        \u003cli\u003e|--apps\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e|--discount\u003c/li\u003e\n          \u003cli\u003e|--menu\u003c/li\u003e\n          \u003cli\u003e|--restaurants\u003c/li\u003e\n          \u003cli\u003e|--userinfo\u003c/li\u003e\n          \u003cli\u003e|--utils\u003c/li\u003e\n          \u003cli\u003e__init__.py\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e|--config\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e.env\u003c/li\u003e\n          \u003cli\u003e__init__.py\u003c/li\u003e\n          \u003cli\u003easgi.py\u003c/li\u003e\n          \u003cli\u003esettings.py\u003c/li\u003e\n          \u003cli\u003eurls.py\u003c/li\u003e\n          \u003cli\u003ewsgi.py\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e|--venv\u003c/li\u003e\n        \u003cli\u003e.gitignore\u003c/li\u003e\n        \u003cli\u003emain.py\u003c/li\u003e\n        \u003cli\u003emanage.py\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cli\u003e|--client\u003c/li\u003e\n      \u003cul\u003e\n        \u003cli\u003e|--node_modules\u003c/li\u003e\n        \u003cli\u003e|--public\u003c/li\u003e\n        \u003cli\u003e|--src\u003c/li\u003e\n        \u003cli\u003e.gitignore\u003c/li\u003e\n        \u003cli\u003ebabel.config.js\u003c/li\u003e\n        \u003cli\u003epackage.json\u003c/li\u003e\n        \u003cli\u003eyarn.lock\u003c/li\u003e\n      \u003c/ul\u003e\n  \u003c/ul\u003e\n\u003c/ul\u003e\n    \n### gitignore files\nAn easy way to get the needed info within the gitignore files is to use the website [Toptal](https://www.toptal.com/developers/gitignore). All you need to do is type in the stack that you are using and it will have all the files that need to be hidden. You can copy and paste it to your gitignore files as needed.\n\n### Github initialization\nWhen starting the project you and make the folders swiggy as the root then client and server as the subdirectories. We will get to the installation needed for the subdirectories. For the time being, go to the parent directory of swiggy and use your CLI to type in the following:\n\n```\ngit init\ngit branch -M main\ngit add .\ngit commit -m 'Type your message here'\ngit remote add origin \u003cyour github repo url\u003e\ngit push -u origin main\n```\n\nIf you have something like zsh installed then you can look up the shortened git commands [here](https://kapeli.com/cheat_sheets/Oh-My-Zsh_Git.docset/Contents/Resources/Documents/index)\n\n## Backend Setup\nThis project is being done with PyCharm as the IDE, but you are welcome to use whatever IDE or text editor you are comfortable with. \n\n### Make a virtual environment\nUse this script to create a virtual environment. The virtual environment is used to store all the dependencies needed for the project to work.\n\n```\npython3 -m venv venv\n```\n\n### Go inside the virtual environment\nUsing the terminal/CLI I will open one window up specifically to write scripts or commands. There will be other windows opened for other purposes. In this terminal type the following command to enter the virtual environment. Make sure that you are in the server folder. This will be helpful when downloading any dependencies. It will be here.\n\n```\nsource venv/bin/activate\n```\n\n### Start the project\nIn the root folder type this in the command prompt:\n\n```\ndjango-admin startproject config .\n```\n\n### Create env file\nGo to the config folder and create an .env file that will hold the secret variables\n\n```\ntouch .env\n```\n\nOpen the env file and type the needed variables required for the database and key. I am using Postgres so that will be what is used in my codebase. However, this will change for another database type or other secret variables needed.\n\n```\nENGINE=django.db.backends.postgresql_psycopg2\nNAME=database_name\nUSER=database_user\nPASSWORD=database_password\nHOST=localhost or database_host\nPORT=5432\nSECRET_KEY=joi309g#j809ub0a9\n```\n\n### Installation of initial dependencies\nYou will need to use pip to download some dependencies to begin with. They are for the database and to have access to the env file. The environ package is for the env file and psycogq2 is for the postgres database. The djangorestframework is the dependency using django for rest activities. The cors headers dependency helps with allow the client and api talk to each other without problem.\n\n```\npip install django-environ\npip install psycopg2\npip install djangorestframework\npip install django-cors-headers\n```\n\n### Settings file configuration\nThe settings file helps govern how the backend behaves. There are some parts of this file we will configure to begin with while subsequent editting will be needed as you continue on with the development of the backend.\n\n#### Add imports\nSince we have already downloaded the environ dependency then we will need to include this at the top of the file. You can type in the following:\n\n```\nimport environ\n```\n\n#### Installed Apps\nAny time you add a dependency or an internal app then you will need to include it to the list of installed apps. You can scroll down to find this. When you find it then add the dependencies that we have already downloaded. The rest of the inclusion to this list will happen in the flow of making apps.\n\n```\nINSTALLED_APPS = [\n    ...\n    'environ',\n    'rest_framework',\n    'corsheaders',\n    ...\n]\n```\n\n#### Configure rest framework\nThis configuration has to do with the permissions allowed by the users that are using this app. There are different settings on the scope and type of permissions that Django has available. The list of permissions available are [here](https://www.django-rest-framework.org/api-guide/permissions/).  This also affect the type of exceptions we can make for the project. This will be helpful when we configure the 404 and other error handling which may occur. We will cover this part more when we get to that point.\n\n```\nREST_FRAMEWORK = {\n    'DEFAULT_PERMISSION_CLASSES': [\n        'rest_framework.permissions.AllowAny'\n    ],\n    'EXCEPTION_HANDLER': 'apps.utils.custom_exception_handler.custom_exception_handler'\n}\n```\n\n#### Configure environ\nWithin the file you will see an area where there is a SECRET_KEY variable. Initially it is showing the value of this variable which is not ideal. Instead we will be using the SECRET_KEY variable we made in the env file. In order to do that enter the following text:\n\n```\nenv = environ.Env()\nenviron.Env.read_env()\n```\n\nThis will allow you to now use this dependency within the settings file to refer any variables you want to source from the env file. When accessing a variable from the env file then you can just use the following usage:\n\n```\nSECRET_KEY = env('SECRET_KEY')\n```\n\n#### Configure Cors\nNext is the configuration of cors for this project. You can copy and paste the following and include it in the settings file\n\n```CORS_ALLOW_METHODS = [\n    \"DELETE\",\n    \"GET\",\n    \"OPTIONS\",\n    \"PATCH\",\n    \"POST\",\n    \"PUT\",\n]\n\nCORS_ORIGIN_ALLOW_ALL = True\n```\n\n#### Configure Middleware\nThe middleware is what gets triggers on a client request before and post, get, put, etc is done. Copy and paste this text for the needed middlware:\n\n```\nMIDDLEWARE = [\n    'django.middleware.security.SecurityMiddleware',\n    'django.contrib.sessions.middleware.SessionMiddleware',\n    'corsheaders.middleware.CorsMiddleware',\n    'django.middleware.common.CommonMiddleware',\n    'django.middleware.csrf.CsrfViewMiddleware',\n    'django.contrib.auth.middleware.AuthenticationMiddleware',\n    'django.contrib.messages.middleware.MessageMiddleware',\n    'django.middleware.clickjacking.XFrameOptionsMiddleware',\n]\n```\n\n#### Configure database\nWe will be using Postgres for the database in this project. In order to configure it then you will need to have this text in your settings file. These variables are coming from the env file. Use the env file to edit or create any variables used in this portion.\n\n```\nDATABASES = {\n    'default': {\n        'ENGINE': env('ENGINE'),\n        'NAME': env('NAME'),\n        'USER': env('USER'),\n        'PASSWORD': env('PASSWORD'),\n        'HOST': env('HOST'),\n        'PORT': env('PORT'),\n    }\n}\n```\n\nfurther configuration will be done via the terminal. Open a new window and type \u003ccode\u003epsql\u003c/code\u003e to open the Postgres program. You will beed to create a new database by using the following:\n\n```\nCREATE DATABASE swiggy;\nCREATE USER database_user WITH ENCRYPTED PASSWORD 'database_password';\nGRANT ALL PRIVILEGES ON DATABASE blogs TO database_user;\n```\n\nThe user and password will be specific to you what you have used to install Postgres. After creating the database you can use the command \u003ccode\u003e\\c swiggy\u003c/code\u003e to navigate to the database. It will be empty now but if you wanted to see if there are any tables in the database then you can use the command \u003ccode\u003e\\d\u003c/code\u003e to check that.\n\n### Exception and Error handling configuration\nOpen the urls.py file located in the config folder. This will be the main routing for the app. This will route the user to the appropriate urls.py in the subsequent app. We will get to this when we go through the flow of the project. For now we will take care of the configuration of the exception and error handling. Below the urlspatterns array type the following.\n\n```\ndef response404(request, status=200, message='Not Found'):\n    response_object = {\n        'timestamp': datetime.now(),\n        'status': 'Data unavailable',\n        'status_code': 404,\n        'message': message,\n        'data': []\n    }\n    return JsonResponse(data=response_object, status=status)\n\n\ndef response500(request, status=500, message='Not Found'):\n    response_object = {\n        'timestamp': datetime.now(),\n        'status': 'Error',\n        'status_code': status,\n        'message': message,\n        'data': []\n    }\n    return JsonResponse(data=response_object, status=status)\n\n\nhandler404 = response404\nhandler500 = response500\n```\n\nThis will allow you to send back JSON payload when there is an error. I have made a response object that acts as a singular payload that the user would get when reading it from the client.\n\nIn addition to this to handle exceptions, there will be one more area to add some configuration. Make a folder in the apps folder called utils. Inside this folder make a python file which will be the custom exception handler. Inside the file you can include this:\n\n```\ndef custom_exception_handler(exc, context):\n    response = exception_handler(exc, context)\n\n    response_object = {\n        'timestamp': '',\n        'status': '',\n        'status_code': '',\n        'message': '',\n        'data': []\n    }\n\n    # Now add the HTTP status code to the response.\n    if response is not None:\n        response.data['timestamp'] = datetime.datetime.now()\n        response.data['status'] = \"Error\"\n        response.data['message'] = response.data['detail'],\n        response.data['status_code'] = response.status_code\n        response.data['data'] = []\n        print(response.data['detail'])\n    return response\n```\n\nAgain I am using a standard response object so that each response to the client will be uniform. This will help on that side when using Typescript.\n\n#### Admin configuration\nIn order to use the Django admin portal then you will need to have a way to access it. You will need to create a superuser to login. To do this, type this command in the terminal and answer the questions to make a username and password. This will be your credentials when logging in later on.\n\n```\npython3 manage.py create superuser\n```\n\n### Process Flow for Apps\nThis is the general process when you make each app. We will cover the restaurants app, but this is a repeatable process for you to follow on each app.\n\n#### App creation\nWhen you want to create a new app then you will need to do two things. The first thing to do is open the terminal window for any usage and navigate to the apps folder. Inside the apps folder you will create a new folder that will be the name of the app. This is needed first before any other CLI commands. After you make that folder then navigate inside the folder and create a __init__.py file. Then go back to your terminal and navigate back to the root folder or the server folder in this case. You will then type the following command to populate the folder you just created with the necessary files.\n\n```\npython manage.py startapp \u003cappname\u003e apps/\u003cappname\u003e\n```\n\nInsert the app name where I have put the brackets. This will populate the folder. Two more things you will need to do before moving to the next step. It includes navigating back to this app folder and creating two files. The first file will be for the urls of that app and the other will be a serializer file which we will cover later.\n\n#### Configure apps file \nGo to the apps folder and open the apps.py file. Since we are using the apps folder and creating subfolders to hold all of our apps then we need to reconfigure the route in this file. Change the name to include and apps before the name of the app. Please see below:\n\n```\nname = 'apps.discount'\n``` \n\n#### Configure main urls\nGo to the urls.py file in the config folder. This holds the main urls and routing for the backend. You will need to include one path for the newly created app that you have just created. The urls for the respective app will be within the urls.py file within the app folder. Do include the new path type the following:\n\n```\npath('api/v1/\u003cappname\u003e/', include('apps.\u003cappname\u003e.urls'))\n```\n\nInsert your app name where there is the appname shown.\n  \n#### Model Configuration\nThe model will be the file that connects the backend to the database. Depending on the database you are using, the syntax might alter slightly. I am using Postgres so the syntax I will show is based on that.\n  \nFirstly, make a new class which has the name of the app. Normal convention is to capitalize the first letter of the app. Inside this class you will include all the fields you want to include in the table. This could be as simple or complex as the project dictates. If you want to link tables together then you will need to employ foreign keys or relationships. This will have an impact if you migrate your model throughout the project so take that into consideration. At the end of the class you will need to add a constructor and another class (Meta) to tell what you want to see if you query this table in the database using Django. Here is an example of the parts:\n  \n```\nclass Restaurant(models.Model):\n    restaurant_id = models.UUIDField(null=False, blank=False, primary_key=True, default=uuid.uuid4, unique=True)\n    restaurant_name = models.CharField(null=False, max_length=50, default=\"Food Stuff\")\n\n    def __str__(self):\n        return self.restaurant_name\n\n    class Meta:\n        ordering = ['restaurant_name']\n```\n  \nYou can go more indepth for how each aspect of the model works and the attributes, etc can accomplish. \n  \n#### Migrations configuration\nIf you want to migrate the model after it is made or after all the models are made is up to you. Again this has impacts on how the database will perform and if you end up inserting data into the database as you go along and have relationships between tables. In any case, you will need to use to commands to do the migration:\n  \n```\npython manage.py makemigrations\npython manage.py migrate\n```\n  \nAfter this is done successfully then a new folder called migrations will show in your app folder. This will show all the migrations you do.\n  \n#### Admin configuration\nDjango has an admin portal that makes life a little easier. In order to see what is in the model then you will need to include this model in the admin file. Open the admin.py file within your app folder. Type the following:\n  \n```\n@admin.register(models.Restaurant)\nclass RestaurantAdmin(admin.ModelAdmin):\n    list_display = ('restaurant_id', 'restaurant_name')\n\n```\n  \nThe list display tuple will let you list which fields you want to see when accessing the Django admin portal. In there you can do all the CRUD functions for that table and it will work with the database.\n\n#### Serializer Configuration\nGo to the serializer file in your app folder. This file will be empty. You can be as complex as you want to be for your usage, but for this project we will keep it simple. In order for it to work we will type this in:\n\n```\nclass RestaurantSerializer(ModelSerializer):\n    class Meta:\n        model = Restaurant\n        fields = \"__all__\"\n```\n\n#### Views Configuration\nThe views file works as a controller in the traditional MVC format. This is where you will create the logic for each url path. You can use decorators and then make the function which will be used in the urls file. The api view will tell which http activity will happen. The function will end with a Response which will be sent back to the client on the frontend. I have made a standard response object which makes life easier on the frontend especially when using Typescript. Here is an example of a route:\n\n```\n@api_view(['GET'])\ndef getRestaurants(request):\n    restaurants = Restaurant.objects.all()\n    serializer = RestaurantSerializer(restaurants, many=True)\n    response_object.update(\n        timestamp=datetime.now(),\n        status=http.HTTPStatus.OK.name,\n        status_code=http.HTTPStatus.OK.value,\n        message=\"Returning all restaurants\",\n        data=serializer.data\n    )\n    return Response(response_object)\n```\n\n#### Urls Configuration\nThe urls file connects to the main urls file in the config folder. The url file in your app folder will give more routing info for Django to use in order to get the correct path. The paths are based on the views that you have created. Here is an example of a url array and path:\n\n```\napp_name = \"restaurants\"\n\nurlpatterns = [\n    path(\"routes/\", views.getRoutes, name=\"routes\"),\n    path(\"\u003cuuid:pk\u003e/\", views.getRestaurant, name=\"restaurant\"),\n    path(\"\", views.getRestaurants, name=\"restaurants\"),\n]\n```\n\n## Frontend Setup\nThis part of the project is done using Visual Studio Code as the text editor. You can use whichever IDE or text editor that you prefer. We will also be usng the CLI for Vue. \n\n### Vue CLI Configuration\nIf you have not installed Vue CLI on your computer, then do that first. The link is in the first steps of this documentation. Open a terminal and navigate to the root folder (swiggy) then type the command:\n\n```\nvue create client\n```\n\nAfter Vue starts to install the subfolders it will ask you to select various options of how you want Vue to be configured. These include which version, styling, etc options.\n\nYou can then run the server by typing this command into the terminal window. The default port used is 8080, but this can be changed depending on your preference. Once you type on the command you can go to your browser and type \u003ccode\u003elocalhost:8080\u003c/code\u003e to have the default view render.\n\n```\nnpm run serve\n\nOR\n\nyarn serve\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdking1342%2Fswiggy-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdking1342%2Fswiggy-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdking1342%2Fswiggy-clone/lists"}