Project Idea – A website acting as transaction between oxygen sellers and buyers
In the present Covid19 situation it has become the need of the hour to find Oxygen sellers in an area. Many people lose their lives due to not finding the oxygen seller in their area. We have come up with a solution for that. What if there was a website where all you needed to do was enter your city name and it showed all the places where you could buy oxygen near you. It will be awesome right!. That’s what we have done.
- Frontend – React
- Backend – Django REST
Django REST: Django is a Python-based web framework that follows the model–template–views architectural pattern. Django REST framework is a toolkit for building Web APIs.
Step by step implementation of the project: To get this project running on your own local system make sure you have node.js and Django installed.
- Clone the Repository from Github: The Github link is “https://github.com/LordofUniverse/oxy-zone-frontend”. Clone the repo to a suitable location on your local server. Make u have the latest stable node and npm installed. To install node and npm, please follow this link “https://docs.npmjs.com/downloading-and-installing-node-js-and-npm”.
- Running on the local server: In the terminal / Command prompt, navigate to the directory of oxy-zone-frontend/ in the terminal / Command prompt. Then run the following commands:
$ npm install
This is to install all the required node modules required to run the app.
$ npm start
This is to start the development server
We will explain the code of the project that we cloned above. As the code is longer and doesn’t look nice when added here, we have decided to add links to the code through GitHub.
We will start Frontend(React) first:
1. We will create the project structure like this:
2. We will create code for links for the website in App.js
3. Home page: A page with a simple design that shows the list of oxygen containers sold by sellers, where a search bar is provided for the user to type in the name of the city. For oxygen sellers, there would be an option for them to register on the website and provide details like address and price/cylinder of oxygen.
React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Buyer/BuyerHome.js
4. Seller login: A seller login page for oxygen sellers to register themselves. The data is stored in an SQLite database.
React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/sellerlogin.js
5. Seller Page: Sellers can create the list of oxygen containers along with the price and phone number. The data to be displayed is fetched from the database through a custom-made API using the Django REST framework. The data is displayed based on the nearness to the searcher.
React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/SellerHome.js
6. We have added Map feature as well, to show markers regarding the locations where oxygen containers are sold
React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Map/react_map.js
7. Update Profile Page: Sellers can change their profile photo or change their email, password on this page. They can add or change descriptions of themselves.
React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/UpdateProfile/Update.js
To clone the project, https://github.com/LordofUniverse/oxy-zone-backend, navigate to this directory and do the command ‘python -m pip freeze > requirements.txt’ to install the necessary modules for this project.
We need to install python, and some modules are listed below:
1.We will have the project structure like this:
2.Building APIs for the react app: In the Frontend app within covidproject we created 2 models in models.py namely Sellers and Places
Next, we create the API endpoints in the views.py(https://github.com/LordofUniverse/oxy-zone-backend/blob/master/frontend/views.py). For the API endpoints, the necessary serializers are defined in serializers.py.
3.Running Django server: After completing the code part, to run the Django server:
open the terminal and navigate to the correct directory containing the manage.py script, then run the command:
$ python manage.py runserver
On successful execution, you will get:
So by following these steps, you will be able to run a copy of the website on your own local server
Video Demo of the app:
Conclusion: With the increasing need to know oxygen sellers in time of the oxygen crisis, this app could help people. The success of this App depends on the people registering and using it. Stay home, stay safe, and get vaccinated!
- Vinu Rakav @statuschangingtheworld
- Joel Thomas @thomas23
Please Login to comment...